DOM树知识点梳理

article/2025/10/31 20:50:02

为什么会提到Dom树呢,或许它对于我们很好地理解网页各个元素,标签和控件搭配,以及各种js,css等的加载会有一些帮助。笔者在工程中遇到了一些小问题,本质就是dom树的东西掌握的不扎实。所以借此来梳理一下。
1.HTML DOM
ok, 我们先来看一下W3school中怎么解释这个概念和结构的。W3school是一个很不错的网站,很适合初学者和基础不扎实的人。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。
这里写图片描述

W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
我们主要来看HTML DOM
HTML DOM 是:
HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

DOM 节点
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
这里写图片描述

2.获取节点的原生方


http://chatgpt.dhexx.cn/article/4ecRdkRF.shtml

相关文章

浏览器-DOM树

前言: 在渲染流水线中直接或者间接地依赖于 DOM 结构,本文按着网络数据流路径来介绍 DOM 树是如何进行构建的。 节点(Node): 节点(Node)原本是网络术语,表示网络中的连接点。一个网…

Dom树,什么是dom树?

相信很多初学前端的小伙伴,学了html, css, js之后,会遇到 一个名词 DOM树。 首先说一下DOM是什么? DOM 是 Document Object Model(文档对象模型)的缩写。 举个例子 我们日常生活中,经常会遇到一些写文档…

对 Dom 树的理解

什么是 DOM 从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的,所以要将其转化为渲染引擎能够理解的内部结构,这个结构就是 DOM。 DOM 提供了对 HTML 文档结构化的表述。 在渲染引擎中,DOM 有三个层面的作用: …

DOM初探(9)——DOM结构树

document一回车,他就代表整个文档;Document一回车,他代表的是一个函数,什么函数需要首字母大写?构造函数吧,只不过这个Document有点特殊,你不能new他,这时系统留给自己new的。那这个…

dom树是如何生成的

页面得渲染流程总得俩说就五步,创建 DOM 树——创建 StyleRules——创建 Render 树——布局Layout(重排)——绘制 Painting(重绘) 第一步,用 HTML 分析器,分析 HTML 元素,构建一颗 D…

Dom树 CSS树 渲染树(render树) 规则、原理

前端不可不学的浏览器渲染机制,阿里年年问,去一个栽一个。听说百度也在考这个,你还不准备学吗? 首先你要了解浏览器渲染的顺序:   1.构建dom 树   2.构建css 树   3.构建渲染树   4.节点布局   5.页面渲染 什么…

HTML-DOM树篇

一、什么是DOM DOM(Document Object Model) 文档对象模型,是HTML和XML文档的编程接口 DOM 以树结构表达 HTML 文档,树的每个分支的终点都是一个节点,每个节点都包含着对象DOM 将web页面与脚本或编程语言链接起来&#…

DOM结构(DOM树)

DOM 文档类型DOM(Document Object Model)主要用于HTML文档和XML文档的内容进行操作。DOM描绘了一个层次化的节点树,通过节点的操作,来实现对文档内容进行增删改查。 1.DOM(Document Object Model)&#x…

DOM(一)概述、dom树、查找元素

目录 一、DOM 概述 二、DOM树 二、查找元素 1. 无需查找的元素 2. 按节点间关系查找 3. 按 HTML 特征查找 三、案例:通过DOM实现购物车效果 一、DOM 概述 DOM全称 Document Object Model,是专门操作网页内容的一套对象和函数的总称。由于 ES 标准…

DOM深入学习 --- DOM 树介绍,如何遍历 DOM 树节点(一)

DOM 树 HTML 文档的主干是标签(tag)。 根据文档对象模型(DOM),每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签(children)”。标签内的文本也是一个对象。 所有这些对象都可以通…

什么是DOM?你了解DOM树吗?

在找工作的过程中,看到了招聘信息上有写这么一条信息: 掌握WEB前端开发技术:JavaScript(含ES6)、HTML、CSS、DOM等 看见这条信息我心里安心了不少,都是一些基础问题,但是乍一看DOM,脑子有点短路了&#x…

Windows命令:CHCP

CHCP 用途一:Windows操作系统默认编码格式是GBK(963),cmd窗口编码方式设置为UTF-8方法: 临时修改方案:CHCP 65001永久修改方案:参考资料:https://jingyan.baidu.com/article/d71306…

查看windows操作系统的默认编码(字符集)-chcp

在windows cmd 模式下,输入命令 : chcp 如上图,我的活动代码页为936,意思是"中国-简体中文(GB2312)" 说明:代码页是“字符集编码”的别名,也有人称为“内码表”。 下表列出了所有支持的代码页…

解决‘chcp’不是内部或外部命令,也不是可运行的程序或批处理文件

解决方法: 此电脑\系统属性\高级系统设置\环境变量 在系统变量点击path,变量值改为Anacondad的安装路径加 ;C:\Windows\System32 即可解决注意添加; 有什么问题可私信我 附图:

meterpreter里面cmd乱码解决方法chcp 65001

当我们使用meterpreter反弹shell后使用是乱码时 可以采用如下命令解决 chcp 65501 chcp是一个计算机指令,能够显示或设置活动代码页编号。 65001 UTF-8代码页 950 繁体中文 936 简体中文默认的GBK 437 MS-DOS美国英语

win10 命令行工具cmd乱码解决方案及cmd非常用命令chcp介绍

问题发生前景: 在使用好压压缩命令批量添加压缩文件的时候产生,中文路径或者文件名中文都是乱码,一堆问号。后来查了一些资料,发现命令行工具能够设置编码格式。具体操作如下: 在cmd或者powershell中执行命令 chcp …

msf拿到shell显示乱码解决方法以及chcp各种编码的补充

文章目录 前言 前言 msf拿到shell之后输入命令经常会有乱码,只需要一条命令就能解决。 chcp 65001 chcp 65001 的意思是 :改变当前活动代码页为 UTF-8,让当前的批处理窗口支持 UTF-8 格式的文件。 改变当前 cmd 窗体的活动代码页&#xff0…

【cmd】windows 控制台cmd乱码的解决办法 chcp 65001

本机的系统环境: OS Name: Microsoft Windows 10企业版 OSVersion: 10.0.14393 N/A Build 14393 有时在cmd中输出的中文乱码 解决办法如下: 在cmd中输入CHCP 65001 按Enter键 然后查看不再乱码 注:CHCP是一个计算机指令,能够…

解决CMD编码格式CHCP65001 UTF-8导致Robotframework运行用例失败

运行环境 WIN10系统 Robot Framework 6.0.2 (Python 3.7.9 on win32) 安装命令 // 通过pip安装robotframeworkpip install robotframework pip install robotframework-ride python -m robotide.__init__ 运行demo测试用例 写了一个最简单的测试用例,结果运行…

windows控制台命令窗口中文乱码chcp 65001

1.打开CMD.exe命令行窗口,默认情况下,编码为936(简体中文 GBK编码)。 2.通过chcp命令改变代码页,chcp 65001。(65001为UTF-8的代码页) 修改以前的编码936,该编码只能显示GBK编码的中文: 修改后…