网页是一棵树

浏览器使用window.document来操作这课树

DOM-tree.png

获取元素的API

  • window.idXXX 或 idXXX
  • document.getElementById(‘id’)
  • document.getElementsByClassName(‘red’)[0]
  • document.getElementsByTagName(‘div’)[0]
  • document.querySelector(‘#idXXX’)： 直接写CSS选择器，选择第一个满足条件的元素
  • document.querySelectorAll(‘.red’)[0]： 直接写CSS选择器，选择所有满足条件的元素，使用索引选择第几个元素；node.querySelectorAll(‘.child’): 获取节点 node 下的 classname 为 child 的所有子节点
  • 工作中使用 querySelector 和 querySelectorAll
  • 需要兼容IE才用getElementsBy
  • 获取 html 元素： document.documentElement
  • 获取 head 元素： document.head
  • 获取 body 元素： document.body
  • 获取窗口（窗口不是元素）： window
  • 获取所有标签： document.all， 这是第六个falsy值

Div的原型链

div - > HTMLDivElement -> HTMLElement -> Element -> Node -> EventTarget -> Object

节点的增删改查

  • 增
  1. // 创建一个标签节点
  2. let div1 = document.createElement('div');
  3. document.createElement('style');
  4. document.createElement('script');
  5. document.createElement('li');
  7. // 创建一个文本节点
  8. let text1 = document.createTextNode('Hi!');
  10. // 在标签里插入文本
  11. div1.appendChild(text1);
  12. div1.innerText = 'Hi!'; 
  13. div1.textContent = 'Hi!';
  15. // 插入页面中
  16. // 创建的标签默认处于JS线程中
  17. // 必须把它插入 head 或 body 里才可见
  18. document.body.appendChild(div1);
  20. // 一个元素不能出现再两个地方，除非复制一份
  21. // 克隆节点
  22. var dupNode = node.cloneNode(deep); 
  23. // deep: 是否深拷贝，若为true，则所有后代节点也被拷贝，为false则只拷贝自己
  • 删
  1. // 旧方法 parentNode.removeChild(childNode)
  2. div1.parentNode.removeChild(div1)
  3. // 新方法 childNode.remove(); ie不支持
  4. div2.remove()
  • 改
  1. // 改id
  2. div1.id = 'div1';
  3. // 改 class
  4. div.className = 'red blue';
  5. div.classList.add('yellow');
  7. // 改 style
  8. div.style = 'width: 100px; color: red;';
  9. div.style.height = '100px';
  10. div.style.backgroundColor = 'white' // background-color 变成 backgroundColor
  12. // 改文本内容
  13. div1.innerText = 'Hi!'; 
  14. div1.textContent = 'Hi!';
  16. // 改 html 内容
  17. div.innerHTML = '<h1>标题1</h1>';
  19. // 改标签: 先清空再加内容
  20. div.innerHTML = '';
  21. div.appendChild(div2);
  23. // 改父节点
  24. newParent.appendChild(div);
  26. // 改事件处理函数
  27. // div.conclick 默认为null
  28. // 点击div，相当于调用 div.onclick.call(div, event)
  29. // event为点击事件对象，包含了点击事件的所有信息，如坐标
  30. div.conclick = (event) => {
  31.     console.log(this);
  32.     console.log(event);
  33. }
  • 查
  1. // 查父节点
  2. node.parentNode;
  3. node.parentElement;
  5. // 查父节点的父节点
  6. node.parentNode.parentNode;
  8. // 查子节点
  9. node.childNodes; // 会获取到文本节点
  10. node.children;
  12. // 查同辈
  13. // 先获取父节点的所有子节点
  14. // 然后再遍历排除自己
  15. node.parentNode.childNodes;  
  16. node.parentNode.child; 
  18. // 查第一个子节点
  19. node.firstChild;
  21. // 查最后一个子节点
  22. node.lastChild;
  24. // 前一个兄弟节点
  25. node.previousSibling;  // 括文本节点
  26. node.previousElementSibling; // 不包括文本节点
  28. // 后一个兄弟节点
  29. node.nextSibling;
  30. node.nextElementSibling;
  32. // 遍历一个 div 里的所有元素
  33. let travel = (node, fn) => {
  34.     fn(node);
  35.     if (node.children) {
  36.         for (let i = 0; i < node.children.length; i++) {
  37.             travel(node.children[i], fn)
  38.         }
  39.     }
  40. }
  41. travel(div1, (node) => console.log(node));
  • 读标准属性
  1. div.classList;
  2. a.href;
  3. div.getAttribute('class');
  4. a.getAttribute('href');

DOM跨线程操作