DOM对象

打码中...

已于 2022-09-24 09:32:47 修改

阅读量350

点赞数

分类专栏： html5 文章标签： javascript 前端开发语言

于 2022-09-23 18:58:02 首次发布

本文链接：https://blog.csdn.net/m0_52669454/article/details/127016204

版权

html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。

在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。

说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。这下大家就懂了吧。记住，DOM就是文档对象模型，文档对象模型就是DOM。

DOM 是这样规定的：

整个文档是一个文档节点
每个 HTML标签是一个元素节点
包含在 HTML元素中的文本是文本节点
每一个 HTML中的属性是一个属性节点
注释属于注释节点

节点树：DOM文档会被浏览器解析为一个节点树，节点之间有等级关系。父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。

在节点树中，顶端的节点成为根节点
根节点之内的每个节点都有一个父节点
节点可以有任何数量的子节点
叶子是没有子节点的节点
同级节点是拥有相同父节点的节点

DOM结构：DOM采用树形结构作为分层结构，以树节点形式表示页面中各种元素或内容。在DOM中，每一个元素看成一个节点，而每一个节点就是一个“对象”。也就是我们在操作元素时，把每一个元素节点看成一个对象，然后使用这个对象的属性和方法进行相关操作。

举例：

<html>
<head>
    <title><title>
<body>
   <h1>php中文网</h1>
    <p>php中文网成立.....</p>
</body>
</html>

重要了）。

下面我们介绍几个关于节点的概念。
1、根节点
在HTML文档中，html就是根节点。
2、父节点
一个节点之上的节点就是该节点的父节点，例如h1的父节点就是body，body的父节点就是html。
3、子节点
一个节点之下的节点就是该节点的子节点，例如h1就是body的子节点。

HTML DOM 常用属性和方法：
Node节点对象
Element元素节点对象
Attr属性节点对象
元素节点 textContent属性可以设置或获取纯文本内容，HTML标签不会被浏览器解析
createElement(‘元素名称’) 创建元素节点这个方法继承自XML DOM
appendChild(新的元素节点) 在某个元素节点内最后添加新的节点对象
innerHTML属性：设置或获取元素节点的文本内容，HTML标签会被浏览器解析
getElementById()：根据元素的Id获取元素对象
getElementsByClassName() : 根据元素的class属性的值（类名）获取一组元素节点对象
getElementsByTagName() : 根据标签名称获取一组元素节点对象
getElementsByName() : 根据标签的name属性的值获取一组元素节点对象
firstChild: 获取某个元素的第一个子节点
replaceChild(新的节点, 旧的节点) : 用新的节点替换老节点

ES6提供了新的API：
querySelector(’选择器‘) ：根据指定的选择器获取第一个元素节点对象
querySelectorAll(‘选择器’) ：根据指定的选择器获取匹配的所有节点对象