什么是DOM?你了解DOM树吗?
在⼯作的过程中,看到了招聘信息上有写这么⼀条信息:
掌握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 = ElementsByTagName('div')
var p = ElementById('p')
html document是什么
// 创建⼀个a元素
var a = ateElement('a')
// 添加到body
document.body.append(a)
// 移除body中的div⼦节点
veChild(div)
div.innerHTML ='我修改了div的⽂本内容'
以上就是DOM的详细介绍,希望可以帮助到⼩伙伴们

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。