JavaScript——節點常用屬性
0.前言
今天來說一下關于節點一些的常用方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節點常用屬性</title>
<style type="text/css">
#box1{
width: 400px; height: 200px;background-color: red;
}
#box2{
width: 200px;height: 200px;background-color: green;
}
#box3{
width: 200px;height: 200px;background-color: yellow;
}
</style>
</head>
<body>
<div id="box1"><p>我是第一個P</p>
<p>我是第二個P</p>
<p>我是第三個P</p>
<p>我是第四個P</p>
<div>
<p>我是第1個P</p>
<p>我是第2個P</p>
<p>我是第3個P</p>
<p>我是第4個P</p>
</div>
</div>
<div id="box2"></div>
<div id="box3"></div>
<input id="put" type="text" name="in" placeholder="sunck is a good man">
<script type="text/javascript">
</script>
</body>
</html></code></pre>
效果：
捕獲.PNG
1.正文
在學習節點的常用屬性之前，我要了解一下節點的公有屬性： nodeName 、 nodeType 、 nodeValue
添加如下代碼：
//節點共有的屬性：nodeName、nodeType、nodeValue
var jsDivBox1 = document.getElementById("box1");
console.log(jsDivBox1);
console.log(jsDivBox1.nodeName);
console.log(jsDivBox1.nodeType);
console.log(jsDivBox1.nodeValue);
運行結果：
捕獲.PNG
可以發現，nodeName打印出來的是DIV標簽，nodeType打印出來的是number類型的數值“1”，nodeValue打印出來的事null空值。原因看下表：
節點屬性nodeName、nodeType、nodeValue.png
看見不同的節點打印出來的公有屬性不同，利用這一點可以分辨出不同的節點
節點層次關系屬性
（1）獲取當前元素節點的所有的子節點——childNodes
var allChildsNodeArr = jsDivBox1.childNodes;
console.log(allChildsNodeArr);
for (var i = 0; i < allChildsNodeArr.length; i++) {
if (allChildsNodeArr[i].nodeType == 1) {
console.log(allChildsNodeArr[i]);
}
}
運行結果：
捕獲.PNG
可見利用nodeType只打印出div標簽的元素節點。
（2）獲取當前元素節點的第一個子節點——firstChild
var firstNode = jsDivBox1.firstChild;
console.log(firstNode);
運行結果：
捕獲.PNG
（3）獲取當前節點的最后一個子節點——lastChild
var lastNode = jsDivBox1.lastChild;
console.log(lastNode);
結果：
捕獲.PNG
為什么打印出的是 #text ？因為其中崔仔換行符，他會把換行符也給打印出來的，所以出現上述結果，放在同一行即可。
（4）獲取該節點的文檔的根節點，相當于document——ownerDocument
var rootNode = jsDivBox1.ownerDocument;
console.log(rootNode);
結果：
捕獲.PNG
可見吧整個文檔給打印出來了。
（5）獲取當前節點的父節點——parentNode
var fatherNode = jsDivBox1.parentNode;
console.log(fatherNode);
結果：
捕獲.PNG
（6）獲取當前節點的前一個同級節點——previousSibling
var p1 = p2.previousSibling;
console.log(p1);
捕獲.PNG
（7）獲取當前節點的后一個同級節點——nextSibling
var p3 = p2.nextSibling;
console.log(p3);
結果：
捕獲.PNG
（8）獲取當前節點的所有的屬性節點——attributes
var jsInput = document.getElementById("put");
var allAttributesArr = jsInput.attributes;
console.log(allAttributesArr);
結果：
捕獲.PNG
打印出來的是一個數組，記得是誰當前標簽的屬性。
2.總結
終于寫完了，好累，不想說話了！！！！
來自：http://www.jianshu.com/p/cb745573b357