DOM对象—节点的详解(一)

最新推荐文章于 2024-09-07 07:45:07 发布

原创最新推荐文章于 2024-09-07 07:45:07 发布 · 659 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #dom #html #标签 #对象

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了DOM中节点的分类，包括元素节点、文本节点和属性节点，并详细讲解了节点的属性，如nodeName、nodeValue和nodeType。此外，还提供了三种获取和输出节点属性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、节点的分类

1、元素节点：html中的标签都是元素节点、如<a>、<body>......

2、文本节点：向用户展示的内容，如<li>xxx</li>、<a href="#">xxx</a>里的xxx内容文本

3、属性节点：元素的属性、如<a>标签里的链接属性

举例！

代码：<a href="http://www.baidu.com">百度首页</a>

a标签为元素节点、百度首页为文本节点、http:/www.baiducom为属性节点！

二、节点的属性

1、节点的名称：nodeName

2、节点的值：nodeValue

3、节点的类型：nodeType

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

nodeValue：元素节点的值是undefined或null、文本节点的值是文本内容、属性节点的值是属性本身。

nodeType ：

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

三、获取/输出节点属性的三种方式

html代码：<h5 id="h5" name="h55">PHP</h5>

1、通过id来获取/输出：单个节点可直接输出

//通过id来输出节点的属性
    var h5 = document.getElementById("h5");
    document.write(h5.nodeName);
    document.write(h5.nodeType);
    document.write(h5.nodeValue);

2、通过name来获取/输出：多个节点必须使用循环

//通过name来输出节点属性
    var h55 = document.getElementsByName("h55");
    for (var i = 0; i < h55.length; i++) {
    	document.write(h55[i].nodeName);
  	 	document.write(h55[i].nodeType);
    	document.write(h55[i].nodeValue);
    }

3、通过标签名来获取/输出：多个节点必须使用循环

//通过标签名来输出节点属性
    var h555 = document.getElementsByTagName("h555");
    for (var i = 0; i < h555.length; i++) {
    	document.write(h555[i].nodeName);
    	document.write(h555[i].nodeType);
    	document.write(h555[i].nodeValue);
    }