語法：

document.getElementsByName(name)

與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過?id 屬性。

注意:

1.?因為文檔中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數組，而不是一個元素。

2.?和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，從0開始。

看看下面的代碼:

運行結果:

語法:

getElementsByTagName(Tagname)

說明:

1. Tagname是標簽的名稱，如p、a、img等標簽名。

2. 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，所以從0開始。

看看下面代碼，通過getElementsByTagName()獲取節點。

getElementByID,getElementsByName,getElementsByTagName區別

<input type="checkbox" name="hobby" id="hobby1">  音樂

  <input type="checkbox" name="hobby" id="hobby1">  音樂<input type="checkbox" name="hobby" id="hobby2">  登山<input type="checkbox" name="hobby" id="hobby3">  游泳<input type="checkbox" name="hobby" id="hobby4">  閱讀<input type="checkbox" name="hobby" id="hobby5">  打球<input type="checkbox" name="hobby" id="hobby6">  跑步 <input type="button" value = "全選" id="button1"><input type="button" value = "全不選" id="button1">

通過指定標簽獲取元素

elementNode.getAttribute(name)

用的是數組

setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。

語法：

elementNode.setAttribute(name,value)

說明：

1.name:?要設置的屬性名。

2.value:?要設置的屬性值。

注意：

1.把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。

2.類似于getAttribute()方法，setAttribute()方法只能通過元素節點對象調用的函數。

innerHTML 屬性

Object.innerHTML

在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ：

1. nodeName : 節點的名稱

2. nodeValue ：節點的值

3. nodeType ：節點的類型

一、nodeName 屬性:?節點的名稱，是只讀的。

1.?元素節點的 nodeName 與標簽名相同
2.?屬性節點的 nodeName 是屬性的名稱
3.?文本節點的 nodeName 永遠是 #text
4.?文檔節點的 nodeName 永遠是 #document

二、nodeValue 屬性：節點的值

1. 元素節點的 nodeValue 是?undefined 或 null
2. 文本節點的 nodeValue 是文本自身
3. 屬性節點的 nodeValue 是屬性的值

三、nodeType 屬性:?節點的類型，是只讀的。以下常用的幾種結點類型:

元素類型?? ?節點類型
? 元素 ? ? ? ? ?1
? 屬性 ? ? ? ? ?2
? 文本 ? ? ? ? ?3
? 注釋 ? ? ? ? ?8
? 文檔 ? ? ? ? ?9

訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，具有length屬性。

語法：

elementNode.childNodes

注意：

如果選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。

我們來看看下面的代碼:

運行結果:

IE:

  UL子節點個數:3節點類型:1

其它瀏覽器:

   UL子節點個數:7節點類型:3

注意:

1. IE全系列、firefox、chrome、opera、safari兼容問題

2.?節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，所以IE是3，其它瀏覽器是7，如下圖所示:

如果把代碼改成這樣:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

運行結果:（IE和其它瀏覽器結果是一樣的）

  UL子節點個數:3節點類型:1

一、firstChild?屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。

語法：

node.firstChild

說明：與elementNode.childNodes[0]是同樣的效果。?

二、?lastChild?屬性返回‘childNodes’數組的最后一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。

語法：

node.lastChild

說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。?

注意:?Internet Explorer 會忽略節點之間生成的空白文本節點，而其它瀏覽器不會。我們可以通過檢測節點類型，過濾子節點。

獲取指定節點的父節點

語法：

elementNode.parentNode

注意:父節點只能有一個。

看看下面的例子,獲取 P 節點的父節點，代碼如下:

<div id="text"><p id="con"> parentNode 獲取指點節點的父節點</p>
</div> 
<script type="text/javascript">var mynode= document.getElementById("con");document.write(mynode.parentNode.nodeName);
</script>

運行結果:

parentNode 獲取指點節點的父節點
DIV

訪問祖節點:

elementNode.parentNode.parentNode

看看下面的代碼:

