HTML DOM

2018-06-24 01:51:45来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

上图是HTML DOM树

由图可知节点有三种:元素节点,属性节点,文本节点。这三种节点可以用element.nodeType来表示,如果是元素节点则返回值为1,属性节点返回2,文本节点返回3。

1 <script>
2 function Fun(){
3 var Op=document.getElementById('p1');
4 alert(Op.nodeType);
5 }    
6 </script>
7 
8 <p id="Op">12345</p>
9 <input type="button" onclick="Fun()">

 

浏览器弹出窗口返回值为1,因为p为元素节点。

element.nodeValue可以设置或者返回元素值。

设置元素值

element.nodeValue=value

返回元素值

node.nodeValue

不过只有文本节点和属性节点才能使用该方法返回元素值,接上段代码,如果alert(Op.nodeValue);返回值为null,因为p是元素节点,没有nodeValue。

关于子节点个数:

 1 <script>
 2 function myfun(){
 3   var ul1=document.getElementById('ul');
 4   var ch1=ul1.childNodes;
 5   alert(ch1.length);
 6 }
 7 </script>
 8 
 9 <ul id="ul">
10   <li>qwe</li>
11   <li>qwe</li>
12   <li>qwe</li>
13   <li>qwe</li>  
14 </ul>

 

其中ch1为数组,ch1.length就是子节点个数,浏览器的返回值是9,理论上来讲应该是4个li元素子节点才对,其实是因为我们打代码的时候为了看起来美观,而格式像上面的代码一样,这样的话标签之间就会有空格,这样浏览器会认为其为文本节点,我标记节点的地方就是文本节点,如果把所有代码写在一行,没有空格,就是4个子节点。

<ul id="ul">节点

  <li>qwe</li>节点

  <li>qwe</li>节点

  <li>qwe</li>节点

  <li>qwe</li>节点

<ul/>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue组件详解(二)——使用props传递数据

下一篇:ES6要点总结(1)-let和const解构赋值