js-Node对象属性

最新推荐文章于 2023-09-06 16:53:50 发布

poclist

最新推荐文章于 2023-09-06 16:53:50 发布

阅读量1.6k

点赞数

分类专栏： php

php 专栏收录该内容

150 篇文章 1 订阅

订阅专栏

nodeName
nodeType
nodeValue

使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象。

标签节点对应的值：

nodeType ： 1
nodeName：大写标签的名称比如span
nodeValue：属性的值

属性节点对应的值：

nodeType ： 2
nodeName：属性名称
nodeValue：属性的值

文本节点对应的值：

nodeType ： 3
nodeName：#text
nodeValue：属性的值

<body>
 <span id="spanid">eeeeee</span>
 <script type="text/javascript">
 var span1=document.getElementById("spanid");
 //获取标签对象
 alert(span1.nodeType);
 alert(span1.nodeName);
 alert(span1.nodeValue);
 //获取属性
 var id1=span1.getAttributeNode("id");
 alert(id1.nodeType);
 alert(id1.nodeName);
 alert(id1.nodeValue);
  //获取文本
 var tex1=span1.firstChild;
     alert(tex1.nodeType);
     alert(tex1.nodeName);
     alert(tex1.nodeValue);
 </script>
 </body>

父节点： ul是li的父节点

parentNode

<ul>
    <li>aaaaa</li>
    <li>bbbbb</li>
 </ul>
 
 1
2
3
4
 
 
  
  
 
 
 
 1
2
3
4

子节点：li是ul的子节点

childNodes：得到所有的子节点，但是兼容性很差
firstChild：获取第一个子节点
lastChild：获取最后一个子节点
同辈节点：li之间关系是同辈节点

nextSibling:返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。

<body>
 <ul id="ul1">
    <li id="li1">aaaaa</li>
    <li id="li2">bbbbb</li>
    <li id="li3">bbbbb</li>
 </ul>
 <script type="text/javascript">
 //获取父节点
 var li1=document.getElementById("li1");
 alert(li1.parentNode.id);
 //获取子节点
 var li1=document.getElementById("ul1");
 alert(ul1.firstChild.id);
 alert(ul1.lastChild.id);
//获取同辈节点
 var li1=document.getElementById("li1");
 alert(li1.nextSibling.id);
 alert(li1.previousSibling.id);
 </script>
 </body>