DomTree探秘

最新推荐文章于 2026-06-29 16:52:08 发布
转载 最新推荐文章于 2026-06-29 16:52:08 发布 · 184 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：https://segmentfault.com/a/1190000004945408
本文介绍了DOM树的概念及其在HTML文档中的应用。通过使用JavaScript，可以实现对DOM树的操纵，包括节点的添加、删除和替换等功能。文章还详细列举了DOM树中不同类型的节点及其对应的属性。

DomTree

DOM

DOM是一个由javascript节点对象组成的层次结构/树

<html>
<head>
    <title>HTML</title>
</head>
<body>
</body>
</html>

使用chrome打开，并打开开发者工具，选择Elements->Properties

选中body节点，我们可以看到类似于Eclipse中java类的Class hierarchy视图。body是HTMLBodyElement的实例化对象，HTMLBodyElement是HTMLElement的子类，以此类推...

总结

  • DOM的目的是使用javascript操作(删除、添加、替换、创建事件)树状的HTML文档而提供的一个编程接口

节点对象类型

  • DOCUMENT_TYPE_NODE 10

  • DOCUMENT_NODE 9

  • ELEMENT_NODE 1

  • ATTRIBUTE_NODE 2

  • TEXT_NODE 3

  • ...

这些Node属性是常量，是用来声明某一节点的类型。如同java语言中的Integer,Char,Long,String等，而且它们也有构造函数啊！

构造函数类型
HTML*ElementELEMENT_NODE
TextTEXT_NODE
AttrATTRIBUTE_NODE
HTMLDocumentDOCUMENT_NODE
DocumentFragmentDOCUMENT_FRAGMENT_NODE
DocumentTypeDOCUMENT_TYPE_NODE
标签
#java #javascript #开发工具 #ViewUI
DOMtree简介
forestLight的专栏
12-01 2693
很早就听过大名鼎鼎的DOMTree，但一直不知道这是何物。今天查了下wiki，这里对它做个小说明。算是读书笔记吧。        1.重点1         The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and intera
终极指南：如何让老旧Mac免费升级最新macOS系统
gitblog_00699的博客
06-03 989
你是否还在使用2013-2015年间的Mac设备，却被官方系统更新无情抛弃？OpenCore Legacy Patcher为你提供完整的解决方案！这款开源工具通过创新的硬件适配技术，让老旧Mac设备重新获得macOS系统升级的机会。在本文中，我将为你详细介绍如何安全、稳定地让旧设备焕发新生，体验最新macOS系统的完整功能。 ## 🔍 识别硬件限制与升级困境 当你的MacBook或iMac被
三步重塑：让旧Mac焕发新生的完整方案
gitblog_00832的博客
06-03 356
你是否曾经看着手中那台陪伴多年的Mac，因为苹果官方的系统支持终止而感到无奈？想象一下，当你的MacBook Pro 2012无法升级到macOS Ventura或Sonoma时，那种被时代抛弃的失落感。或者当你尝试升级后，发现显卡驱动失效、无线网络无法连接、系统功能残缺不全时的挫败感。这些正是**OpenCore Legacy Patcher**（OCLP）要解决的痛点，这个开源项目通过创新的硬
shawl.qiu Javascript DOM 树形结构显示类 DomTree class v1.0
星☆空 | 对生活要知足,学习要不知足,为人处事要知不足. 卍 ♂ | ♀ 卐 - 科技以人为本.
05-26 2384
shawl.qiu Javascript DOM 树形结构显示类 DomTree class v1.0说明:这个东西其实没啥用途, 写的原因嘛, 当然也有的...记得刚学JS时, 想遍历枚举 dom 的节点, 并递增显示缩进和节点名出来, 可是弄了N久, 还是没法子... 今天偶然想起了上面那想法, 呵呵, 当然就动手啦, 写起了跟切菜一样, 一会就搞定....目录:1. 调用2. DomTr
html文档domtree结构图,DOM Tree
weixin_36125599的博客
06-09 396
本词条缺少概述图，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！DOM是文档对象化模型(Document Object Model)的简称。DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法。中文名文档对象化模型外文名Document Object Model简称DOM Tree方式通过DOM将HTML页面进行解析DOM ...
前端DOMTree常用Api总结
weixin_33694620的博客
05-19 167
<h2>DOM Tree Api</h2>查找Tree的位置parentNodeparentNode 属性可返回某节点的父节点。 如果指定的节点没有父节点则返回 null 。 复制代码example :document.getElementById("item1").parentNode; 复制代码childNodeschildNodes 属性返回节点的子节点集合，...
chromium:LoadUrl之后会发生那些事情之DOMTree创建
Fantasy_116的专栏
07-25 1883
一 综述  上一篇分析从地址栏输入网址，Application --> content-->blink-->Network stack，到调用网络库从网络上进行资源下载，这篇将分析从resource得到资源后，再到如何建立DOM Tree的完整过程。 在上一篇“资源下载”中进分析资源下载的整个流程，并未涉及到页面的相关结构，一个页面blink对外部（content）是WebView，而对内部是
html文档domtree结构图,DOM tree （文档翻译）
weixin_42461035的博客
06-09 466
DOM treeHTML文档的脊背是标签(tags)。根据文档对象模型(DOM)，每个HTML标签都是一个对象(object)。嵌套的标签是封闭标签的子集。标签内的文本也是一个对象。所有的这些对象都可通过JavaScript访问，我们可以用它们来修改页面。举个例子，document.body是标签的对象。运行以下的代码会使变红3秒。document.body.style.background = ...
Chromium网页DOM Tree创建过程分析
热门推荐
老罗的Android之旅
02-01 2万+
在Chromium中，Render进程是通过Browser进程下载网页内容的，后者又是通过共享内存将下载回来的网页内容交给前者的。Render进程获得网页内容之后，会交给WebKit进行处理。WebKit所做的第一个处理就是对网页内容进行解析，解析的结果是得到一棵DOM Tree。DOM Tree是网页的一种结构化描述，也是网页渲染的基础。本文接下来就对网页DOM Tree的创建过程进行详细分析。
chromium:LoadUrl之后会发生那些事情之RenderTree创建
Fantasy_116的专栏
07-25 1526
一 RenderTree 的综述 了解一点WebKit的都会知道，资源下载，DOMTree，RenderTree（在M44中，将Render Tree称为LayoutTree，其中的节点也不叫RenderObject，而是LayoutObject，根节点也从RenderView改名为LayoutView了，下面为了理解，还使用历史称谓RenderTree， RenderObject以及Rende
java生成xml方法_JAVA生成XML树2种方法实现(1 深度遍历)【绝对原创】
weixin_34364310的博客
02-16 285
深度遍历生成XML树ORACLE数据库脚本：create table domtree(orderid number(4),id number(4) not null, /*序号*/name VARCHAR2(20) not null, /*节点名称名*/value VARCHAR2(100), /*节点内容*/fatherid number(4)...
DOM Tree （百科）
aaf98020的博客
11-01 274
DOM是文档对象化模型（Document Object Model）的简称。DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法。 概要： DOM技术被Internet Explorer 5.0及以上版本的浏览器所支持，它采取一种非常直观且一致的方式将HTML文档进行模型化处理，并借此提供访问、导航和操作页面的简易编程...
chromium加载网页
tornmy的博客
08-16 2555
站在老罗的肩膀上：https://blog.csdn.net/luoshengyang/article/details/50414848 Chromium加载网页的过程，需要Browser进程和Render进程协作完成。加载网页的过程由Browser进程发起，向服务器请求网页内容的过程也是由Browser进程完成。Render进程负责对下载回来的网页内容进行解析，解析之后得到一个DOM Tree...
DOM tree
weixin_30244681的博客
11-01 430
基本简介：DOM是文档对象化模型(Document Object Model)的简称。DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法。 借助DOM Tree，我们能直接而且简易的操作HTML页面上的每个标记内容 对应的代码如下： <!DOCTYPE html><html lang="en">...
学习浏览器渲染页面的过程
ww的博客
09-15 182
最近有点好奇浏览器是如何渲染页面的，所以去网上查了资料。 浏览器解析 1.浏览器通过请求的URL进行域名解析，向服务器发起请求。服务器会返回文件(HTML、CSS、JS、Images等等) 2.浏览器加载HTML文件后，开始构建DOM Tree 3.CSS样式文件加载后,开始解析和构建CSS Rule Tree 4.Javascript脚本加载后，通过DOM API和CSSOM API ...
09_超详细的DOM相关的API操作-导航获取节点-获取元素的方法-节点与元素的常见属性-元素操作-DOM练习小案例
m0_71485750的博客
06-01 997
我们花了很多时间学习JavaScript的基本语法，但是这些基本语法，但是这些语法好像和做网页没有什么关系，和前面学习的HTML、CSS也没有什么关系前面我们学习了一个window的全局对象，window上事实上就包含了这些内容：DOM：文档对象模型（Document Object Model）BOM：浏览器对象模型（Browser Object Model）浏览器会对我们编写的HTML、CSS进行渲染，同时它又要考虑我们可能会通过JavaScript来对其进行操作：整个文档被抽象到 document 对象
浏览器原理面试题
weixin_47450807的博客
04-21 480
一、浏览器如何解析css选择器 浏览器会从右向左解析css选择器。 我们知道DOM Tree和Style Rules会生成Render Tree。实际上是需要将Style Rules附着到DOM Tree上，因此需要根据选择器提供的信息对DOM tree进行遍历，才能将样式附着到对应的DOM元素上。 以下这段css代码为例。 .mod-nav h3 span { font-size: 16px } 我们对应的DOM tree如下所示： 若从左到右的匹配，过程是： 1、从.mod-nav开始，遍历子节点
不加载执行js_浏览器加载解析渲染网页原理
weixin_39644325的博客
01-06 220
一、浏览器加载网页资源的原理1、HTML支持的组要资源类型在浏览器内核有一个管理资源的对象CachedResource类，在CachedResource类下有很多子类来分工不同的资源管理，这些资源管理子类分别是： 资源 资源管理类 HTML MainResource ===> CachedRawResource JavaScript CachedScript CSS CachedCSSty...
一款针对Spring漏洞框架进行快速利用的图形化工具
最新发布
LiBai'S BLOG
06-29 326
一款针对Spring漏洞框架进行快速利用的图形化工具。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值