HTML | DOM 标记对象

HTML文档是由浏览器解析HTML标记并以网页的形式展现出来的，而DOM代表了这些HTML标记的逻辑结构。开发人员可以通过JavaScript访问DOM，使用DOM的方法和属性来修改和操纵HTML标记对象。本文将详细介绍HTML | DOM 标记对象的相关概念和使用方法。

什么是标记对象

标记对象是HTML中的一个组成部分，可以理解为HTML中的一个元素。每个标记对象都有对应的属性和方法，可以通过JavaScript动态地添加、修改或删除标记对象。

在DOM中，标记对象被表示为节点（node）。根据节点的特征，可以将DOM节点分为三类：

1. 元素节点：表示HTML标记元素，如 <div>、<p>、<img>等。
2. 属性节点：表示HTML标记的属性，如 class、id、href等。
3. 文本节点：表示HTML标记内的文本内容。

如何访问标记对象

在JavaScript中，可以使用 document 对象来访问HTML文档中的标记对象。document 对象是一个特殊的对象，代表了整个HTML文档，通过该对象可以获取到HTML文档中的所有元素、属性和文本节点。

// 获取页面标题
document.title;

// 获取页面第一个段落元素
document.querySelector('p');

在访问标记对象时，需要掌握一些常用的DOM方法：

1. document.getElementById(id)：根据标记元素的 id 属性获取该元素。
2. document.getElementsByClassName(class)：根据标记元素的 class 属性获取该元素。
3. document.getElementsByTagName(tag)：根据标记元素的标记名称获取该元素。
4. document.querySelector(selector)：根据CSS选择器获取第一个匹配的HTML元素。
5. document.querySelectorAll(selector)：根据CSS选择器获取所有匹配的HTML元素。

// 获取 id 为 "myDiv" 的元素
document.getElementById('myDiv');

// 获取 class 为 "myClass" 的元素集合
document.getElementsByClassName('myClass');

// 获取所有的段落元素
document.getElementsByTagName('p');

// 获取第一个类名为 "myClass" 的段落元素
document.querySelector('p.myClass');

// 获取所有的类名为 "myClass" 的段落元素
document.querySelectorAll('p.myClass');

如何操作标记对象

在DOM中，可以通过设置标记对象的属性和调用标记对象的方法来修改和操作页面元素。

修改元素属性

可以通过直接修改标记对象的属性值来修改对应元素的属性值。

// 修改元素的 class 属性值
document.getElementById('myDiv').className = 'newClass';

// 修改元素的 textContent 属性值
document.querySelector('p').textContent = 'Hello, world!';

创建元素

可以使用 document.createElement(tagName) 方法在DOM中创建新的元素。

// 创建一个新的段落元素
var newPar = document.createElement('p');

// 将其添加到文档中
document.body.appendChild(newPar);

删除元素

可以使用 remove() 方法从DOM中删除某个元素。

// 获取需要删除的元素
var oldPar = document.querySelector('.oldClass');

// 从DOM中删除该元素
oldPar.remove();

替换元素

可以使用 replaceChild(newNode, oldNode) 方法替换旧元素为新元素。

// 获取需要替换的元素和新元素
var oldPar = document.querySelector('.oldClass');
var newPar = document.createElement('p');

// 替换旧元素为新元素
document.body.replaceChild(newPar, oldPar);

插入元素

可以使用 insertBefore(newNode, referenceNode) 方法在指定元素前插入新元素。

// 获取需要插入新元素的元素和新元素
var parentDiv = document.getElementById('myDiv');
var newPar = document.createElement('p');

// 在第一个子元素之前插入新元素
parentDiv.insertBefore(newPar, parentDiv.firstChild);

结语

DOM标记对象是HTML中一个非常重要的组成部分，通过JavaScript可以方便地访问和操作标记对象，实现了动态的HTML页面效果。在使用DOM时，需要注意元素的层级关系和使用合适的方法和属性，才能更好地处理HTML页面中的标记对象。