js中常用DOM方法的详细说明

介绍几种常见的js DOM方法

获取元素节点getelementbyid getelementsbyname getelementsbyclasname

先写一个简单的网页做测试：

/*test.html*/！DOCTYPE html html head meta charset=' utf-8 ' title test/title/head body p id=' content id ' style=' width :500 px；height: 30px背景-color: #ccc '这一段的id是contentId。/p p class=' content class ' style=' width :500 px；height: 30px本段的类名是contentClass。/p/body/html1。getElementById

1.首先定义变量varcontent id=document . getelementbyid(' content id ')；

2.然后输出对象contentId返回Id为contentId的元素对象(p id=' content id ' style=' width :500 px；height: 30px背景色： #ccc ').见下图：

2.getElementsByTagName

1.首先定义变量varcontenttag=document . getelementsbytagname(' p ')；

2.接下来，我输出contentTag，它返回两个htmlcollections [p # contentid，p. contentclass]，一个以#开头表示id，另一个以#开头。用于类名。

3.继续从contentTag[0]输出p id=' content id ' style=' width :500 px；height: 30px背景-颜色： #ccc '

从contentTag[1]输出p class=' content class ' style=' width :500 px；height: 30px背景-颜色： #ccc '

因此，getElementsByTagName返回一个数组！

3.getElementsByClassName

1.var content class=document . getelementsbyclassname(' content class ')；

2.contentClass输出HTMLCollection [p.contentClass]返回元素对象的数组，即使只有一个。

3.contentClass[0]输出p class=' content class ' style=' width :500 px；height: 30px背景-颜色： #ccc '

GetAttribute、setAttribute、childnodes、nodetype、nodevalue、firstchild和lastchild方法常用来获取一些信息。

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

更改样式属性后：

5.这是儿童节点：

也就是说，当p/p遇到块元素时，块元素之间会有一个换行符br，浏览器在寻找子节点时会将其视为文本节点。从图中还可以看出，childNodes也返回一个数组。

如果是p#contentId呢？

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

NodeValue不仅可以获取文本节点的值，还可以更改文本节点的值。

js中有很多dom方法。大家可以看看这本W3school JS参考手册，相信对初学者有很大的帮助。

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！