DOM基础

- Dom节点

  1. 父节点 parentNode
    2. 子节点
    children - 只有元素节点
    childNodes - 所有节点=元素+文本+注释+…

常用节点类型 .nodeType

1 - document.ELEMENT_NODE
3 - document.TEXT_NODE
8 - document.COMMENT_NODE
9 - document.DOCUMENT_NODE

document 是html元素的父级

兄弟节点

1. 前一个兄弟元素节点

需要处理兼容
高版本 previousElementSibling 低版本 previousSibling
const s = s.previousElementSibling || s.previousSibling;

2. 下一个兄弟元素节点

高版本 nextElementSibling 低版本 nextSibling
const s = s.nextElementSibling || s.nextSibling;

- Dom操作

1. 创建

创建元素节点

document.createElement

创建文本节点

document.createTextNode()

创建注释节点

document.createComment
目的是 现在可能是一个占位符，将来会替换成真正的节点

创建其他标准之下的元素

document.createElementNS
如：SVG

2. 加入

添加到末尾

父.appendChild(元素)

插入到xx之前

父.insertBefore(元素， 谁的前面)

3.替换

父.replaceChild(新元素， 替换的元素)

4.删除

父.removeChild(元素)

- 文档碎片

插入多个元素 不会需要一个元素包裹
提升性能优势

  1. const box = document.getElementById('box');
  2. // 创建一个文档碎片
  3. const frag = document.createDocumentFragment();
  4. const h1 = document.createElement('h1');
  5. h1.innerText = '这是一个H1';
  6. const h2 = document.createElement('h2');
  7. h2.innerText = '这是一个H2';
  8. const h3 = document.createElement('h3');
  9. h3.innerText = '这是一个H3';
  10. frag.appendChild(h1);
  11. frag.appendChild(h2);
  12. frag.appendChild(h3);
  13. box.appendChild(frag);
  • Dom属性
    - 编译Dom节点
  1. vDom