开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >DOM 文档对象模型

DOM 文档对象模型

原创

作者头像

菜园前端

发布于 2023-05-10 11:21:14

发布于 2023-05-10 11:21:14

58400

代码可运行

举报

文章被收录于专栏：前端学习文档前端学习文档

运行总次数：0

代码可运行

HTML 模板

<html>
    <head>
        <title>我是网站标题</title>
    </head>
    <body>
        <div class="box">
            <div class="box1"></div>
        </div>

        <div name="xiaoming"></div>

        <div id="box"></div>
    </body>
</html>

访问节点

通过 id 访问指定节点 getElementById

var node = document.getElementById('box')

通过 name 访问指定节点 getElementsByName

var node = document.getElementsByName('xiaoming')

通过标签名称访问指定节点 getElementsByTagName

var node = document.getElementsByTagName('div')

通过 class 访问指定节点 getElementsByClassName

var node = document.getElementsByClassName('box')

全能访问指定节点 querySelector

// 通过id访问
var node = document.querySelector('#box')

// 通过class访问
var node = document.querySelector('.box')

// 通过tag访问
var node = document.querySelector('div')

全能访问所有节点 querySelectorAll

// 通过id访问
var node = document.querySelectorAll('#box')

// 通过class访问
var node = document.querySelectorAll('.box')

// 通过tag访问
var node = document.querySelectorAll('div')

访问子节点 childNodes

node.childNodes

访问父节点 parentNode

node.parentNode

访问下一个兄弟节点 nextElementSibling

node.nextElementSibling

访问上一个兄弟节点 previousElementSibling

node.previousElementSibling

插入节点

插入子节点（排在最后） append

var node = document.querySelector('.box')

var newNode = document.createElement('div')

node.append(newNode)

插入子节点（排在最后） appendChild

var node = document.querySelector('.box')

var newNode = document.createElement('div')

node.appendChild(newNode)

在指定子节点前面插入节点 insertBefore

var node = document.querySelector('.box')

var childNode = document.querySelector('.box1')

var newNode = document.createElement('div')

node.insertBefore(newNode, childNode)

创建节点

创建元素节点 createElement

var newNode = document.createElement('div')

创建文本节点 createTextNode

var newTextNode = document.createTextNode('我是内容')

删除节点

删除当前节点 remove

var node = document.querySelector('.box')

node.remove()

删除子节点 removeChild

var node = document.querySelector('.box')

var childNode = document.querySelector('.box1')

node.removeChild(childNode)

修改节点

替换子节点 replaceChild

var node = document.querySelector('.box')

var childNode = document.querySelector('.box1')

var newNode = document.createElement('div')

node.replaceChild(newNode, childNode)

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端工程师

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端工程师

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

13个需要知道的方法：使用 JavaScript 来操作 DOM

html 网站 sql https 编程算法

DOM 或文档对象模型是 web 页面上所有对象的根。它表示文档的结构，并将页面连接到编程语言。它的结构是一个逻辑树。每个分支结束于一个节点，每个节点包含子节点、对象。DOM API非常庞大，在本文中，咱们只讨论比较常用有有用的那些API。

前端小智@大迁世界

2022/06/15

8140

node.js html 网站

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

星辰_大海

2020/09/30

1.3K0

DOM－－文档对象模型

node.js html 网站 android

DOM中文名文档对象模型，英文名Document Object Model，我们简称为DOM，是针对html和xml文档的一种API，将html以一种树状结构呈现出来，可以更直观去研究文档结构，我们将这种树状文档结构称为－－DOM树，或者节点树，一样的概念

子舒

2022/06/09

1.4K0

JS基础第二课（元素篇）

前端 javascript 学习笔记

1、用于HTML和XML文档的编辑接口，给文档提供一种结构化的表示方法，可以修改文档的内容和结构

申小兮

2023/04/13

8280

JavaScript DOM（二）

node.js 编程算法腾讯云测试服务

通过上文可知获取元素可以来利用 DOM 提供的方法来获取元素，如 getElementById、querySelector 等方法，但是也可以利用节点关系来获取元素

赤蓝紫

2023/01/01

7240

JavaScript DOM（二）

【JavaScript】之文档对象模型（DOM）详解

模型 javascript dom element 对象

JavaScript 的强大之处在于它能够与 HTML 和 CSS 交互，动态地修改网页内容和样式。而实现这一功能的核心就是 DOM（文档对象模型）。

艾伦耶格尔

2025/08/28

1150

【JavaScript】之文档对象模型（DOM）详解

前端基础-文档对象模型 (DOM)

html javascript css 编程算法

DOM是JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作(增删改查)。

cwl_java

2020/03/26

1.3K0

js 深度解析DOM

html document dom object window

因为document是window的一个属性,因为属性都是对象拥有的,所以他是一个object;

贵哥的编程之路

2020/11/03

5.5K0

【海贼王航海日志：前端技术探索】一篇文章带你走进JavaScript(三)

html 函数前端事件 javascript

API是一个更广义的概念。而WebAPI是一个更具体的概念，特指DOM + BOM。

枫叶丹

2024/08/21

2310

【海贼王航海日志：前端技术探索】一篇文章带你走进JavaScript(三)

前端温习(二)： Javascriput 核心对象 Document 对象

html html5 编程算法 css

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

陈大剩博客

2023/02/17

9650

html javascript

在学习了JavaScript之后，我们会想，如何使用JavaScript来操纵HTML呢。

摸鱼的G

2023/02/22

4990

JavaScript——DOM基础

javascript html dom element null

文档对象模型（Document Object Model），简称DOM，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准接口。

岳泽以

2022/10/26

7K0

JavaScript——DOM基础

DOM操作笔记

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。

bamboo

2019/01/29

1.2K0

webAPIs04-页面尺寸和位置、时间

unix ecmascript

ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。

yuanshuai

2022/08/17

6750

获取元素通常使用两种方式： 1. 利用 DOM 提供的方法获取元素  document.getElementById()

梨涡浅笑

2022/05/08

1.6K0

前端成神之路-WebAPIs02

node.js html html5

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

海仔

2020/12/22

8280

前端成神之路-WebAPIs02

JS快速入门（二）

javascript windows php 编程算法 html

和 innerHTML 类似，写入内容如果包含 html 标签字符串，会被解析成对应的 html 标签，document.write()根据运行时机，会写入文档不同的位置

HammerZe

2022/03/24

7.1K0

javascript之DOM操作

http://www.cnblogs.com/kissdodog/archive/2012/12/25/2833213.html

bear_fish

2018/09/19

6290

javascript入门笔记9-认识DOM

认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。将HTML代码

方志朋

2017/12/29

1.4K0

javascript入门笔记9-认识DOM

JavaScript进阶内容——DOM详解

javascript html click dom 事件

JavaScript使我们有能力创建动态页面，而事件就是被JavaScript所侦测到的行为。

秋落雨微凉

2022/10/25

1.7K0

JavaScript进阶内容——DOM详解

相关推荐

13个需要知道的方法：使用 JavaScript 来操作 DOM

更多 >

LV.0

这个人很懒，什么都没有留下～

作者相关精选

BOM 浏览器对象模型

目录

HTML 模板

访问节点

插入节点

创建节点

删除节点

修改节点

加入讨论

的问答专区 >

后端开发工程师擅长5个领域

相关课程

一站式学习中心 >

AI代码助手快速上手训练营

腾讯云代码助手

Python教程-Django框架快速入门到实战

一站式MCP教程库，解锁AI应用新玩法

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手