DOM API

Cyber_Bear
164 阅读2分钟

创建元素

document.createElement('tagName');

添加元素

  1. ParentNode.prepend(chileNode)
    • ParentNode.prepend 方法可以在父节点的第一个子节点之前插入一系列 Node 对象或者 DOMString 对象。DOMString 会被当作 Text 节点对待（也就是说插入的不是 HTML 代码）。
  2. ParentNode.appendChild(childNode);
  3. ParentNode.append(childNode);
    • ParentNode.append()允许追加 DOMString 对象，而 Node.appendChild() 只接受 Node 对象。
    • ParentNode.append() 没有返回值，而 Node.appendChild() 返回追加的 Node 对象。
    • ParentNode.append() 可以追加多个节点和字符串，而 Node.appendChild() 只能追加一个节点。
  4. parentNode.insertBefore(newEle, oldNode);：父元素插入元素

移动元素

由于DOM对象属于引用类型，所以在操作 append，prepend 和 insertBefore 方法时，

控制的节点如果是文档中存在的节点，那么将把这个节点移到目标处。

复制节点

  1. var dupNode = node.cloneNode(deep);

    • node 将要被克隆的节点
    • dupNode 克隆生成的副本节点
    • deep 可选
      • 是否采用深度克隆，如果为 true，则该节点的所有后代节点也都会被克隆，如果为 false，则只克隆该节点本身。

删除节点

  1. parentNode.removeChild(childNode);

注：父元素调用该方法，返回值为被删除的节点

  1. node.remove()

移除自身引用

替换元素

parentNode.replaceChild(newNode,oldNode);

注：oldNode 节点必须是 parentNode 的子节点。

查找节点的总结

  1. node.contains(el)：如果 node 本身为 el 或者子节点中包含 el，则返回true，否则返回false；
  2. document.querySelecter()：通过元素选择器，获取第一个符合的 node
  3. document.querySelecterAll()：通过元素选择器获取 node 集合
  4. getElementsByClassName()：通过类名，获取 node 集合
  5. getElementsByTagName()：通过标签名，获取 node 集合
  6. getElementsByName()：通过元素 name 属性值，获取 node 集合
  7. getElementById()：通过元素 id 属性值，获取第一个符合的 node
  8. node.childNodes：返回节点到子节点的节点列表
  9. node.firstChild：返回首个子 node
  10. node.lastChild：返回最后一个 node
  11. node.nextSibling：返回下一个兄弟 node
  12. node.previousSibling：返回上一个兄弟 node
  13. node.nodeName 返回 node 的名字，大写，如：DIV、P、CANVAS……
  14. node.nodeType 返回 node 的类型，number 类型，1表示元素节点、2表示属性节点（废弃）、3表示文本节点……共 12 种 nodeType
  15. node.nodeValue：返回或设置当前节点的值，如文本，注释，对于文档节点返回 null。
  16. node.textContent：返回文本内容。
  17. HTMLElement.innerText：返回元素的渲染内容，受 CSS 影响，会触发回流，并且不会返回隐藏的内容。
  18. node.ownerDocument：返回当前节点的顶层的 document 对象
  19. node.parentNode：返回父节点
  20. node.offsetParent 返回定位父节点（display!== null && position!== 'static')
avatar
文章
阅读
粉丝