JS DOM树 （一）

最新推荐文章于 2024-10-15 14:00:48 发布
最新推荐文章于 2024-10-15 14:00:48 发布
阅读量108 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54249255/article/details/131519332
版权
DOM是DocumentObjectModel的缩写，它是JavaScript操作网页的标准接口。DOM将HTML或XML文档解析为节点层级结构，允许程序对网页进行增删改查。节点包括文档节点、元素节点、属性节点、文本节点等多种类型，通过节点的层级关系和各种接口，如parentNode、childNodes等，可以方便地访问和修改网页内容。
摘要由CSDN通过智能技术生成

何为DOM?————DOM是JS操作网页的接口，全程Document object model ——作用：将网页元素转为一个js对象，从而实现网页元素的增删改查等等。

1.节点层级

任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构。节点分很多类型，每种类型对应着文档中不同的信息和（或）标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系。这些关系构成了层级，让标记可以表示为一个以特定节点为根的树形结构。

其中，document 节点表示每个文档的根节点。在这里，根节点的唯一子节点是<html>元素，我们称之为文档元素（documentElement）。文档元素是文档最外层的元素，所有其他元素都存在于这个元素之内。每个文档只能有一个文档元素。在 HTML 页面中，文档元素始终是<html>元素。在 XML 文档中，则没有这样预定义的元素，任何元素都可能成为文档元素。HTML 中的每段标记都可以表示为这个树形结构中的一个节点。元素节点表示 HTML 元素，属性节点表示属性，文档类型节点表示文档类型，注释节点表示注释。DOM 中总共有 12 种节点类型，这些类型都继承一种基本类型。

2.节点

节点的类型一共有七种：

     ·  常用节点

                        1. 文档节点document

                        2.元素节点element

                        3. 属性节点attribute

                        4.文本节点text

                        

  • 其他节点
    DocumentType

    doctype标签（比如<!DOCTYPE html>）。

    Comment

    注释

    DocumentFragment

    文档的片段

这七种节点都属于浏览器原生提供的节点对象(下面要讲的Node对象)的派生对象，具有一些共同的属性和方法。

节点树——————

最顶层是document节点，下面一层是html唯一子节点，也就是根节点（root node）

下面的分别为 

                ： 父节点关系（parentNode）

                ：子节点关系（childNode）

                ：同级别节点关系（sibling）——兄弟节点，拥有同一个父节点

DOM提供操作接口，用来获取三种关系的节点。其中，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。

                1. firstChild

                2. lastChild

                3. nextSibling

                4. previousSibling

Node 类型

                ： 

        属性：

                1. nodeType

 

 <script>
        window.onload = function () {

            console.log(document.body.firstChild.nodeType)
        }
    </script>

————输出结果为3

                2. nodeName————以纯大写的方式，返回元素的标签名，如DIV，P，BUTTON

                        

 var two = document.getElementById('biaoqian')
            console.log(two)
            console.log(two.nodeName)

                        先，获取该元素，将元素赋值给一个变量，变量.nodeName————输出DIV

 

                3. nodeValue————输出div子节点文本值，即

 var three = document.getElementById('anniu')

            console.log(three.firstChild.nodeValue)

               先，获取该元素，将元素赋值给一个变量，变量.firstChild.nodeValue

                4. textContent————输出包含本元素在内的所有子元素的文本值

 var three = document.getElementById('anniu')




            console.log(one.textContent)

                ——————

                5. nextSibling————返回紧挨该元素的‘下一个’兄弟元素

 var three = document.getElementById('anniu')




            console.log(one.textContent)
            console.log(one.nextSibling)

                6. previousSibling————返回紧挨该元素的‘上一关’兄弟元素

 var three = document.getElementById('anniu')




            console.log(one.textContent)
            console.log(one.previousSibling)

                        

                7. parentNode————返回该节点的父节点。

 var four = document.getElementById('lianjie')
            console.log(four.parentNode)

                8. childNodes————返回该节点的所有子节点

console.log(document.body.childNodes)

                ————其中，过滤出所有元素节点的方法：

 var res = [...document.body.childNodes].filter(function (a) {
                return a.nodeType == 1
            })
            console.log(res)

                

