DOM技術分享
1,nodeList代碼演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>hello</p>
<p>好吧</p>
<p>愉快的 一天</p>
</body>
<script>
var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++)
{
var y=x[1];
}
console.log(y);
</script>
</html>
2、parentNote
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="parent">
<b id="child">hello wrold</b>
</div>
</body>
<script>
console.log(document.getElementById("child").parentNode.nodeName);
</script>
</html>
3,firstChild
對 firstChild 最普遍的用法是訪問某個元素的文本：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>可以的</p>
<p>兄弟</p>
</div>
</body>
<script>
var first=document.getElementsByTagName(‘div‘)[0]
console.log(first.firstChild);
</script>
</html>
4、lastChild
lastChild 屬性返回被選節點的最後一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>下雨了</p>
<p>心好累</p>
</div>
</body>
<script>
var last=document.getElementsByTagName(‘div‘)[0]
console.log(last.lastChild);
</script>
</html>
5,previousSibling
語法：elementNode.previousSibling<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script>
function get_previoussibling(n)
{
var x=n.previousSibling;
while (x.nodeType!=1)
{
x=x.previousSibling;
}
return x;
}
xmlDoc=loadXMLDoc("books.xml");
var x=xmlDoc.getElementsByTagName("author")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.childNodes[0].nodeValue);
var y=get_previoussibling(x);
document.write("<br />Previous sibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.childNodes[0].nodeValue);
/*以上代碼的輸出：
author = Giada De Laurentiis
Previous sibling: title = Everyday Italian*/
</script>
</html>
6,previousElementSibling
定義和用法
previousSibling 屬性返回同一樹層級中指定節點的前一個節點。
被返回的節點以 Node 對象的形式返回。
註釋：如果沒有 previousSibling 節點，則返回值是 null。
<!DOCTYPE html>
<html>
<body>
<p>列表示例：</p>
<ul id="myList"><li id="item1">Coffee</li><li id="item2">Tea</li></ul>
<p id="demo">請點擊按鈕來獲得第二個列表項的前一個同胞的 id。</p>
<button onclick="myFunction()">試一下</button>
<script>
function myFunction()
{
var itm=document.getElementById("item2");
var x=document.getElementById("demo");
x.innerHTML=itm.previousSibling.id;
}
</script>
<p><b>註釋：</b>元素內的空白字符被視作文本，而文本被視作節點。</p>
<p>請在兩個 <li> 元素之間添加空格，結果將是 "undefined"。</p>
</body>
</html>
7,appendChild
定義和用法
appendChild() 方法向節點添加最後一個子節點。
提示：如果您需要創建包含文本的新段落，請記得添加到段落的文本的文本節點，然後向文檔添加該段落。
您也可以使用 appendChild() 方法從一個元素向另一個元素中移動元素。
<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">請點擊按鈕向列表中添加項目。</p>
<button onclick="myFunction()">親自試一試</button>
<script>
function myFunction()
{
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>
<p><b>註釋：</b>首先創建 LI 節點，然後創建文本節點，然後把這個文本節點追加到 LI 節點。最後把 LI 節點添加到列表中。</p>
</body>
</html>
7,insertBefore
定義和用法
insertBefore() 方法在您指定的已有子節點之前插入新的子節點。
提示：如果您希望創建包含文本的新列表項，請記得創建文本節點形式的文本，以便追加到 LI 元素中，然後向列表插入這個 LI。
您也可以使用 insertBefore 方法插入/移動已有元素。
<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">請點擊按鈕向列表插入一個項目。</p>
<button onclick="myFunction()">試一下</button>
<script>
function myFunction()
{
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)
var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>
<p><b>註釋：</b><br>首先請創建一個 LI 節點，<br>然後創建一個文本節點，<br>然後向這個 LI 節點追加文本節點。<br>最後在列表中的首個子節點之前插入此 LI 節點。</p>
</body>
</html>
DOM技術分享