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

您所在的位置:网站首页 dom在圈里什么意思 什么是DOM?你了解DOM树吗?

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

2024-01-15 10:58| 来源: 网络整理| 查看: 265

在找工作的过程中,看到了招聘信息上有写这么一条信息: 掌握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元素 我是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的详细介绍,希望可以帮助到小伙伴们


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3