<div id="text"> ?<p>parentNode ? ? ?<span id="con"> 獲取指點節點的父節點</span></p>
</div>?
<script type="text/javascript">var mynode= document.getElementById("con");document.write(mynode.parentNode.parentNode.nodeName);
</script>

運行結果:

parentNode獲取指點節點的父節點
DIV

注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標簽之間的空白也算是一個文本節點。

1.?nextSibling 屬性可返回某個節點之后緊跟的節點（處于同一樹層級中）。

語法：

nodeObject.nextSibling

說明：如果無此節點，則該屬性返回 null。

2. previousSibling 屬性可返回某個節點之前緊跟的節點（處于同一樹層級中）。

語法：

nodeObject.previousSibling  

說明：如果無此節點，則該屬性返回 null。

注意: 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。

解決問題方法:

判斷節點nodeType是否為1, 如是為元素節點，跳過。

運行結果:

LI = javascript
nextsibling: LI = jquery

在指定節點的最后一個子節點列表之后添加一個新的子節點。

語法:

appendChild(newnode)

參數:

newnode：指定追加的節點。

div標簽內創建一個新的 P 標簽，代碼如下:

運行結果:

HTML
JavaScript
This is a new p

insertBefore() 方法可在已有的子節點前插入一個新的子節點。

語法:

insertBefore(newnode,node);

參數:

newnode: 要插入的新節點。

node: 指定此節點前插入節點。

我們在來看看下面代碼，在指定節點前插入節點。

運行結果:

This is a new p
JavaScript
HTML

注意:?otest.insertBefore(newnode,node); 也可以改為:??otest.insertBefore(newnode,otest.childNodes[0]);?

removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。

語法:

nodeObject.removeChild(node)

參數:

node ：必需，指定需要刪除的節點。

我們來看看下面代碼，刪除子點。

運行結果:

HTML
刪除節點的內容: javascript

注意:?把刪除的子節點賦值給 x，這個子節點不在DOM樹中，但是還存在內存中，可通過 x 操作。

如果要完全刪除對象，給 x 賦 null?值，代碼如下:

replaceChild 實現子節點(對象)的替換。返回被替換對象的引用。?

語法：

node.replaceChild (newnode,oldnew ) 

參數：

newnode : 必需，用于替換 oldnew 的對象。?
oldnew : 必需，被 newnode 替換的對象。

我們來看看下面的代碼:

?

效果: 將文檔中的 Java 改為 JavaScript。

注意:?

1.?當 oldnode 被替換時，所有與之相關的屬性內容都將被移除。?

2. newnode 必須先被建立。?

createElement()方法可創建元素節點。此方法可返回一個 Element 對象。

語法：

document.createElement(tagName)

參數:

tagName：字符串值，這個字符串用來指明創建元素的類型。

注意：要與appendChild() 或 insertBefore()方法聯合使用，將元素顯示在頁面中。

我們來創建一個按鈕，代碼如下：

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  input.type = "button";  input.value = "創建一個按鈕";  body.appendChild(input);  </script>  

效果：在HTML文檔中，創建一個按鈕。

我們也可以使用setAttribute來設置屬性，代碼如下：

<script type="text/javascript">  var body= document.body;             var btn = document.createElement("input");  btn.setAttribute("type", "text");  btn.setAttribute("name", "q");  btn.setAttribute("value", "使用setAttribute");  btn.setAttribute("onclick", "javascript:alert('This is a text!');");       body.appendChild(btn);  
</script>  

效果：在HTML文檔中，創建一個文本框，使用setAttribute設置屬性值。 當點擊這個文本框時，會彈出對話框“This is a text!”。

createTextNode() 方法創建新的文本節點，返回新創建的 Text 節點。

語法：

document.createTextNode(data)

參數：

data :?字符串值，可規定此節點的文本。

我們來創建一個<div>元素并向其中添加一條消息，代碼如下：

運行結果: