HTML DOM（文档对象模型）是一个编程接口，它允许程序和脚本动态地访问和更新网页的内容、结构和样式，通过 HTML DOM，我们可以使用 JavaScript 来操作 HTML 元素，实现网页的交互效果，本文将详细介绍如何使用 JavaScript 对 HTML DOM 进行访问。
基本概念
1、节点：HTML 文档中的所有内容都是节点，包括文本、元素、属性等。
2、元素节点：HTML 文档中的元素，如 <p>、<div> 等。
3、属性节点：HTML 元素的属性，如 class、id 等。
4、文本节点：HTML 文档中的文本内容。
5、父节点和子节点：一个节点可以有一个或多个子节点，子节点的父节点就是它的父节点。
6、兄弟节点：拥有相同父节点的节点称为兄弟节点。
访问 HTML DOM
1、获取元素节点：可以使用 document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName() 等方法获取元素节点。
// 获取 id 为 "myDiv" 的元素节点
var myDiv = document.getElementById("myDiv");
// 获取 class 为 "myClass" 的所有元素节点
var myClassElements = document.getElementsByClassName("myClass");
// 获取所有的 <p> 元素节点
var allPElements = document.getElementsByTagName("p");
2、获取属性节点：可以使用 element.getAttribute() 方法获取元素的属性值。
// 获取 id 为 "myDiv" 的元素的 class 属性值
var myDivClass = myDiv.getAttribute("class");
3、获取文本节点：可以使用 element.innerText 或 element.textContent 属性获取元素的文本内容。
// 获取 id 为 "myDiv" 的元素的文本内容 var myDivText = myDiv.innerText;
4、修改元素节点：可以使用 element.innerHTML、element.setAttribute()、element.textContent 等方法修改元素的内容。
// 修改 id 为 "myDiv" 的元素的内容
myDiv.innerHTML = "这是新的文本内容";
// 修改 id 为 "myDiv" 的元素的 class 属性值
myDiv.setAttribute("class", "newClass");
遍历 HTML DOM
1、遍历元素节点：可以使用 parentNode、firstChild、lastChild、nextSibling、previousSibling 等属性遍历元素节点。
// 遍历 id 为 "myDiv" 的元素的所有子节点
for (var i = 0; i < myDiv.childNodes.length; i++) {
console.log(myDiv.childNodes[i]);
}
2、遍历属性节点：可以使用 attributes 属性遍历属性节点。
// 遍历 id 为 "myDiv" 的元素的所有属性节点
for (var i = 0; i < myDiv.attributes.length; i++) {
console.log(myDiv.attributes[i]);
}
相关问题与解答
问题1：如何在 JavaScript 中创建一个新的 HTML 元素？
答：可以使用 document.createElement() 方法创建一个新的 HTML 元素，然后使用 appendChild()、insertBefore() 等方法将其添加到文档中。
// 创建一个新的 <p> 元素
var newP = document.createElement("p");
newP.innerText = "这是一个新的段落";
// 将新创建的 <p> 元素添加到 id 为 "myDiv" 的元素中
var myDiv = document.getElementById("myDiv");
myDiv.appendChild(newP);
问题2：如何在 JavaScript 中删除一个 HTML 元素？
答：可以使用 removeChild()、replaceChild()、remove()、replaceWith() 等方法删除一个 HTML 元素。
// 删除 id 为 "myDiv" 的元素及其所有子节点
var myDiv = document.getElementById("myDiv");
while (myDiv.firstChild) {
myDiv.removeChild(myDiv.firstChild);
}
myDiv.remove(); // 如果只想删除元素本身，可以使用 remove() 方法，而不是 removeChild() + remove()。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/171704.html
微信扫一扫 