1. DOM文档对象模型，对象：document
2. 选择器
2.1元素节点选择器(只有元素节点)
2.1.1直接选择器
①d选择器：document.getElementById("id名")（返回单个对象）
②class选择器：document.getElementsByClassName("class名")（返回值是数组，数组里面是获取到的元素对象）
③tag选择器：document.getElementsByTagName("tag名")（返回值是数组，数组里面是获取到的元素对象）
④name选择器：document.getElementsByName("name名")（返回值是数组，数组里面是获取到的元素对象）
⑤ES5新增选择器：
querySelector选择器：document.querySelector("css选择器")（单个对象）
querySelectorAll选择器：document.querySelectorAll("css选择器")（返回值是数组，数组里面是获取到的元素对象）
2.1.2关系选择器：先有基准元素
2.1.2.1父子关系：
①父选子：先拿到父
步骤1：父选子：先拿到父
var olist = document.querySelector(".list");
步骤2：第一个子：olist.firstElementChild
最后一个子：olist.lastElementChild
所有子：olist.children;
其他的子：olist.children[索引];
② 子选父：先拿到子
步骤1：子选父：先拿到:子
var oEm = document.getElementsByTagName("em")[0];
步骤2：直接拿到所属子集的唯一父集：oEm.parentNode;
2.1.2.2兄弟关系：
步骤1： 先选择当前
var olist = document.querySelector(".list");
步骤2： 上一个：olist.previousElementSibling;
下一个：olist.nextElementSibling;
2.2节点选择器：
2.2.1元素，注释，文本，参与了父子或兄弟关系（利用关系选择）：
①父元素节点.childNodes（父子）
②当前元素.previousSibling（兄弟）
③当前元素.nextSibling（兄弟）
2.2.2属性，没有参与这种家族关系（单独选择器）：
①当前元素.attributes
3.节点的过滤属性
| nodeType | nodeName | nodeValue | |
| 元素 | 1 | 大写标签名 | null |
| 文本 | 3 | #text | 文本内容 |
| 注释 | 8 | #comment | 注释内容 |
| 属性 | 2 | 属性名 | 属性值 |
| 根元素 | 9 | document | null |
补：节点选择器和节点的过滤属性，一般只用来做选择或过滤，不用来做修改等操作，有单独的操作方法
4. 操作：增删改查
4.1属性操作
4.1.1可见属性：
内置：只要是系统提供的，在标签身上直接写的，还具有功能，就是内置的可见属性
- 对象操作：1点语法；2中括号语法
- 也可以使用：getAttribute、setAttribute、removeAttribute
- 特殊的属性：
- class：要使用className操作
- style：样式，值是个对象
非内置：在标签身上直接写的，但是不具有默认功能，就是自定义的可见属性
- 元素.getAttribute("要获取的属性名")
- 元素.setAttribute("要设置的属性名","属性值")
- 元素.removeAttribute("要删除的属性名")
4.1.2不可见属性
内置：不用写在标签身上，系统提供，具有功能
方法：innerHTML（获取标签内容、可以解析标签）、firstElementChild（获取第一个子元素节点）、lastElementChild（获取最后一个子元素节点）children（获取子元素节点）、firstChild（获取第一个子节点）、lastChild（获取最后一个子节点）childNodes（获取子节点）、innerText（获取标签中文本内容、不可以解析标签）、tagName（获取大写标签名称、只能获取，不能修改）
对象操作：1点语法；2中括号语法
非内置：放飞自我，看不见的自定义属性，其实就是将元素，作为一个对象数据，进行操作
- 元素是个对象，对象可以用来存储数据，多存储一些
- 对象操作
4.2样式操作
4.2.1设置
4.2.1.1在js中设置的样式，都是行内样式；
4.2.1.2方式：
- 可见的内置属性（html的属性）：style
4.2.1.3 注意：
1.不允许出现中划线，改成小驼峰式
obox.style.fontSize = "100px";
2.样式的值，一般都是字符，某些属性可以写成数值
obox.style.opacity = "0.5";
3.样式中行高的设置，加不加单位，是不同的样式
obox.style.lineHeight = "20px";
obox.style.lineHeight = "20";
// 4.style可以直接设置某个css，也可以通过cssText设置多个css，没有设置部分，为空
obox.style.cssText = "100px;height:100px;"
// 5.注意css中的复合属性，如果只设置一部分，其他会被清空
obox.style.background = "red";
4.2.2获取
4.2.2.1行内：
- 可见的内置属性（html的属性）：style
- 不能获取非行内
4.2.2.2非行内：
- 使用内置方法：getComputedStyle
- 可以获取非行内，也能获取行内，返回值是一个对象。
- 有兼容
function getStyle(要获取的元素,布尔值（是否获取伪类，T：是；F：否）){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele, false)[attr];
}
}
4.2.3使用习惯：
- 设置样式：使用style属性
- 获取样式：使用getComputedStyle及其兼容
4.3 元素操作：
4.3.1增：创建，通过js创建标签
步骤1：创建：var p = document.createElement("p");
步骤2：插入到指定元素的后面：obox.appendChild(p);
步骤3:：插入到指定的元素的前面
obox.insertBefore(新元素,基准元素)
obox.insertBefore(p,span)
注： 一次创建只能得到一个元素，不会随着多次插入，出现多个元素
4.3.2删：
- 要删除的元素.remove()
- 父元素.removeChild(要删除的子元素)
- 一次只能删一条，不能删多个，循环遍历
4.3.3 改：获取或设置标签的全部内容，包括标签自身： outerHTML
4.3.4 查：选择器就是查询（获取）元素（选择器）
补充：
①创建文本节点：var ot = document.createTextNode("文字");
②obj.cloneNode()：克隆obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆
③obj.replaceChild(新添加的节点 , 被替换的节点)：替换子节点
④尺寸类信息的快捷获取方法：
obox.clientHeight // cont + padding
obox.clientWidth // cont + padding
obox.offsetHeight // cont + padding + border
obox.offsetWidth // cont + padding + border
obox.scrollHeight // cont + padding + 可以滚动的距离
obox.scrollWidth // cont + padding + 可以滚动的距离
obox.offsetLeft // margin + position
obox.offsetTop // margin + position
obox.scrollTop //滚动条距离顶部的距离
obox.scrollLeft //滚动条距离左边的距离