JavaScript——节点常用属性
2016-12-03 本文已影响0人
紫荆峰
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>
效果：
捕获.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.总结
终于写完了，好累，不想说话了！！！！