魏佳伟
关注
JavaScript DOM 树解析说明
猿码互联
05-11 797
DOM（文档对象模型）是一种用于表示和操作HTML或XML文档的API（应用程序接口）。DOM树是HTML或XML文档的结构化表示，它由节点（Node）组成，包括元素节点（Element Node）、文本节点（Text Node）和属性节点（Attribute Node）等。通过操作DOM树，我们可以动态地改变文档的内容、结构和样式。在JavaScript中，可以通过内置的DOM API来解析和操作DOM树。通过使用这些DOM API，我们可以实现对DOM树的操作，实现动态改变网页内容、结构和样式的效果。
JavaScript阻塞DOM树
blue_go_go的博客
11-19 871
DOM 树如何生成 在渲染引擎内部，有一个叫HTML 解析器（HTMLParser）的模块，它的职责就是负责将 HTML 字节流转换为 DOM 结构。 HTML 解析器是等整个 HTML 文档加载完成之后开始解析的，还是随着 HTML 文档边加 载边解析的？ 这个答案就是：HTML 解析器并不是等整个文档加载完成之后再解析的，而是网络 进程加载了多少数据，HTML 解析器便解析多少数据 网络进程接收到响应头之后，会根据响应头中的content-type字段来判断文件的类型，比如content-type的值
JavaScript之DOM树
憧憬是碎了满地凉凉的宝石
07-03 1798
一、什么是DOM树？ DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 DOM树是结构，所谓层级结构是指元素和元素之间的关系：父子，兄弟。 文档：DOM中的"D" 如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生了。它把你编写的网页文档转换成为一个文档对象。 对象：DOM中的"O" 对象（object）是一种非常重要的数据类型。对象是自包含的数据集合，包含在对
【JavaScript】DOM树与DOM对象详解
lph159的博客
09-10 584
DOM，全称为Document Object Model，中文称为文档对象模型，是一种用于表示HTML、XML文档的编程接口。它将网页结构映射为可编程的对象，开发者通过DOM接口可以动态地修改网页的内容、样式、结构，从而实现动态的网页效果。DOM是平台无关的，它并不依赖于某种特定的编程语言。现代的Web浏览器提供了对DOM的原生支持，使得JavaScript能够轻松与网页交互。DOM树是文档结构的可视化表示，文档的每一个部分都被视作一个节点。DOM树的根节点通常是文档的根元素，例如HTML文档的。
原生js遍历DOM树
Pima
10-17 3561
var list = []; //声明一个数组list,用来存放元素的后代元素. function getChildrens(ele){ var children = ele.children; for(var i = 0 ; i &amp;lt; children.length; i++){ var child = children[i]; //c...
JavaScript的DOM 树是如何构建的 ？
ChaoticNg的博客
09-21 909
今天通过对 DOM 模型、HTML 解释器和 JavaScript 的执行的介绍，来初步学习 HTML 解释器是如何将从网络或者本地文件获取的字节流转成 DOM 树的。 DOM 模型 1、DOM 标准 DOM (Document Object Model) 的全称是文档对象模型，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。比如，Web开发中，用 JavaScript 语言来访问、创建、删除或者修改 HTML 的文档结构。 目前 W3C 已经定义了一系列 DOM 接口（三个版本的
DOM（一）概述、dom树、查找元素
热门推荐
商务合作 | 共同学习 | 携手共进
09-20 2万+
JavaScript DOM：DOM概述、查找元素4种方式、购物车案例。
js操作DOM树
qq_46615920的博客
08-07 605
一丶DOM树 DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM就是由节点组成的：HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树.如下图 二、节点查找(直接查找和间接查找) 直接查找: DOM节点的获取方式其实就是获取事件源的方式 ​ 操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点： //方式一：通过id获取单个标签 var div1 = docum
js遍历dom树
Limcong_1999的博客
08-31 218
分享一个简单的js遍历dom树的方法： const DOM_LIST = { node: [], // 默认遍历整个dom树，也可以传递指定dom作为根节点遍历 ergodicDOM(DOM = document.documentElement) { const children = DOM.children; children.length &&a
DOM（一）——DOM树和查找元素
Erya Programming learning
07-09 1578
文章目录一、DOM二、DOM树三、查找元素1. 不需要查找，就可直接获得元素/对象2. 按节点间关系查找a. 节点树(不建议使用)b. 元素树:3. 按HTML特征查找1) 按id名查找一个元素2) 按标签名查找多个元素3) 按class名查找多个元素4)按name名查找多个表单元素:四、DOM效果标准4步4.1 事件绑定a. 手工在html中元素开始标签中绑定事件处理函数b.在js中绑定 一、DOM DOM（Document Object Model文档对象模型）： 专门操作网页内容的一套对象和函数的总称
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
10-18
### JavaScript实现的DOM树遍历方法详解 #### 1. DOM树遍历概念 DOM树遍历是指在浏览器中对文档对象模型（Document Object Model，简称DOM）进行的一种操作，通常用于访问页面元素、修改元素内容、事件处理等。在...
javascript先序遍历DOM树的方法
10-22
DOM树是根据HTML或XML文档所构建的一个树状结构，它代表了文档的结构，让开发者可以通过JavaScript来访问和修改文档的内容、结构以及样式。遍历DOM树是操作DOM的基本方式之一，其中先序遍历是一种常用的遍历方式，它...
JS遍历DOM文档树的方法实例详解
10-18
DOM（文档对象模型）是JavaScript操作HTML和XML文档的接口，DOM树是一个以树形结构表示文档的模型。每一个HTML或XML文档的节点都对应着DOM树上的一个节点，通过DOM提供的方法可以对这些节点进行访问、修改等操作。 ...
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
杨荧的CSDN博客
10-10 1447
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
React中的refs是什么？
Front end development engineer
10-10 373
React 的众多优点之一是它抽象了处理真实 DOM 的复杂性。现在，我们无需手动查询元素、绞尽脑汁思考如何为这些元素添加类又或者是添加样式等，也无需为浏览器兼容性而苦恼，只需编写组件并专注于用户体验即可。然而，仍然有一些情况（虽然很少！）我们需要访问实际的 DOM。而当涉及到实际的 DOM 时，最重要的是要理解并学习如何正确使用 ref 以及 ref 周围的一切。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1334
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 109
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
最新发布
Fisher的专栏
10-15 477
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
如何使用Python爬虫处理JavaScript动态加载的内容？
Z_suger7的博客
10-11 667
JavaScript动态加载的内容为爬虫带来了挑战，但也提供了新的机遇。通过使用Selenium、分析API请求或Pyppeteer，我们可以有效地爬取这些动态内容。这些方法各有优势，Selenium适合模拟复杂的用户交互，API请求适合直接获取数据，而Pyppeteer则提供了更强大的JavaScript控制能力。在实际应用中，开发者应根据目标网站的特点和需求选择合适的方法。随着技术的不断发展，我们也需要不断学习和适应新的工具和方法，以保持在数据获取领域的竞争力。复制再试一次分享。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值