<?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>Lab of Chowky &#187; getElementById</title>
	<atom:link href="http://lab.chowky.com/tag/getelementbyid/feed/" rel="self" type="application/rss+xml" />
	<link>http://lab.chowky.com</link>
	<description>分享ＩＴ技術</description>
	<lastBuildDate>Tue, 07 Sep 2010 10:48:16 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>小心IE7 javascript 的 getElementById Method  的問題</title>
		<link>http://lab.chowky.com/2009/08/%e5%b0%8f%e5%bf%83ie7-javascript-%e7%9a%84-getelementbyid-method-%e7%9a%84%e5%95%8f%e9%a1%8c/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=%25e5%25b0%258f%25e5%25bf%2583ie7-javascript-%25e7%259a%2584-getelementbyid-method-%25e7%259a%2584%25e5%2595%258f%25e9%25a1%258c</link>
		<comments>http://lab.chowky.com/2009/08/%e5%b0%8f%e5%bf%83ie7-javascript-%e7%9a%84-getelementbyid-method-%e7%9a%84%e5%95%8f%e9%a1%8c/#comments</comments>
		<pubDate>Thu, 06 Aug 2009 04:29:34 +0000</pubDate>
		<dc:creator>Chowky</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[Jquery, Mootools]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[getElementById]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[ie7]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[問題]]></category>

		<guid isPermaLink="false">http://lab.chowky.com/?p=1025</guid>
		<description><![CDATA[1. 要注意用相同的 name and id attributes for Form Inputs chowky 很久以前都覺得奇怪，不過這是因為IE系列和其他不同的browser的分別，ie 是會search 左name attribute先，再search id attribute，但是其他browser是不會的。所以兩個attributes 都要用相同的名。避免發生問題 1 &#60;input type=&#34;text&#34; name=&#34;full_address&#34; id=&#34;address&#34; value=&#34;5th Avenue&#34; /&#62; 2. 不要放name attribute 在form tag 入面。 和上面的情況非常相似，要避免IE的問題。 不過chowky 不知道name 是deprecated (哈) Also, the name attribute for forms is deprecated in XHTML Strict, so it’s not best practice anyhow. The name [...]]]></description>
			<content:encoded><![CDATA[<p>1. 要注意用相同的 name and id attributes for Form Inputs<br />
chowky 很久以前都覺得奇怪，不過這是因為IE系列和其他不同的browser的分別，ie 是會search 左name attribute先，再search id attribute，但是其他browser是不會的。所以兩個attributes 都要用相同的名。避免發生問題</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;full_address&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;address&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;5th Avenue&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span></pre></td></tr></table></div>

<p>2. 不要放name attribute 在form tag 入面。<br />
和上面的情況非常相似，要避免IE的問題。</p>
<p>不過chowky 不知道name 是deprecated (哈)</p>
<blockquote><p>Also, the name attribute for forms is deprecated in XHTML Strict, so it’s not best practice anyhow. The name attribute was added to form elements in older sites, so if you’re trying to debug a getElementById issue in IE7 on some inherited code, there could be a conflict occurring due to this fact.</p></blockquote>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">form</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;contact_form&quot;</span>&gt;</span></pre></td></tr></table></div>

<p><span id="more-1025"></span><br />
3. 不要在任何element tag 中使用 id=&#8221;description&#8221;<br />
這個真的奇怪，而且chowky 都不知道，因為未試過中招呢。~<br />
不過原來好簡單。<br />
因為是ie 的name attribute 和id attribute 的衝突。<br />
大家有無留意過，每一個website都會有meta tag</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;description&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;website description&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>  
<span style="color: #808080; font-style: italic;">&lt;!-- 就是這句，description 是name attribute，所以ie上其他的element 有description 要避免使用--&gt;</span></pre></td></tr></table></div>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//所以這兩句get出來的value : firefox 正常，但ie6,7 就會失敗，因為meta tag 是沒有value</span>
<span style="color: #003366; font-weight: bold;">var</span> textareaBox <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;description&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>textareaBox.<span style="color: #660066;">value</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>如果不能改變html 的話，就看看原文，有提供簡單的<a href="http://www.impressivewebs.com/avoiding-problems-with-javascript-getelementbyid-method-in-internet-explorer-7/">方向</a>去解決問題</p>
<p>Source: <a href="http://www.impressivewebs.com/avoiding-problems-with-javascript-getelementbyid-method-in-internet-explorer-7/">http://www.impressivewebs.com/avoiding-problems-with-javascript-getelementbyid-method-in-internet-explorer-7/</a></p>
 <img src="http://lab.chowky.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=1025" width="1" height="1" style="display: none;" /><p><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://lab.chowky.com/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share/Bookmark"/></a> </p>]]></content:encoded>
			<wfw:commentRss>http://lab.chowky.com/2009/08/%e5%b0%8f%e5%bf%83ie7-javascript-%e7%9a%84-getelementbyid-method-%e7%9a%84%e5%95%8f%e9%a1%8c/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
