JavaScript操作DOM：访问、创建、修改与删除节点

58 浏览量更新于2024-08-29 收藏 106KB PDF 举报

本文主要介绍了JavaScript中如何操作DOM（Document Object Model）节点，包括访问、创建、修改和删除。DOM是一种将XML或HTML文档表示为树状结构的标准，允许使用编程语言与文档交互。JavaScript提供了访问和操作DOM的API。在示例HTML文档中，有三个``标签，每个标签都有不同的属性，如类名和ID。DOM将这些元素组织成一个层次结构，其中`<body>`是所有``标签的父节点，而``标签彼此为兄弟节点。``标签是第二个``标签的子节点。 DOM分为Core DOM和HTML DOM。Core DOM是DOM Level 1的一部分，适用于所有XML文档，而HTML DOM是Core DOM的扩展，专为HTML文档设计。两者都定义了构造器，但HTML DOM仅用于HTML文档。访问DOM节点时，可以通过`document`对象来操作当前文档。`document`提供了许多属性和方法，例如查找元素。每个DOM节点都有`nodeType`、`nodeName`和`nodeValue`等属性，用于区分节点类型、获取节点名称和值。为了获取特定元素，可以使用`getElementById`、`getElementsByClassName`、`getElementsByTagName`等方法。此外，还可以使用CSS选择器的`querySelector`和`querySelectorAll`方法来选取元素。创建新的DOM节点通常涉及`createElement`方法，用于创建新元素，然后使用`appendChild`、`insertBefore`或`replaceChild`等方法将其插入到现有树中。修改节点涉及改变节点的属性（如`innerHTML`或`textContent`）或样式（通过`style`对象）。删除节点则可以使用`removeChild`方法。 JavaScript中的DOM操作是网页动态化和交互性实现的基础。掌握DOM节点的访问、创建、修改和删除技巧对于任何JavaScript开发者来说都至关重要，因为这允许他们根据需要动态地改变网页内容和布局。通过熟悉DOM API，开发者可以更有效地实现网页交互效果，如响应用户输入、更新数据显示和处理事件。

JavaScript中对中对DOM节点的访问、创建、修改、删除节点的访问、创建、修改、删除

DOM

DOM就是Document object Model的缩写。文档对象模型是把XML或HTML以树节点为表现形式的文档。用DOM方法和属性，

你可以访问，修改，删除页面上任意一个元素，也是可以添加一个元素。DOM是独立于语言的API，可以被任意语言所实现，

当然也包括了Javascript

看看下面的一个文本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

</head>

<body>

first paragraph

second paragraph

final

</body>

</html>

我们来看看第二段

second paragraph

可以看到这是个p标签。它被包含在body标签中。所以说body是p的父节点，p是子节点。第一段和第三段也是body的子节

点。它们都是第二段的兄弟节点。这个em标签是第二段p的子节点。因此p就是它的父节点。父子节点关系能描绘出像树一样

的关系。所以叫做DOM结构树(DOM tree).

Core DOM 和和 HTML DOM

我们已经知道DOM可以描绘出HTML和XML文档。事实上HTML文档就是XML文档，只不过更为规范些。因此作为DOM Level

1的一部分，Core DOM规范适用于所有XML文档以及HTML DOM规范扩展了Core DOM.当然HTML DOM不能适用于所有的

XML文档，仅仅适用于HTML文档。让我们来看看Core DOM和HTML DOM的构造器。

构造器关系构造器关系

访问访问DOM节点节点

下载后可阅读完整内容，剩余6页未读，立即下载

weixin_38564718

粉丝: 5
资源: 916

JavaScript操作DOM：访问、创建、修改与删除节点

JavaScript获取HTML DOM节点元素的方法的总结

DOM访问/创建/删除/修改文档节点及属性方法

音频节点属于javascript中，dom节点

dom 节点转dom对象

删除DOM节点 DOM节点绑定的事件会被移除吗

如何减少对dom节点的操作

js如何复制dom节点

如何取到antd组件中的某个dom节点

jsPlumb中，把已经绑定好以后的锚点通过deleteEndpoint方法删除以后，同时DOM节点也通过remove()删除以后，再次创建DOM节点和锚点以后，锚点和节点始终绑定不上，如何解决

js插入dom节点 并数据绑定

最新资源

js插入dom节点并数据绑定