JavaScript的DOM的接口回顾

从业务中成长,从代码中感悟。
原生JS是前端的立身之本也不为过,无论后期转node, TS还是使用框架,都跳不过这个坎,必要时候,我们还是要巩固学习深化javascript

元素类

var el = document.querySelector('#box');

获取节点

  • document.getElementById(id) 通过id获取元素
  • document.getElementsByClassName(class) 通过class获取元素
  • document.getElementsByTagName(标签名) 通过元素名称获取元素
  • document.querySelector(选择器) 通过CSS选择器来获取一个元素
  • document.querySelectorAll(选择器) 通过CSS选择器来获取多个元素
  • 获取body,以下两种方式均可
document.body === document.querySelector('body'); // true

获取父子节点

  • el.childNodes 获取子节点
  • el.parentNodes 获取父节点

// Get parent node var parental= children.parentNode;

创造节点

  • document.createElement(标签名)
  • document.createTextNode(文字) 创建文字节点

操作元素内容

  • el.innerText 元素中的文字
  • el.innerHTML 元素中的HTML
  • el.appendChild(Node) 追加子元素
  • el.insertBefore(新Node,参考Node) el作为母元素,将新Node插入到参考Node的前面