DOM概念

最新推荐文章于 2025-03-06 10:07:25 发布
原创 最新推荐文章于 2025-03-06 10:07:25 发布 · 143 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

三种节点：
<p title = "notes"> Don't forget buy the stuff </p>
元素节点（element node）： p
文本节点（text node）： Don't forget buy the stuff
属性节点（attribute node）：title = “notes”

getElementById() 返回一个对象 （ 元素节点）
getElementByTagName() 参数是“li”、“p”，“ul”等标签，返回的数组 （ 元素节点）

getAttribute() 属性对象。
setAttribute()
设置属性后，源文件不会改变。


判断是否为空：if(text != null) , 简写成：if(text)
[Javascript]：DOM概念、DOM操作元素、属性、文本节点详解
我只是个程序员。
09-19 3051
DOM全称是文档对象模型，是专门用于操作HTML/XML文档的API（应用程序接口）。DOM将文档看作一颗树，其中的每个成分都是对象，这些对象都看作是节点。可以将文档的一切都理解成节点对象。 DOM的组成部分介绍：文档、对象和模型 Document(文档)：当用浏览器打开一个页面文档时，这个文档就会被转成document对象，然后就可以调用了。后面会提到该对象的用法。 Object(对象)：DOM中的每个节点都是对象，通过对象的属性和方法就能够操作节点。 Model(模型)：DOM将整个文档
什么是Shadow DOM？它有什么作用？
破损的天堂鸟博客
03-06 1593
Shadow DOM（影子DOM）是Web Components技术栈的核心组成部分，用于实现Web组件的封装与隔离。它允许开发者在主文档的DOM树之外创建一个独立的、封闭的DOM子树（称为），并通过（影子根节点）附加到宿主元素（）上[1][5][39]。这种机制使得组件的内部结构、样式和行为与外部文档完全隔离，形成一个独立的作用域。
DOM入门-基本概念
weixin_30675967的博客
05-04 174
DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3CDOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件 D：文档 – html 文档 或 xml 文档 O：对象 – document 对象的属性和方法 M：模型 DOM 是针对xml(html)的基于树的API。 DOM树:节点（node）的层次。 ...
DOM的概念
qq_42408149的博客
09-16 1932
文本格式的HTML文档转化为DOM后，成为一棵由各节点组成的树 Core-DOM之获取节点对象 getElement系列的获取节点所谓节点就是上面流程图的document下面的 Core-DOM之根据层次方式访问节点 层次方式就是通过本节点用来访问其他节点 或者下面的是匹配IE浏览器的element属性 注意：nextSibling与nextElementSibling...
JavaScript基础 DOM的操作
12-04 166
1、DOM的基本概念 DOM是文档对象模型，这种模型为树模型；文档是指标签文档；对象是指文档中每个元素；模型是指抽象化的东西。 2、Windows对象操作 一、属性和方法： window对象——浏览器窗口window.location：地址栏window.history：访问历史window.status：状态栏window.document：重点！ 属性（值或者子对象）： ...
dom:实践 DOM 概念
05-29
本篇文章将围绕“DOM实践”这一主题，深入探讨DOM的核心概念、API使用以及在实际项目中的应用。 **一、DOM基本概念** 1. **节点（Nodes）**：DOM将网页元素视为节点，包括元素节点（如`<div>`）、文本节点（文本...
前端教程：56 dom 概念
08-30
千锋Web前端教程_56_dom_概念
XmlDom.rar_DOM_dom xml
09-20
"www.pudn.com.txt"文件可能是对这些代码的解释或者更深入的DOM概念介绍，比如XPath（一种在XML文档中查找信息的语言），或者DOM事件（如节点添加、删除时触发的事件）。 DOM提供了一种强大而灵活的方式来处理XML...
DOM基本概念
学无止境
10-30 1154
DOM的基本概念
DOM的基本概念
chenzhuozhu的博客
06-25 541
文档对象模型（Document Object Model，简称DOM）获取节点getElementById                                    由id来进行获取语法：node.getElementById("id"); getElementsByClassName                    由class获取 语法：node. getElementsBy...
DOM 概念和常用方法、属性
Naive_boy00的博客
10-15 789
节点元素节点、属性节点、文本节点一份文档就是一棵节点树CSS class属性 id属性 获取元素 getElementById //返回一个对象，该对象对应文档里一个特定元素节点 getElementByTagName //返回对象数组，它们分别对应文档里一组特定的元素节点 getElementByClassName //返回对象数组，它们分别对应文档里一组特定的元素节
DOM 基本概念的理解
qq_39862865的博客
03-02 563
文档对象模型（DOM）基本概念的理解 文档对象模型（DOM，Document Object Model）是针对XML但经过扩展用于HTML的应用程序编程接口（API，Application Programming Interface） DOM是展示和操作HTML和XML文档内容的基础API，其中Document -- XML文档 或 HTML文档；Object-- Object对象的属性和方法；Model-- Model模型，DOM 是针对XML或HTML的基于树结构的API 根据W3C DOM规..
DOM -- 概念、类型、操作
triggerV的博客
03-06 1952
DOM（Document Object Model）是文档内容（HTML或XML）在编程语言上的抽象模型，它建模了文档的内容和结构，并提供给编程语言一套完整的操纵文档的API DOM 节点是 DOM 模型的组成单元。HTML 的基本单元是标签，节点常常与标签对应，但连续的文本内容也是一个文本标签 DOM 树是 DOM 结构的表示形式，DOM 把文档的每个节点根据父子关系连接，形成 DOM 树
DOM --- 一文弄懂
我爱JAVA
12-19 3835
DOM 树是浏览器用来表示页面内容的树形结构，它是浏览器渲染页面的基础。通过 JavaScript 修改 DOM，你可以动态地更新页面内容，比如改变文本、样式，甚至添加或删除元素。动态更新是指在不重新加载整个页面的情况下，通过修改 DOM 来改变页面内容和结构，这使得现代网页可以响应用户交互，提供丰富的动态效果。
DOM知识点梳理
2301_81045156的博客
10-25 3253
DOM（文档对象模型）是JS操作网页的接口是浏览器内部用来表示HTML和XML文档的对象化视图。它允许JavaScript操作页面内容，如元素、属性和样式等。
DOM 概念
LewissNap的博客
11-25 276
1. DOM 中的几点类型 [img]http://dl.iteye.com/upload/picture/pic/50151/942cbab7-47e3-3a78-8d67-735680d64ea6.png[/img] 2. 各种节点类型对应的 12 个常量 [img]http://dl.iteye.com/upload/picture/pic/50153/0f972783-7...
♥️Javascript之DOM♥️
欢迎
09-10 2330
目录 节点 Node类型 属性 方法 Document类型 属性 DOM编程界面 查找元素 添加元素 Element类型 属性 Text类型 属性和方法 文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。 浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM T...
js的DOM概念
最新发布
07-30
JavaScript 中的 DOM（Document Object Model，文档对象模型）是网页编程中的核心概念之一，它将 HTML 或 XML 文档表示为一个树状结构，其中每个节点都是文档中的一个部分（如元素、属性、文本等）。通过 DOM，开发者可以使用 JavaScript 动态地访问、修改、添加或删除页面中的内容、结构和样式。 ### DOM 的基本结构 DOM 将 HTML 文档解析为一个由节点组成的树形结构，称为文档树。每个节点可以是元素节点、属性节点、文本节点等。例如，`<div>` 标签对应一个元素节点，其 `id` 或 `class` 属性则对应属性节点，而标签之间的文本内容则对应文本节点。 DOM 的根节点是 `document` 对象，它是访问整个文档结构的入口点。通过 `document` 可以访问和操作页面上的任何节点。 ### DOM 操作的核心方法 DOM 提供了多种方法来选择和操作元素节点。以下是一些常见的 DOM 操作方法： - **根据 ID 获取元素**：`document.getElementById(id)` 返回一个匹配指定 ID 的元素节点。 - **根据标签名获取元素集合**：`document.getElementsByTagName(tagName)` 返回一个包含所有匹配指定标签名的元素的 HTMLCollection。 - **根据类名获取元素集合**：`document.getElementsByClassName(className)` 返回一个包含所有匹配指定类名的元素的 NodeList。 - **根据 CSS 选择器获取第一个匹配元素**：`document.querySelector(selector)` 返回第一个匹配指定 CSS 选择器的元素。 - **根据 CSS 选择器获取所有匹配元素**：`document.querySelectorAll(selector)` 返回一个包含所有匹配指定 CSS 选择器的元素的 NodeList。 ### DOM 属性操作 DOM 允许读取、修改或删除 HTML 元素的属性。常用的方法包括： - **获取属性值**：`element.getAttribute(attributeName)` 用于获取指定属性的值。 - **设置属性值**：`element.setAttribute(attributeName, value)` 用于设置指定属性的值。 - **移除属性**：`element.removeAttribute(attributeName)` 用于移除指定属性。 例如，可以通过 `element.setAttribute("class", "new-class")` 来动态更改元素的类名，从而应用新的样式。 ### 动态创建和操作 DOM 节点 除了对现有 DOM 节点进行操作外，还可以动态创建新的节点并将其插入到文档中： - **创建元素节点**：`document.createElement(tagName)` 创建一个新的元素节点。 - **创建文本节点**：`document.createTextNode(text)` 创建一个新的文本节点。 - **将子节点添加到父节点中**：`parentNode.appendChild(childNode)` 将指定的子节点添加到父节点的子节点列表的末尾。 - **在指定子节点前插入新节点**：`parentNode.insertBefore(newNode, referenceNode)` 在指定的参考节点前插入新节点。 ### 示例：动态修改页面内容 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM 操作示例</title> </head> <body> <div id="container"></div> <button onclick="addContent()">点击添加内容</button> <script> function addContent() { // 创建一个新的段落元素 var newParagraph = document.createElement("p"); // 创建文本节点 var textNode = document.createTextNode("这是通过 JavaScript 动态添加的内容。"); // 将文本节点添加到段落元素中 newParagraph.appendChild(textNode); // 获取容器元素 var container = document.getElementById("container"); // 将段落元素添加到容器中 container.appendChild(newParagraph); } </script> </body> </html> ``` ### DOM 的作用与意义 DOM 不仅提供了访问和操作文档内容的能力，还为网页的动态交互提供了基础。通过结合事件处理（如 `onclick`、`onmouseover` 等），可以实现丰富的用户交互效果。此外，现代前端框架（如 React、Vue.js 等）虽然抽象了 DOM 操作，但其底层依然依赖于 DOM API。 DOM 的灵活性和强大功能使其成为前端开发不可或缺的一部分。掌握 DOM 操作是构建动态网页和实现复杂交互逻辑的关键[^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值