JavaScript DOM 的详解及实例代码

在前端开发中，JavaScript 是一种常用的编程语言，它可以通过 DOM (文档对象模型) 操作网页的结构、样式和内容，实现动态交互效果。本文将深入探讨 JavaScript DOM 的相关知识点，并提供实例代码进行演示。

什么是 DOM？

DOM 是一种将 HTML 或 XML 文档表示为树形结构的 API，包含了文档的每个部分（如元素、属性、文本等）以及它们之间的关系。通过 DOM，我们可以使用 JavaScript 来操作这棵树，从而改变页面的外观和行为。

DOM 节点

在 DOM 树中，所有内容都是节点，每个节点都有其对应的类型、属性和方法。以下是常见的节点类型：

元素节点：HTML 中的标签如 <body>、<div> 等。
属性节点：HTML 元素的属性如 id、class 等。
文本节点：HTML 元素内的文本内容。
注释节点：HTML 注释内容。
文档节点：整个 HTML 文档。

获取节点

我们可以通过不同的方式获取 DOM 节点，以下是一些常用的方法：

getElementById()

该方法通过元素的 ID 属性获取指定的元素节点。

--- ------- - --------------------------------

getElementsByClassName()

该方法通过元素的类名获取指定的元素节点列表，返回值为一个集合。

--- -------- - -------------------------------------------

getElementsByTagName()

该方法通过元素的标签名获取指定的元素节点列表，返回值为一个集合。

--- -------- - -------------------------------------

querySelector()

该方法通过 CSS 选择器获取指定的第一个元素节点。

--- ------- - ----------------------------- -----------

querySelectorAll()

该方法通过 CSS 选择器获取指定的所有元素节点列表，返回值为一个集合。

--- -------- - -----------------------------------------

节点属性

每个 DOM 节点都有一系列属性，以下是常用的属性：

nodeName / tagName

返回节点的名称，对于元素节点来说，nodeName 返回标签名（大写），tagName 返回标签名（小写）。

--- ------- - ---------------------------------
------------------------------ -- -----
----------------------------- -- -----

nodeType

返回节点类型的数字代码，如 1 表示元素节点，3 表示文本节点，8 表示注释节点等，详细信息请参考官方文档。

--- ------- - ---------------------------------
------------------------------ -- -

nodeValue / textContent

返回节点的内容，对于元素节点来说，nodeValue 返回 null，而 textContent 返回其内部文本内容。

--- ------- - ---------------------------------
------------------------------- -- ----
--------------------------------- -- ------ ------

parentNode / parentElement

返回节点的父级节点，parentNode 和 parentElement 都可以使用。

--- ------- - ---------------------------------
-------------------------------- -- ------
----------------------------------- -- ------

节点操作

通过 JavaScript，我们可以对 DOM 节点进行以下操作：

创建节点

我们可以通过以下方法创建新的节点：

document.createElement()

该方法可以创建一个指定名称的元素节点，并返回该节点对象。

--- ---------- - ------------------------------

document.createTextNode()

该方法可以创建一个包含指定文本内容的文本节点，并返回该节点对象。

--- ------- - ------------------------------ --------

添加节点

我们可以使用以下方法将节点添加到页面中：

element.appendChild()

该方法可以将一个节点添加为另一个节点的

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/1432

javascript DOM的详解及实例代码