当前位置：首页 > Web开发 > 正文

"王昭君" ]; var ele = document.getElementById("btn" );ele.oncli

2024-03-31 Web开发

1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.

1.节点的观点
   * 文档：document
   * 元素：element,页面中所有的标签都是元素，标签--元素--东西
   * 节点：node，页面中所有的内容(标签、属性、文本)
   * 根元素：html这个标签

2.节点的属性(nodeType,nodeName,nodeValue)
   * 节点的属性：可以通过标签(属性或文本).点出来
   * 节点类型nodeType:1--标签，2--属性，3--文本
   * 节点名称nodeName：标签节点--大写的标签名字，属性节点--小写的属性名字，文本节点--#text
   * 节点的值nodeValue:标签节点--null，属性节点--属性值，文本节点--文本内容

3.父节点(父元素)
   * 只有标签可以作为父节点(父元素)
       - 获取所有的父节点   ele.parentNode;
       - 获取所有的父元素   ele.parentElement;

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <div> div里面的文本 <p>p里面的文本</p> </div> <script type="text/javascript"> var pEle = document.getElementById("box").getElementsByTagName("p")[0]; console.log(pEle.parentNode);//[object HTMLDivElement]---说明父节点是标签 console.log(pEle.parentElement);//[object HTMLDivElement]---说明父元素是标签 var parentEle= pEle.parentNode; //获取父标签 console.log(parentEle.nodeType); //1--标签类型 console.log(parentEle.nodeName); //DIV--标签名字 console.log(parentEle.nodeValue); //null--标签的值 </script> </body> </html>

4.获取子节点或子元素
   * 获取所有的子节点 ele.childNodes;
   * 获取所有的子元素(子标签) ele.children;

　　【获取子节点或子元素】

<div> div里面的文本 <p>p里面的文本</p> <a href=""></a> </div> <script type="text/javascript"> var divEle = document.getElementById("box"); console.log(divEle.childNodes);//子节点NodeList(5) [ #text, p, #text, a, #text ] console.log(divEle.children);//子元素HTMLCollection [ p, a ] </script>

　　代码：【获取子节点】

<div> div里面的文本 <p>p里面的文本</p> <a href="">a标签里面的文本</a> </div> <script type="text/javascript"> var divEle = document.getElementById("box"); var _childNodes = divEle.childNodes;//子节点NodeList(5) [ #text, p, #text, a, #text ] for(var i=0;i<_childNodes.length;i++){ console.log(_childNodes[i].nodeType+"---"+_childNodes[i].nodeName+"---"+_childNodes[i].nodeValue); } </script>

　　功效：
       3---#text---div里面的文本
       1---P---null
       3---#text---
       1---A---null
       3---#text---

　　【按照属性名字获取属性节点】

5.获取节点、元素的要领（12行代码）
   * 总结：通常获取节点的代码在谷歌和火狐得到的都是节点，通常获取元素的代码在谷歌和火狐总都是元素；
      除父(子)节点/元素，通常获取节点的代码在IE8中得到的是元素，获取元素的代码不撑持。

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31695.html

"王昭君" ]; var ele = document.getElementById("btn" );ele.oncli

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