JavaScript基础篇(六):DOM

54 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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)。