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

193 浏览量更新于2024-08-30 收藏 86KB PDF 举报

"JavaScript中对DOM节点的访问、创建、修改、删除" 在JavaScript中，DOM（Document Object Model）是解析HTML或XML文档的一种标准模型，它将这些文档以树形结构表示，允许开发者通过编程方式操作页面上的元素。DOM提供了一系列的方法和属性，使得我们能够轻松地访问、创建、修改或删除网页中的任何元素。首先，了解DOM的基本结构至关重要。在给定的例子中，``标签是`<body>`标签的子节点，而``标签则是``标签的子节点。这种关系可以形象地理解为一棵树，其中每个节点都有可能有父节点和子节点，而根节点通常是`<html>`标签。访问DOM节点： 1. `document`对象：JavaScript中最基础的DOM访问接口，它代表整个HTML文档。通过`document`，我们可以获取到文档的任何部分。例如，`document.getElementById('closer')`可以获取到ID为'closer'的元素。 2. `getElementById`：根据元素的ID来获取元素。 3. `getElementsByTagName`：根据标签名获取所有匹配的元素集合。 4. `getElementsByClassName`：根据类名获取所有匹配的元素集合。 5. `querySelector`和`querySelectorAll`：前者返回匹配CSS选择器的第一个元素，后者返回所有匹配的元素集合。创建DOM节点： 1. `createElement`：创建新的HTML元素。例如，`var newElement = document.createElement('div')`。 2. `createTextNode`：创建纯文本节点。例如，`var newText = document.createTextNode('Hello, World!')`。 3. `appendChild`和`insertBefore`：分别用于在现有元素后面添加新元素和在指定元素前插入新元素。修改DOM节点： 1. 属性操作：通过`.`或`[]`操作符修改元素的属性。如`element.style.color = 'red'`改变元素颜色。 2. `innerHTML`和`textContent`：分别用于设置或获取元素内部的HTML和纯文本内容。 3. `appendChild`和`removeChild`：添加或移除子元素。 4. `setAttribute`和`removeAttribute`：添加、修改或删除元素的属性。删除DOM节点： 1. `removeChild`：移除指定的子元素。例如，`parentElement.removeChild(childElement)`。 2. `detachNode`：在某些情况下，用于断开节点与文档的关系，但不实际删除。此外，Core DOM和HTML DOM是两个不同的概念。Core DOM是DOM Level 1的一部分，适用于所有XML文档，而HTML DOM是Core DOM的扩展，专为HTML文档设计，提供了处理HTML特有属性和方法的能力。在实际开发中，利用DOM操作可以实现动态更新页面、响应用户交互、数据绑定等多种功能。掌握DOM操作是JavaScript开发者必备的基础技能。为了更好地实践和调试，可以使用浏览器内置的开发者工具，如Firefox的Firebug或Chrome的DevTools，它们提供了直观的DOM查看和操作界面。

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

主要介绍了JavaScript中对DOM节点的访问、创建、修改、删除,是JavaScript入门学习中的基础知识,需要的朋

友可以参考下

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节点节点

当要验证表单或者更换图片之前，我们要知道怎么样访问元素(element.)。有很多方法获取元素。

Document节点节点

通过document我们可以访问当前的文档。我们可以通过firebugs（火狐插件），来查看document的属性和方法。

所有的节点都有nodeType,nodeName,nodeValue的属性。我们来看看document的nodeType是什么

document.nodeType;//9

一共有12节点类型。document是9。常用的是元素(element:1),属性(attribute:2),文本(text:3)。

节点还有名称。对于HTML标签。节点名称就是标签名称。文本节点(text)的名字是#text.文档节点(document)的名字是

#document.

节点也有值。对于文本节点，值就是文本。document的值为null

documentElement

XML都会有个ROOT节点来包文档包含起来。对于HTML文档。ROOT节点就是html标签。访问root节点。可以用

documentElement的属性。

document.documentElement;//<html>

document.documentElement.nodeType;//1

document.documentElement.nodeName;//HTML

document.documentElement.tagName;//对于element，nodeName和tagName相同

Child Nodes

为了确定是否包含子节点我们可以用如下方法

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

weixin_38731479

粉丝: 3
资源: 916

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

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

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

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

JavaScript操作HTML DOM节点的基础教程

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

JavaScript DOM节点访问与null类型详解

JavaScript遍历DOM节点与子节点

JavaScript HTML DOM 节点列表

纯JavaScript操作DOM节点

JavaScript DOM节点添加示例

最新资源