持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第6天,点击查看活动详情
这里主要记录了操作DOM的一些API
Node
属性
- childNodes:返回包含指定节点的子节点的集合
- firstChild 只读属性返回树中节点的第一个子节点,如果节点是无子节点,则返回
null
- lastChild 是一个只读属性,返回当前节点的最后一个子节点
- nextSibling返回下一个兄弟节点
- nodeName返回当前节点的节点名称
- nodeType 属性可用来区分不同类型的节点,如文本节点、注释节点、元素节点
nodeType的值 | 节点类型 |
1 | 元素节点 |
3 | 文本节点 |
COMMENT_NODE:8 | 注释节点 |
- nodeValue 属性返回或设置当前节点的值
- parentNode返回指定的节点在DOM树中的父节点.
- parentElement返回当前节点的父元素节点
- previousSibling返回当前节点的前一个兄弟节点,没有则返回
null
- textContent 属性表示一个节点及其后代的文本内容。
方法
增加节点
- appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。
- **insertBefore()**方法在参考节点之前插入一个拥有指定父节点的子节点
删除节点
- removeChild() 方法从DOM中删除一个子节点。返回删除的节点
修改节点
- replaceChild() 方法用指定的节点替换当前节点的一个子节点,并返回被替换掉的节点。
查找节点
- **getElementById()**返回一个匹配特定ID的元素
- **getElementsByClassName()**返回一个包含了所有指定类名的子元素的类数组对象
- **getElementsByName()**根据给定name返回一个在 (X)HTML document的节点列表集合。
- **getElementsByTagName()**返回一个包括所有给定标签名称的元素的HTML集合
- **querySelectorAll()**返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是
NodeList
。 - **querySelector()**返回文档中与指定选择器或选择器组匹配的第一个
Element
对象。 如果找不到匹配项,则返回null
。
Element
属性
-
attributes 属性返回该元素所有属性节点的一个实时集合
-
classList
-
className
- add
- remove
- replace
- toggle
-
innerHTML
-
outerHTML
-
tagName:返回当前元素的标签名
-
clientHeight它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。
-
clientWidth属性表示元素的内部宽度,以像素计。该属性包括内边距 padding,但不包括边框 border、外边距 margin 和垂直滚动条(如果有的话)。
-
scrollHeight 这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。
-
scrollWidth 这个只读属性是元素内容宽度的一种度量,包括由于overflow溢出而在屏幕上不可见的内容。
-
scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。
-
scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
方法
- getAttribute(attributeName) 返回元素上一个指定的属性值。如果指定的属性不存在,则返回
null
或""
- removeAttribute(attrName) 从指定的元素中删除一个属性。
- **setAttribute(name, value)**设置指定元素上的某个属性值。如果属性已经存在,则更新该值
- hasAttribute 返回一个布尔值,指示该元素是否包含有指定的属性(attribute)。