JS-节点属性/访问子节点childNodes/访问子节点的第一和最后项/访问父节点parentNode/访问兄弟节点/插入节点appendChild()/插入节点insertBefore()...

最新推荐文章于 2024-05-13 13:37:50 发布

Jennyni1122

最新推荐文章于 2024-05-13 13:37:50 发布

阅读量991

点赞数

本文链接：https://blog.csdn.net/qq_41121204/article/details/92995950

版权

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。
DOM 节点有三个重要的属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

e.g.在<script>的标签内容，获取所有LI标签，并输出相应节点的名称、节点的值、节点的类型。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
  <ul>
     <li>javascript</li>
     <li>HTML/CSS</li>
     <li>jQuery</li>     
  </ul>
  <script type="text/javascript">
    var node=document.getElementsByTagName("li");
    for(var i=0;i<node.length;i++){
      document.write("li["+(i+1)+"]:"+"<br/>"+"节点名:"+node[i].nodeName+"<br/>");
      document.write("节点值:"+node[i].nodeValue+"<br/>");
      document.write("节点类型:"+node[i].nodeType+"<br/><br/>");
        }
  </script>
</body>
</html>

访问子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

语法：

elementNode.childNodes
注意：

如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

我们来看看下面的代码:

image.png

运行结果:

IE:

UL子节点个数:3
节点类型:1
其它浏览器:

UL子节点个数:7
节点类型:3
注意:

IE全系列、firefox、chrome、opera、safari兼容问题
节点之间的空白符，在firefox、chrome、o

最低0.47元/天解锁文章

Jennyni1122

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS-节点属性/访问子节点childNodes/访问子节点的第一和最后项/访问父节点parentNode/访问兄弟节点/插入节点appendChild()/插入节点insertBefore()...

节点属性在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：nodeName : 节点的名称nodeValue ：节点的值nodeType ：节点的类型一、nodeName 属性: 节点的名称，是只读的。元素节点的 nodeName 与标签名相同属性节点的 nodeName 是属性的名称文本节点的 ...
复制链接

扫一扫