<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>西红柿爱番茄 &#187; getAttribute</title>
	<atom:link href="http://www.ilovejs.net/archives/tag/getattribute/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ilovejs.net</link>
	<description>到了创造为主的阶段，不忘继续学习</description>
	<lastBuildDate>Thu, 15 Dec 2011 06:18:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>从文档中Get Attributes的探究</title>
		<link>http://www.ilovejs.net/archives/183</link>
		<comments>http://www.ilovejs.net/archives/183#comments</comments>
		<pubDate>Wed, 06 Jan 2010 09:17:01 +0000</pubDate>
		<dc:creator>Supersha</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[attributes]]></category>
		<category><![CDATA[getAtributeNode]]></category>
		<category><![CDATA[getAttribute]]></category>

		<guid isPermaLink="false">http://www.ilovejs.net/?p=183</guid>
		<description><![CDATA[从HTML DOM文档中获取DOM节点的某个Attribute的时候，我们通常都会使用getAttribute方法，或许大家都明白，getAttribute在获取for和class等属性时，浏览器的兼容性不理想，需要特殊处理，原因在于class、for是Javascript的关键字。因此需要相应的转化成className、htmlFor来获取他们的属性值比如： [javascript] element.getAttribute(&#34;class&#34;); ===&#62; return null; element.getAttribute(&#34;for&#34;); ===&#62;return null; [/javascript] 使用getAttribute来获取属性的值还有其他的一些问题：比如想要获取DOM节点的事件属性或者href、src的时候都是存在问题的： [javascript] &#60;a href=&#34;/index.html&#34; onclick=&#34;alert(&#8216;Back home!&#8217;)&#34;&#62;Home&#60;/a&#62; element.getAttribute(&#8216;href&#8217;); // -&#62; &#8230; <a href="http://www.ilovejs.net/archives/183" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>
从HTML DOM文档中获取DOM节点的某个Attribute的时候，我们通常都会使用getAttribute方法，或许大家都明白，getAttribute在获取for和class等属性时，浏览器的兼容性不理想，需要特殊处理，原因在于class、for是Javascript的关键字。因此需要相应的转化成className、htmlFor来获取他们的属性值比如：
</p>
<p>[javascript]<br />
element.getAttribute(&quot;class&quot;);  ===&gt; return null;<br />
element.getAttribute(&quot;for&quot;);  ===&gt;return null;<br />
[/javascript]<br />
使用getAttribute来获取属性的值还有其他的一些问题：比如想要获取DOM节点的事件属性或者href、src的时候都是存在问题的：<br />
[javascript]<br />
&lt;a href=&quot;/index.html&quot; onclick=&quot;alert(&#8216;Back home!&#8217;)&quot;&gt;Home&lt;/a&gt;<br />
element.getAttribute(&#8216;href&#8217;);<br />
// -&gt; &quot;http://tobielangel.com/index.html&quot; in IE<br />
// -&gt; &quot;/index.html&quot; in well behaved browsers</p>
<p>element.getAttribute(&#8216;onclick&#8217;);<br />
// -&gt; &quot;function anonymous(){alert(&#8216;Back home!&#8217;)}&quot; in IE<br />
// -&gt; &quot;alert(&#8216;Back home!&#8217;)&quot; elsewhere.<br />
[/javascript]<br />
上面的这些兼容性问题都是getAttribute所解决不了的。现在我们来看一个“亮点”：使用getAttribute的第二个参数<em><strong>iFrag</strong></em>。根据微软官方的解释，使用第二个参数设置为2的时候会返回属性直接的值，而不会自动转化。但是这又将会出现什么问题呢？<br />
[javascript]<br />
&lt;a href=&quot;/index.html&quot; onclick=&quot;alert(&#8216;Back home!&#8217;)&quot;&gt;Home&lt;/a&gt;<br />
//iFrag的作用很好的解决了href的兼容性问题<br />
element.getAttribute(&#8216;href&#8217;, 2);<br />
// -&gt; &quot;/index.html&quot; in IE<br />
// -&gt; &quot;/index.html&quot; in well behaved browsers</p>
<p>//但是：事件属性的问题依然没有解决<br />
element.getAttribute(&#8216;onclick&#8217;, 2);<br />
// -&gt; &quot;function anonymous(){alert(&#8216;Back home!&#8217;)}&quot; in IE<br />
// -&gt; &quot;alert(&#8216;Back home!&#8217;)&quot; elsewhere.<br />
[/javascript]<br />
还有没有其他的办法呢？ 或许大家会再次想到使用<strong>attributes collection</strong>。没错，attributes可以解决了事件属性的问题，同时也可以解决class和for的问题：<br />
[javascript]<br />
element.attributes['onclick'];<br />
// -&gt; &quot;alert(&#8216;Back home!&#8217;)&quot;<br />
[/javascript]</p>
<p>
但是attributes collection也并不兼容href，style，onload，value，input，valign等等一连串的其他的属性。所以attributes collection并不是一个好的解决问题的方法。
</p>
<p>
通过查阅<a href="https://developer.mozilla.org/En/DOM">Mozilla DOM API</a>，查看到一个类似的方法：<a href="https://developer.mozilla.org/en/DOM/element.getAttributeNode">getAttributeNode</a>。了解到它的使用方法之后，再次测试，发现它兼容class，for，和事件属性以及src等敏感属性，在各个浏览器都兼容的很好，但是它对于href属性问题依然存在，IE和其他浏览器显示的值不一样。万般无奈之际，也就只有写一个兼容的通用函数来处理了。下面是我写的一个通用函数：
</p>
<p>[javascript]<br />
function getAttributeCustom(element,attr){<br />
	return attr === &quot;href&quot; ? element.getAttribute(&quot;href&quot;,2) : element.getAttributeNode(attr).value;<br />
}<br />
[/javascript]<br />
它结合了上面分析的方法来解决一些敏感属性的取值。在这个方法中，你可以直接传入class和for字符串，而不用className和htmlFor来替代。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ilovejs.net/archives/183/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

