DOM的作用_dom有什么用-CSDN博客

本文链接：https://blog.csdn.net/weixin_44588294/article/details/110356726

本文详细介绍了DOM模型的作用，包括如何使用getElementById、getElementsByTagName等方法访问和操作HTML元素，以及DOM的树形结构和节点关系。重点讲解了选择器的应用，涵盖了核心DOM、HTMLDOM和事件DOM。

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

DOM是英文Document Object Model的首字母缩写（文档对象模型）

使javascript有能力操作HTML文档（获取HTML标记元素，添加HTML标记元素，删除HTML标记元素等）

核心 DOM

提供了操作HTML元素的属性和方法
遍历DOM树、添加新节点、删除节点、修改节点

HTML DOM

提供了操作CSS的属性和方法

事件 DOM
事件对象模型（如：onclick…）

在DOM中，文档的层次结构被表示为树形结构。

根节点：一个HTML文档只有一个根，它就是HTML节点。

子节点：某一个节点的下级节点。

父节点：某一个节点的上级节点。

兄弟节点：两个子节点同属于一个父节点。

getElementById(id)

描  述：获取网页指定id名字的元素，返回一个对象

语  法：var obj = document.getElementById("id名称")

参  数：id名称（注：需要加引号）

返回值：对象，对象的属性就是HTML标签的属性

getElementsByTagName()

功  能：获取网站指定标签名称的元素
语  法：var obj = document.getElementsByTagName("标签名称")
参  数：标签名称（注：需要加引号）
返回值：返回一个集合（数组），集合中每个元素都是一个单独标签对象

getElementsByName()

功  能：通过标签的name值获取元素
语  法：var obj = document.getElementsByName("标签name名称")
参  数：标签的name名称（注：需要加引号）
返回值：返回值是数组，通常用来获取有name的input的值

getElementsByClassName()  //通过class名获取元素，返回值是数组

功  能：通过class名获取元素
语  法：var obj = document.getElementsByClassName()  ("标签的class属性名称")
参  数：标签的class属性名称（注：需要加引号）
返回值：返回值是数组

1.不是所有标签都有name值；
2.在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性