js的DOM节点

节点属性

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

1. nodeName : 节点的名称

2. nodeValue :节点的值

3. nodeType :节点的类型

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

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

二、nodeValue 属性:节点的值

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

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

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

任务

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

扫描二维码关注公众号,回复: 2756288 查看本文章

页面开始

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
  <ul>
     <li id="d1" name="lj">javascript</li>
     <li id="d2">HTML/CSS</li>
     <li id="d3">jQuery</li>     
  </ul>
  <script type="text/javascript">
     var li = document.getElementsByTagName("li");
    for(var i = 0; i < li.length; i++){
        document.write("元素节点的 名称是:" + li[i].nodeName + "<br/>");
        document.write("元素节点的 值是:" + li[i].nodeValue + "<br/>");
        document.write("元素节点的 类型是:" + li[i].nodeType + "<br/><br/>");
      
        document.write("属性节点的 名称: " + li[i].getAttributeNode("id").nodeName + "<br/>");
        document.write("属性节点的 值:" + li[i].getAttributeNode("id").nodeValue + "<br/>");
        document.write("属性节点的 类型:"+ ids.nodeType + "</br><br/>");
        
        document.write("文本节点的 名称:" + li[i].firstChild.nodeName + "<br/>");
        document.write("文本节点的 值:" + li[i].firstChild.nodeValue + "<br/>");
        document.write("文本节点的 类型:" + li[i].firstChild.nodeType + "<br/><br/>")
    }
  
  
  </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/yijiupingfan0914/article/details/81534252