自己建企业网站怎么建,浙江网站建设模板网站,建筑工程网人才网,网站做自适应的好处在前端开发中#xff0c;与HTML文档进行交互是一项基本任务。文档对象模型#xff08;Document Object Model#xff0c;简称DOM#xff09;为开发者提供了一种以编程方式访问和操作HTML文档的方式。DOM的核心是节点#xff08;Node#xff09;对象#xff0c;它代表了文…
在前端开发中与HTML文档进行交互是一项基本任务。文档对象模型Document Object Model简称DOM为开发者提供了一种以编程方式访问和操作HTML文档的方式。DOM的核心是节点Node对象它代表了文档中的各个部分。本博客将深入探讨JavaScript DOM Node对象帮助您更好地理解它的作用和如何使用。
什么是DOM Node对象
在DOM中所有的内容都是以节点的形式存在。节点是DOM的基本构建块文档中的每个元素、属性、文本均以节点的形式表示。DOM Node对象代表了这些节点是一个抽象的概念用于表示文档中的层次结构。
Node对象有不同的类型包括元素节点、属性节点、文本节点等每种类型的节点在DOM中扮演着不同的角色。我们将逐一介绍它们。
1. 元素节点Element Node
元素节点代表HTML文档中的元素例如div、p、a等标签。元素节点可以包含其他节点因此它们构成了DOM树的分支。
2. 文本节点Text Node
文本节点代表元素中的文本内容。例如p这是一个文本节点/p中的“这是一个文本节点”就是一个文本节点。
3. 属性节点Attribute Node
属性节点代表元素的属性。例如a hrefhttps://www.example.com中的href属性就是一个属性节点。
4. 注释节点Comment Node
注释节点代表HTML文档中的注释如!-- 这是一个注释 --。
5. 文档节点Document Node
文档节点代表整个HTML文档通常在DOM树的顶部。文档节点是其他节点的容器它包含了整个文档的结构。
Node对象有一些常用的属性和方法用于访问和操作节点。下面我们将详细介绍这些属性和方法。
访问和操作DOM Node
1. 访问子节点
在DOM中节点可以包含子节点可以使用以下属性来访问和操作子节点
childNodes获取包含元素的所有子节点的NodeList。firstChild获取第一个子节点。lastChild获取最后一个子节点。parentNode获取父节点。
下面是一个示例演示如何使用这些属性
!DOCTYPE html
html
headtitleDOM Node示例/title
/head
bodyul idmyListli苹果/lili香蕉/lili橙子/li/ulscriptconst myList document.getElementById(myList);const firstItem myList.firstChild;const lastItem myList.lastChild;const parent myList.parentNode;console.log(第一个子节点:, firstItem.textContent);console.log(最后一个子节点:, lastItem.textContent);console.log(父节点:, parent.tagName);/script
/body
/html在上面的示例中我们首先获取了ul元素的引用然后使用firstChild和lastChild属性访问了其第一个和最后一个子节点。同时使用parentNode属性获取了父节点body元素的引用。
2. 创建新节点
除了访问现有的节点我们还可以创建新的节点并将其添加到文档中。以下是一些常见的用于创建节点的方法
document.createElement(tagName)创建一个指定标签名的元素节点。document.createTextNode(text)创建一个包含指定文本的文本节点。document.createComment(text)创建一个包含指定注释文本的注释节点。
例如我们可以使用document.createElement来创建一个新的div元素如下所示
const newDiv document.createElement(div);3. 添加和删除节点
一旦我们创建了新的节点我们可以使用以下方法将它们添加到文档中
appendChild(node)将一个节点添加为另一个节点的子节点作为最后一个子节点。insertBefore(newNode, referenceNode)将一个节点添加为另一个节点的子节点并将它插入到参考节点之前。replaceChild(newNode, oldNode)用一个新节点替换另一个节点。removeChild(node)从父节点中删除指定的子节点。
下面是一个示例演示如何创建新节点并将其添加到文档中
!DOCTYPE html
html
headtitleDOM Node示例/title
/head
bodydiv idmyDivp这是一个段落。/p/divscriptconst myDiv document.getElementById(myDiv);// 创建一个新段落元素const newParagraph document.createElement(p);newParagraph.textContent 这是另一个段落。;// 将新段落添加到myDiv中myDiv.appendChild(newParagraph);/script
/body
/html在上述示例中我们首先创建了一个新的p元素设置了其文本内容然后使用appendChild方法将新段落添加为div元素的子节点。
4. 替换节点
替换节点的常用方法是replaceChild它允许我们将一个节点替换为另一个节点。以下是一个示例
const oldParagraph document.getElementById(oldParagraph);
const newParagraph document.createElement(p);
newParagraph.textContent 这是新的段落。;// 将newParagraph替换oldParagraph
oldParagraph.parentNode.replaceChild(newParagraph, oldParagraph);在这个示例中我们首先获取了要替换的节点oldParagraph和新节点newParagraph然后使用replaceChild方法将新段落替换为旧段落。
5. 删除节点
要从文档中删除节点可以使用removeChild方法如下所示
const parent document.getElementById(parentElement);
const child document.getElementById(childElement);// 从父元素中删除子元素
parent.removeChild(child);在上述示例中我们获取了父元素parent和要删除的子元素child然后使用removeChild方法从父元素中删除了子元素。
遍历DOM树
遍历DOM树是获取和操作文档中节点的重要方式。可以使用递归或循环来遍历DOM树。下面是一个使用递归遍历DOM树的示例
function traverseDOM(node) {// 处理当前节点console.log(node.nodeName);// 递归遍历子节点for (let i 0; i node.childNodes.length; i) {traverseDOM(node.childNodes[i]);}
}// 从文档根节点开始遍历
traverseDOM(document);在上述示例中traverseDOM函数接受一个节点作为参数首先处理当前节点然后递归遍历其子节点。我们从文档的根节点document开始遍历整个DOM树。
示例创建一个可折叠的列表
让我们通过一个示例来演示如何使用DOM Node对象来创建一个可折叠的列表。在这个示例中我们将创建一个HTML列表每个列表项都可以展开或折叠显示其子列表。
!DOCTYPE html
html
headtitle可折叠列表示例/title
/head
bodyul idmyListlispan classtoggle▼/span FruitulliApple/liliBanana/liliOrange/li/ul/lilispan classtoggle▼/span VegetableulliCarrot/liliTomato/liliBroccoli/li/ul/li/ulscriptconst listItems document.querySelectorAll(#myList li);listItems.forEach((item) {// 为每个列表项添加点击事件监听器item.addEventListener(click, () {const sublist item.querySelector(ul);if (sublist) {sublist.classList.toggle(hidden); // 切换子列表的显示/隐藏const toggleIcon item.querySelector(.toggle);toggleIcon.textContent sublist.classList.contains(hidden) ? ▼ : ▲; // 切换展开/折叠图标}});});/script
/body
/html在这个示例中我们首先创建了一个HTML列表每个列表项包含一个展开/折叠按钮和一个子列表。使用JavaScript我们遍历所有列表项为每个列表项添加点击事件监听器。当用户单击列表项时我们查找其子列表并切换其hidden类以控制子列表的显示或隐藏。同时我们还切换了展开/折叠按钮的图标。
总结
JavaScript DOM Node对象是DOM操作的核心。通过了解和掌握Node对象的属性和方法您可以更轻松地访问和操作HTML文档的内容。这个博客提供了一个全面的概述从创建新节点到遍历DOM树再到一个实际的示例帮助您更好地理解和应用DOM Node对象。希望这些知识对您在前端开发中有所帮助
这篇博客深入介绍了JavaScript DOM Node对象包括不同类型的节点元素节点、文本节点、属性节点、注释节点和文档节点以及如何访问、创建、添加、删除和替换节点。通过示例展示了如何创建一个可折叠的列表以实际操作演示了Node对象的应用。希望这篇博客对您理解和应用DOM Node对象有所帮助。 作者信息 作者 繁依Fanyi CSDN https://techfanyi.blog.csdn.net 掘金https://juejin.cn/user/4154386571867191
