今天来说一下关于节点一些的常用方法。
- <!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
在学习节点的常用属性之前,我要了解一下节点的公有属性: 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
为什么打印出的是 ?因为其中崔仔换行符,他会把换行符也给打印出来的,所以出现上述结果,放在同一行即可。
(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
打印出来的是一个数组,记得是谁当前标签的属性。
终于写完了,好累,不想说话了!!!!
来源: