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

article/2025/10/31 22:51:13

在找工作的过程中,看到了招聘信息上有写这么一条信息:

  • 掌握WEB前端开发技术:JavaScript(含ES6)、HTML、CSS、DOM等

看见这条信息我心里安心了不少,都是一些基础问题,但是乍一看DOM,脑子有点短路了,上网查了下脑子清醒了。

什么DOM

DOM(Document Object Model)即文档对象模型,是W3C制定的标准接口规范,是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型,将文档作为一个树形结构,树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后,转化为DOM树,因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构,还定义了结点对象的行为,利用对象的方法和属性,可以方便地访问、修改、添加和删除DOM树的结点和内容。
下面我开始详细的解释

先了解几个关键字
  • 元素(element):文档中的都有标签都是元素,元素可以看成是对象
  • 节点(node):文档中都有的内容都是节点:标签,属性,文本
  • 文档(document):一个页面就是一个文档
  • 这三者的关系是:文档包含节点,节点包含元素
Document 文档

什么是文档呢?一个页面就是一个文档,一个html文件或XML文件就是一个文档
html与Xml的区别:
html 用来展示信息,展示数据的
xml 更侧重于存储数据

Object 对象

“万物皆对象”相信小伙伴们对这5个字有点印象吧。把所有的事物都当作一个对象,html文件是一个对象,html文件中的标签也是对象

Model 模型

文档(页面)中有一个根(root),这个根标签包含head标签与body标签,head标签中又包含meta与title标签,body标签中包含div、p、header、main等等标签,其中main下面又有article、aside等等标签,article标签中又有其它的标签等等,这就组成了树状结构图,也叫DOM树。这就形成了一个模型。看下图的关系。
在这里插入图片描述

Node 节点

Node节点包含了标签、属性、文本等,定义了结点对象的行为,就是利用对象的方法和属性,可以方便地访问、修改、添加和删除DOM树的结点和内容。

DOM的作用

通过上面的详细介绍,我想小伙伴们都差不多知道DOM的作用了。就是为了让JavaScript可以对文档中的标签、属性、内容等进行 访增删改 操作。
举几个简单的例子:

html内容
<div>我是div元素</div>
<p id="p">我是p元素</p>
访
var div = document.getElementsByTagName('div')
var p = document.getElementById('p')
// 创建一个a元素
var a = document.createElement('a')
// 添加到body
document.body.append(a)
// 移除body中的div子节点
document.body.removeChild(div)
div.innerHTML = '我修改了div的文本内容'

以上就是DOM的详细介绍,希望可以帮助到小伙伴们


http://chatgpt.dhexx.cn/article/ycteKuhk.shtml

相关文章

Windows命令:CHCP

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

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

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

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

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

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

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

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

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

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

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

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

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

解决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测试用例 写了一个最简单的测试用例&#xff0c;结果运行…

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

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

用CHCP命令切换CMD中英文帮助

如果你想查看CMD某个命令帮助说明&#xff0c;结果显示为英文&#xff0c;英文不好看起来又很累。那么chcp 命令可以帮你切换字符格式 命令介绍&#xff1a; CHCP [nnn]nnn 指定代码页编号。不带参数键入 CHCP 以显示活动代码页编号。常用代码 代码语言65001UTF-8936中文G…

【求助】Executing transaction: | menuinst ExceptionTraceback (most recent call last): File “C:\Program

本人用anaconda的prompt更新东西时&#xff0c;系统给出以下提示&#xff1a; Executing transaction: | menuinst Exception Traceback (most recent call last): File "C:\ProgramData\Anaconda3\lib\site-packages\conda\gateways\disk\create.py", line 246, …

chcp编码大全

字符集 *号标记的是cmd中包含的字符集&#xff0c;其它的不能使用 查看当前字符集&#xff1a;chcp 执行下面的命令可以修改cmd窗口的字符集&#xff0c;例如&#xff1a;修改为utf-8 chcp 65001 注意&#xff1a;win10系统上面这种修改方式不是永久有效的 CodePageidentifi…

DOS命令:chcp

chcp是命令提示符中的一个可执行命令&#xff0c;在命令提示符中运行&#xff0c;可以返回活动代码页的编码&#xff0c;还可以设置当前的活动代码页。 chcp /? ---查看官方帮助文档对CHCP的解释说明 1、在命令提示符中输入chcp命令&#xff0c;显示当前活动代码页编码&#…

网页脚本编程学习笔记

网页脚本编程学习笔记 1、配置 此处以火狐浏览器为例&#xff1a; 1&#xff09;、 打开web控制台&#xff0c;调出查看器&#xff08;用于查看该网页的HTML源代码&#xff09;、控制台&#xff08;编写控制代码&#xff0c;可以实时操作&#xff0c;显示运行结果、报错&am…

在网页中运行自己编写的JS脚本的两种方式

一、F12打开调试工具&#xff0c;利用控制台运行JS脚本 输入javascript:加上JS代码回车执行脚本 二、通过浏览器收藏夹运行JS脚本 以谷歌浏览器为例&#xff0c;新建收藏夹&#xff0c;网址处填写JS代码&#xff0c;添加收藏以后&#xff0c;点击图标即可执行

超强脚本网站-让你的浏览器拥有灵魂

点击此处直达&#xff1a; Greasy Fork - 安全、实用的用户脚本大全https://greasyfork.org/zh-CN

Lesson01: 网页脚本语言

文章目录 一、JavaScript的思维导图二、下载开发工具三、JavaScript的引入方式&#xff08;通过标签script进行引入&#xff09;1.内嵌式2.外链式3.行内式 四、注释1.单行注释2.多行注释 五、鼠标的移入移出1.鼠标的移入2.鼠标的移出3.鼠标移入移出改变背景颜色的实训案例 六、…

教你写个网页自动签到脚本

Tips:要求有js基础&#xff0c;最起码要敲过代码&#xff0c;hello world不算。。 1.搜寻受害者 就选这个了&#xff0c; 2.准备阶段 首先打开浏览器的控制台&#xff0c;按F12&#xff0c;选中网络&#xff0c;选中保留日志&#xff0c;就一直开着控制台&#xff0c;不要…

WEB端脚本

//弹框 _self.showWarning("请先填写实付金额"); console.log("跳转的id:"billIds);//弹选择框 waf.msgBox.showConfirm({title: "信息提示",summaryMsg: "是否删除",buttonType: "yes-no",buttonCallBack: [function () {c…

在网页执行脚本

工具&#xff1a; 谷歌或EDGE浏览器安装 tampermonkey 插件 步骤&#xff1a; 打开需要指定脚本的网站点击tampermonkey 插件选中新增脚本开始编辑你的脚本 例如&#xff1a; 以 Java技术栈 为例&#xff0c;正常查看文章需要关注公众账号来解决查看全文&#xff0c;添加脚本后…