DOM

Posted x0815

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM相关的知识,希望对你有一定的参考价值。

DOM的全称是 Document Object Model,中文就是:文档对象模型.

 

---------------------------------------------------------
节点名称                           对应数值

元素节点              Node.ELEMENT_NODE(1)

属性节点              Node.ATTRIBUTE_NODE(2)

文本节点              Node.TEXT_NODE(3)

----------------------------------------------------------

 

1、旧的DOM用法

1-1、document.body属性:返回网页的<body>属性

1-2、document.images属性:返回文档中所有图像的一个节点列表

1-3、document.links属性:返回所有具有href属性的<a>元素和<area>元素的一个节点列表

1-4、document.anchors属性:返回所有具有name属性的<a>元素的一个节点列表

1-5、document.forms属性:返回文档中所有表单的一个节点列表

 

 

2、快速查找节点

2-1、getElementById()方法:通过这个方法可以快速锁定id为某个值的节点

2-2、getElementByTagName()方法:通过标签的名称快速查找节点

2-3、getElementByClassName()方法:通过类名来查找到元素

2-4、document.getElementsByName()方法:可以访问到对应name值的元素节点

2-5、document.querySelector()方法:这是html5新增的查找节点的方法,最大的特点在于可以通过css的语法来查找文档中所匹配的第一个元素

2-6、document.querySelectorAll()方法:会返回所有符合要求的元素

2-7、HTMLCollectionNodeList
区别:如果document.getElementByTagName()来获取到的节点集合,返回的为HTMLCollection,这是一个实时集合
而使用新的querySelectorAll()方法获取到的节点集合,返回的为NodeList

 

 

3、关系查找节点

3-1、childNodes属性
每个节点都有一个chileNodes属性,该属性会返回一个节点下面所有的子节点

3-2、children属性
children属性只返回一个节点下面的所有子元素节点,所以会忽略所有的文本节点和空白节点

3-3、firstChildlastChild属性:分别是访问一个节点的第一个子节点以及最后一个节点

3-4、parentNode属性:获取父级节点的属性

3-5、previousSiblingnextSibling属性
previousSiblings属性返回同一父节点下的前一个相邻节点,如果该节点已经是父节点的第一个节点,则返回null

3-6、previousElementSiblingnextElementSibling 属性:直接查询某一个节点的上一个或者下一个元素节点

 

-------------------------------------------------------------------------

删除节点: 父节点.removeChild(子节点)

替换节点: 父节点.replaceChild(新节点,旧节点)

克隆节点:分为浅克隆和深克隆

节点.cloneNode(布尔值)

-------------------------------------------------------------------------

 

 

4、快速获取节点内容

在DOM中,我们可以通过innerHTMLinnerText来获取到节点内部的信息

 

5、获取和设置元素属性
在DOM中提供了getAttribute()以及setAttribute()这两个方法来获取和设置元素节点的属性,

getAttribute()是获取到元素节点的属性值,而setAttribute()则是设置元素节点的属性值

 

6、元素的类的相关操作

6-1、添加类:add()
6-2、删除类:remove()
6-3、是否含有某个类:contains()
6-4、切换类:toggle()

 

以上是关于DOM的主要内容,如果未能解决你的问题,请参考以下文章

React虚拟dom中的key值

DOM事件: DOM事件级别DOM事件流DOM事件模型DOM事件捕获过程自定义事件

虚拟DOM(Virtual Dom) VS 影子DOM(Shadow Dom)

虚拟DOM(Virtual DOM)

关于DOM级别的一些问题,DOM0,DOM1,DOM2

DOM事件类