如何通過Javascript訪問HTML DOM中元素的字段？

Question

我是HTML DOM操作的新手。即使簡單的例子，我也失敗了。

這裏是我的代碼：

<h1>head 1</h1> 
<h2>head 2</h2> 
<script type="text/javascript"> 
var h1 = document.getElementsByTagName('h1'); 
alert("tagName : "+h1.getTagName()); 
h1.parentNode.removeChild(h1); 
</script> 
<h3>head 3</h3> 

上面的代碼甚至不彈出任何「警告」。

我也試過：

alert("nodeType: "+h1.nodeType); 
alert("nodeName: "+h1.nodeName); 
alert("nodeValue: "+h1.nodeValue); 
alert("tagName: "+h1.tagName); 

然而，他們都響應undefined。

Answer 1

這個網站真的很有用。 http://www.w3schools.com/jsref/dom_obj_node.asp

一旦你得到它的把握，一定要使用jquery或其他一些庫與DOM的（使生活更輕鬆）： http://jquery.com/

<h1>head 1</h1> 
<h2>head 2</h2> 
<script type="text/javascript"> 
var h1 = document.getElementsByTagName('h1')[0]; 
alert("tagName : "+h1.localName); 
h1.parentNode.removeChild(h1); 
</script> 
<h3>head 3</h3> 

Answer 2

你忘了在你的參數報價：

var h1 = document.getElementsByTagName(h1); 

應該是：

var h1 = document.getElementsByTagName('h1'); 

你使用Firebug？如果不是，你應該。它會讓你知道你有這個錯誤。

Answer 3

它應該是：

var h1 = document.getElementsByTagName('h1')[0]; 

說明：

每當你使用getElements ...（注意s）你實際上得到了一個數組。 由它實際上意味着var h1 = document.getElementsByTagName('h1')後使用[0]讓我與標籤名=「H1」

的第一個元素，你的其他選擇是要麼循環這個數組，然後使用h1[i]（例如）或選擇合適的當它實際上正在使用此陣的成員，像這樣 -

alert("tag name: ",h1[0]); 

只是爲了對比，當您使用getElementById你只有一個元素，因此你可以直接使用它。