JavaScript HTML DOM 元素(節點)
在文檔對象模型 (DOM) 中,每個節點都是一個對象。DOM 節點有三個重要的屬性 :
1. nodeName : 節點的名稱
2. nodeValue :節點的值
3. nodeType :節點的類型
節點類型:元素 1 ,屬性 2 ,文本 3 ,註釋 8,文檔 9。
一、添加和刪除節點(HTML 元素)
1、創建節點
1)創建該元素(元素節點);
2)向一個已存在的元素追加該元素。
語法:appendChild(newnode)
eg:
1 <div id="div1">
2 <p id="p1">這是一個段落</ p>
3 <p id="p2">這是另一個段落</p>
4 </div>
5
6 <script>
7 var para=document.createElement("p");
8 var node=document.createTextNode("這是新段落。");
9 para.appendChild(node);
10
11 var element=document.getElementById("div1");
12 element.appendChild(para);
13 </script>
document.createElement("標簽名"); // 創建元素節點
document.createTextNode("文本"); //創建文本節點
appendChild(); //方法向節點添加最後一個子節點。也可以使用 appendChild() 方法從一個元素向另一個元素中移動元素。 用法:a.appendChild(b),把b添加到a內。
2.添加節點
appendChild(); //
語法,eg:同上。
insertBefore(); //insertBefore() 方法可在已有的子節點前插入一個新的子節點。
語法:insertBefore(newnode,node);
eg:
1 <ul id="test">
2 <li>JavaScript</li>
3 <li>HTML</li>
4 </ul>
5
6 <script type="text/javascript">
7 var otest = document.getElementById("test");
8 var newli = document.createElement("li");
9 newli.innerHTML="php";
10 //otest.insertBefore(newli,otest.lastChild);
11 otest.insertBefore(newli,otest.childNodes[1]);
12 </script>
3.刪除節點
removeChild() //removeChild() 方法從子節點列表中刪除某個節點。如刪除成功,此方法可返回被刪除的節點,如失敗,則返回 NULL。
語法:nodeObject.removeChild(node)
eg:
1 <div id="div1">
2 <p id="p1">這是一個段落。</p>
3 <p id="p2">這是另一個段落。</p>
4 </div>
5
6 <script>
7 var parent=document.getElementById("div1");
8 var child=document.getElementById("p1");
9 parent.removeChild(child);
10 </script>
DOM 需要清楚需要刪除的元素,以及它的父元素。先找到希望刪除的子元素,然後使用其 parentNode 屬性來找到父元素。
4.替換節點
replaceChild //把一個給定父元素裏面的一個子節點替換為另一個子節點。
語法:referencre = element.replaceChild(newChild,oldChild); //newChild: 必需,用於替換 oldChild的對象。 oldChild: 必需,被 newChild替換的對象。
eg:
1 <div>
2 <b id="oldnode">JavaScript</b>是一個很常用的技術,為網頁添加動態效果。</div>
3 <a href="javascript:replaceMessage()"> 將加粗改為斜體</a>
4
5 <script type="text/javascript">
6 function replaceMessage(){
7 var b=document.getElementById("oldnode");
8 var newNode=document.createElement("i");
9 newNode.innerHTML=b.innerHTML;
10 b.parentNode.replaceChild(newNode,b);
11 }
12 </script>
註意:當 oldnew 被替換時,所有與之相關的屬性內容都將被移除。 newChild必須先被建立。
5.訪問子節點
childNodes //訪問選定元素節點下的所有子節點的列表,返回的值可以看作是一個數組,他具有length屬性。
語法:elementNode.childNodes //可用childNodes[i]數組的形式表示第幾個子元素
eg:
1 <div>
2 javascript
3 <p>javascript</p>
4 <div>jQuery</div>
5 <h5>PHP</h5>
6 </div>
7 <script type="text/javascript">
8 var int=document.getElementsByTagName("div")[0].childNodes;
9 for (var i=0;i<int.length;i++)
10 {
11 document.write("名字:"+int[i].nodeName+"<br>");
12 }
13 document.write("子節點個數:"+int.length+"<br>");
14 </script>
6.訪問子節點的第一和最後項
firstChild
//
返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點,則該屬性返回 NULL。
語法:node.firstChild //與elementNode.childNodes[0]是同樣的效果。
lastChild
//返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點,則該屬性返回 NULL。
語法:node.lastChild //與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
eg:
1 <div id="con">
2 <p>javascript</p>
3 <div>jQuery</div>
4 <h5>PHP</h5>
5 </div>
6 <script type="text/javascript">
7 var x=document.getElementById("con");
8 document.write("第一個子節點:"+x.firstChild.nodeName+"<br>");
9 document.write("最後一個子節點:"+x.lastChild.nodeName);
10 </script>
7.訪問父節點
parentNode //獲取指定節點的父節點
語法:elementNode.parentNode
eg:
1 <div id="text">
2 <p id="con"> parentNode 獲取指點節點的父節點</p>
3 </div>
4 <script type="text/javascript">
5 var mynode= document.getElementById("con");
6 document.write(mynode.parentNode.nodeName);
7 </script>
註意: 父節點只有一個,瀏覽器兼容問題,chrome、firefox等瀏覽器標簽之間的空白也算是一個文本節點。
8.訪問兄弟節點
nextSibling //可返回某個節點之後緊跟的節點(處於同一樹層級中)。
語法:nodeObject.nextSibling
previousSibling //可返回某個節點之前緊跟的節點(處於同一樹層級中)。
語法:nodeObject.previousSibling
eg:
1 <ul id="myList">
2 <li id="item1">Coffee</li>
3 <li id="item2">Tea</li>
4 </ul>
5 <p id="demo">點擊按鈕來獲得首個項目的下一個同胞。</p>
6 <button onclick="myFunction()">試一下</button>
7 <script>
8 function myFunction()
9 {
10 var x=document.getElementById("demo");
11 x.innerHTML=document.getElementById("item1").nextSibling.innerHTML;
12 }
13 </script>
註意: 如果無此節點,則該屬性返回 null。兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點(例如,換行符號),而其它瀏覽器不會忽略。
解決問題方法:判斷節點nodeType是否為1, 如是為元素節點,跳過。
JavaScript HTML DOM 元素(節點)