2020 原生JS - DOM操作

DOM 选择器

 // 1. 通过ID获取
document.getElementById('id') // 必须传参数，参数是string类型，是获取元素的id,返回值只获取到一个元素，没有找到返回null
// 2. 通过name属性
document.getElementsByName('name')  // 必须传参数，参数是是获取元素的name属性, 返回值是一个类数组，没有找到返回空数组
// 3. 通过标签名
document.getElementsByTagName('div')  // 参数是是获取元素的标签名属性，不区分大小写, 返回值是一个类数组，没有找到返回空数组
// 4. 通过类名
document.getElementsByClassName('className')  // 参数是元素的类名,返回值是一个类数组，没有找到返回空数组
// 5 通过选择器获取一个元素
document.querySelector('id class 等等') // 参数是选择器，如：”div .className”,返回值只获取到第一个元素
// 6. 通过选择器获取一组元素
document.querySelector('css选择器') // 参数是选择器，如：”div .className”,返回值是一个类数组
// 7.获取html的方法（document.documentElement）
document.documentElement // 是专门获取html这个标签的
// 8. 获取body的方法（document.body）
document.body是专门获取body这个标签的。

nodeType

nodeType == 1 表示的是元素节点（标签） 记住：元素就是标签。

nodeType == 2 表示是属性节点 

nodeType == 3 是文本节点 

DOM操作

1. 新增

var div = document.createElement("div");

2. 插入

 父节点.appendChild(新的子节点);  // 父节点的最后插入一个新的子节点
 父节点.insertBefore(新的子节点,作为参考的子节点); // 在参考节点前插入一个新的节点如果参考节点为null，那么他将在父节点最后插入一个子节点