JavaScript 节点操作

àì夳堔傛蜴生んèń 2022-05-26 02:44 340阅读 0赞
    • 1.创建节点
    • 2.复制节点
    • 3.插入节点
    • 4.替换节点
    • 5.移除节点
    • 6.查找节点

1.创建节点

  1. // 创建元素节点
  2. document.createElement('div');
  4. // 创建文本节点
  5. document.createTextNode();
  7. // 创建注释节点 并木有用
  8. document.createComment();
  10. // 创建片段
  11. document.createDocumentFragment();

2.复制节点

  1. // true标识会克隆原节点的所有子节点
  2. nodeObj.cloneNode(boolean)

3.插入节点

  1. // 在目标节点追加尾部子节点
  2. parentNode.appendChild(childNode);
  4. // 在目标节点追加首位子节点
  5. parentNode.insertBefore(newNode, targetNode);
  7. /* option: 'beforeBegin' 在node之前插入html 'afterEnd' 在node之后插入... 'afterBegin' 在子元素之前插入... 'before' 在子元素之后插入... */
  8. node.insertAdjacentHTML(option, html)

4.替换节点

  1. parentNode.replace(newNode, targetNode)

5.移除节点

  1. parentNode.removeChild(childNode) // 谋杀式
  2. childNode.remove() // 自杀式

6.查找节点

  1. document.getElementById()
  2. document.getElementsByTagName()
  3. document.getElementByName()
  5. // 返回子节点列表
  6. node.childNodes
  8. // 返回第一个子节点
  9. node.firstChild
  11. // 返回最后一个子节点
  12. node.lastChild
  14. // 返回父节点
  15. node.parentNode
  17. // 返回祖先节点
  18. node.ownerDocument
  20. // 返回同级前一个节点
  21. node.previousSibling
  23. // 返回同级后一个节点
  24. node.nextSibling

发表评论

表情：
评论列表 （有 0 条评论，340人围观）

还没有评论，来说两句吧...

相关阅读