JavaScript DOM基础操作：元素获取与属性节点详解

JavaScript DOM基础操作：元素获取与属性节点详解

本文介绍JavaScript中DOM（文档对象模型）的一些常用操作方法。

主要涵盖通过ID、标签名和类名获取元素节点的方法，具体包括getElementById、getElementsByTagName以及getElementsByClassName。

为了便于测试，首先构建一个简单的网页结构。

/*
　　test.html
*/
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>test</title>
</head>
<body>
 <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">这段的id是contentId。</p>
 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">这段的class name是contentClass。</p>
</body>
</html>

getElementById方法

1. getElementById方法

首先定义一个变量，通过document.getElementById("contentId")获取指定ID的元素。

输出该变量contentId，将返回id为contentId的元素对象，其HTML结构为<p id="contentId" style="width:500px; height: 30px;background-color: #ccc">。具体效果见下图：

getElementsByTagName方法

2. getElementsByTagName方法

同样先定义变量，使用document.getElementsByTagName("p")获取所有p标签元素。

输出contentTag变量，结果返回一个HTMLCollection集合，包含两个元素：[ <p#contentId>, <p.contentClass> ]。其中以#开头代表ID，以.开头代表Class name。

继续访问contentTag[0]，输出结果为 <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">。

访问contentTag[1]，输出结果为 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">。

由此可见，getElementsByTagName返回的是一个类数组对象（HTMLCollection）。

getElementsByClassName方法

3. getElementsByClassName方法

定义变量var contentClass = document.getElementsByClassName("contentClass")。

输出contentClass，结果返回一个包含<p.contentClass>元素的HTMLCollection数组，即使只有一个匹配元素，返回的依然是集合形式。

访问contentClass[0]，输出结果为 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">。

此外，常用的DOM方法还包括getAttribute、setAttribute、ChildNodes、nodeType、nodeValue、firstChild和lastChild，用于获取元素的各类信息。

属性获取与设置

4. 分别使用getAttribute和setAttribute进行属性的获取与设置：

修改style属性后的效果如下：

子节点与节点类型解析

5. 关于childNodes的使用：

这意味着，当<p></p>标签遇到块元素时，块元素之间会存在一个换行符<br>，浏览器在查找子节点时会将其视为一个文本节点。从图中可以看出，childNodes返回的也是一个数组。

那么如果是<p#contentId>的情况呢？

nodeType的值有12种，常用的有三种：1表示元素节点，2表示属性节点，3表示文本节点。

nodeValue不仅可以获取文本节点的值，还可以用于修改文本节点的值。

JavaScript的DOM方法还有很多，建议参考W3school JS参考手册，这对初学者会有很大帮助。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！