JavaScript——节点常用属性
akom7972
7年前
<h3>0.前言</h3> <p>今天来说一下关于节点一些的常用方法。</p> <pre> <code class="language-javascript"><!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> <p>效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d214c83e1f6f8b791b420599cdc452f9.png"></p> <p>捕获.PNG</p> <h3>1.正文</h3> <p>在学习节点的常用属性之前，我要了解一下节点的公有属性： <strong>nodeName</strong> 、 <strong>nodeType</strong> 、 <strong>nodeValue</strong></p> <p>添加如下代码：</p> <pre> <code class="language-javascript">//节点共有的属性：nodeName、nodeType、nodeValue var jsDivBox1 = document.getElementById("box1"); console.log(jsDivBox1); console.log(jsDivBox1.nodeName); console.log(jsDivBox1.nodeType); console.log(jsDivBox1.nodeValue);</code></pre> <p>运行结果：</p> <p><img src="https://simg.open-open.com/show/2b70bec16d662cd7e3d57893502a2810.png"></p> <p>捕获.PNG</p> <p>可以发现，nodeName打印出来的是DIV标签，nodeType打印出来的是number类型的数值“1”，nodeValue打印出来的事null空值。原因看下表：</p> <p><img src="https://simg.open-open.com/show/b148658c4b5523f8c693285d1117e2eb.png"></p> <p>节点属性nodeName、nodeType、nodeValue.png</p> <p>看见不同的节点打印出来的公有属性不同，利用这一点可以分辨出不同的节点</p> <p>节点层次关系属性</p> <p>（1）获取当前元素节点的所有的子节点——childNodes</p> <pre> <code class="language-javascript">var allChildsNodeArr = jsDivBox1.childNodes; console.log(allChildsNodeArr); for (var i = 0; i < allChildsNodeArr.length; i++) { if (allChildsNodeArr[i].nodeType == 1) { console.log(allChildsNodeArr[i]); } }</code></pre> <p>运行结果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/1e70889e2f29584e96b66629d78be7e1.png"></p> <p>捕获.PNG</p> <p>可见利用nodeType只打印出div标签的元素节点。</p> <p>（2）获取当前元素节点的第一个子节点——firstChild</p> <pre> <code class="language-javascript">var firstNode = jsDivBox1.firstChild; console.log(firstNode);</code></pre> <p>运行结果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/def509133b9446ae66d5f96c4bf9e8e8.png"></p> <p>捕获.PNG</p> <p>（3）获取当前节点的最后一个子节点——lastChild</p> <pre> <code class="language-javascript">var lastNode = jsDivBox1.lastChild; console.log(lastNode);</code></pre> <p>结果：</p> <p><img src="https://simg.open-open.com/show/6c0a23d62724f9096ab88c7e824ec4be.png"></p> <p>捕获.PNG</p> <p>为什么打印出的是 <em>#text</em> ？因为其中崔仔换行符，他会把换行符也给打印出来的，所以出现上述结果，放在同一行即可。</p> <p>（4）获取该节点的文档的根节点，相当于document——ownerDocument</p> <pre> <code class="language-javascript">var rootNode = jsDivBox1.ownerDocument; console.log(rootNode);</code></pre> <p>结果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/61f4dc01bfedb7646665377d0dc5441a.png"></p> <p>捕获.PNG</p> <p>可见吧整个文档给打印出来了。</p> <p>（5）获取当前节点的父节点——parentNode</p> <pre> <code class="language-javascript">var fatherNode = jsDivBox1.parentNode; console.log(fatherNode);</code></pre> <p>结果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e46332de64bc6264b6860a4ccd4c187f.png"></p> <p>捕获.PNG</p> <p>（6）获取当前节点的前一个同级节点——previousSibling</p> <pre> <code class="language-javascript">var p1 = p2.previousSibling; console.log(p1);</code></pre> <p><img src="https://simg.open-open.com/show/e5c1d7017401aa9276a56da2d16a25c4.png"></p> <p>捕获.PNG</p> <p>（7）获取当前节点的后一个同级节点——nextSibling</p> <pre> <code class="language-javascript">var p3 = p2.nextSibling; console.log(p3);</code></pre> <p>结果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2bbbd5e1eac91066d2591cc785eeb525.png"></p> <p>捕获.PNG</p> <p>（8）获取当前节点的所有的属性节点——attributes</p> <pre> <code class="language-javascript">var jsInput = document.getElementById("put"); var allAttributesArr = jsInput.attributes; console.log(allAttributesArr);</code></pre> <p>结果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/aa00c28cf051b0b758cb480be8a397f8.png"></p> <p>捕获.PNG</p> <p>打印出来的是一个数组，记得是谁当前标签的属性。</p> <h3>2.总结</h3> <p>终于写完了，好累，不想说话了！！！！</p> <p> </p> <p>来自：http://www.jianshu.com/p/cb745573b357</p> <p> </p>