什么是DOM？
Document Object Model（文档对象模型） DOM是针对HTML和XML文档的一个API（Application Programming Interface应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。 HTML DOM 定义了访问和操作HTML文档的标准方法。 要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。 我们可以通过JavaScript操作DOM，可以对节点实现增删改查操作，可以动态添加标签，属性等。
1、DOM获取元素和节点
1）根据id获取元素
document.getElementById()
var div1=document.getElementById('div1'); // 获取id是div1的元素
2）根据标签名获取标签列表
document.getElementsByTagName()
var div1=document.getElementsByTagName('div'); // 获取标签名是div的元素
3）根据Name属性获取标签列表
document.getElementsByName()
var inp=document.getElementsByName('inp');
4）根据Class名获取标签列表
document.getElementsByClassName()
var div1=document.getElementsByClassName('div1'); // 获取class是div1的元素
5）根据选择器获取到第一个找到的元素
document.querySelector()
var div1=document.querySelector('.div1'); // 获取class是div1的元素
var div2=document.querySelector('#div2'); // 获取id是div2的元素
var div0=document.querySelector("#diva>.div0"); 找到id为diva的元素下的第一个calss名为div0的元素
var ps=document.querySelector("[name=password]"); 找到body下第一个name名为password的元素
6）根据选择器获取所有标签名的元素
document.querySelectorAll()
var div2=document.querySelectorAll('div'); // 获取标签名是div的全部元素
2、nodeNam节点名，nodeValue节点值，nodeType节点类型
1）获取子节点
「子节点：文本、注释、document、标签」
「子元素：就是标签」
// 获取body的子节点
console.log(document.body.childNodes);
2）nodeValue节点值
// 如果是文本就显示文本内容
console.log(document.body.childNodes[0].nodeValue);
// 如果是标签元素nodeValue是null
console.log(document.body.childNodes[1].nodeValue);
// 如果是注释，nodeValue就是注释内容
console.log(document.body.childNodes[3].nodeValue);
3)nodeNam节点名
// 文本节点的 nodeName 永远是 #text
console.log(document.body.childNodes[0].nodeName);
// 元素节点的 nodeName 是标签名称
console.log(document.body.childNodes[1].nodeName);
// 注释节点的 nodeName 永远是 #comment
console.log(document.body.childNodes[3].nodeName);
4)nodeTyp节点类型
console.log(document.body.childNodes[0].nodeType);
console.log(document.body.childNodes[1].nodeType);
console.log(document.body.childNodes[3].nodeType);
「nodeType（节点类型）
元素---1
属性---2
文本---3
注释---8
文档---9」
3、Dom获取节点
1）子节点
console.log(document.body.childNodes) // childNodes 所有子节点，获取所有子节点（包括注释）
console.log(document.body.children) // children 所有是标签类型的子节点，获取所有子元素
2）父节点
var p1=document.querySelector('.p1')
console.log(p1.parentNode) // 获取已知节点的父节点
console.log(p1.parentElement) // 父元素
3)第一个子节点
var div1=document.querySelector('.div1')
console.log(div1.firstElementChild) // 第一个子节点 （元素）
console.log(div1.firstChild) // 第一个子节点
「用firstChild标签之间回车产生的距离也是一个空白文本节点，所以显示#text」
4）最后一个子节点
var div1=document.querySelector('.div1')
console.log(div1.lastElementChild) // 最后一个子节点（元素）
console.log(div1.lastChild) // 最后一个子节点
「元素之间回车产生的距离也是一个空白文本节点，所以显示#text」
5）下一个兄弟节点
var div1=document.querySelector('.div1')
console.log(div1.nextElementSibling)
console.log(div1.nextSibling)
「元素之间回车产生的距离也是一个空白文本节点，所以显示#text」
6）上一个兄弟节点
var div2=document.querySelector('.div2')
console.log(div2.previousElementSibling) // 上一个兄弟元素
console.log(div2.previousSibling.previousSibling) // 上一个兄弟节点
「上面两个方法也可以像这里直接写两次，或写代码时避免回车」
4、元素操作、创建内容
1）textContent给元素里面写入文本
var div2=document.querySelector('.div2')
div2.textContent='我好帅啊'
「可以在控制台或则页面上看到元素里面增加了内容」
2）根据标签名创建标签元素
document.createElement(标签名) // 根据标签名创建标签元素
3）将子元素插入在父容器的尾部
父容器.appendChild(子元素); 将子元素插入在父容器的尾部
4）插入
「父容器.insertBefore(要插入的元素，插入在谁的前面)」
div.insertBefore(span,div.firstElementChild); //div.firstElementChild为div下的第一个元素
div.parentElement.insertBefore(span,div.nextElementSibling); //div.nextElementSibling为div下一个兄弟元素
5）给ul创建若干子元素
var ul = document.createElement("ul");
for (var i = 0; i < 10; i++) {
var li = document.createElement("li");
li.textContent = i;
ul.appendChild(li);
document.body.appendChild(ul);
}
6）插入内容
var div=document.createElement("div");
document.body.appendChild(div);
div.textContent="你好";
var span=document.createElement("span");
div.appendChild(span); // append 追加
// div.firstChild为div的第一个子节点
div.insertBefore(span,div.firstChild);
7）createDocumentFragment创建一个碎片容器，做临时储存用
var frag=document.createDocumentFragment();
for(var i=0;i<5;i++){
var div=document.createElement("div");
frag.appendChild(div);
}
document.body.appendChild(frag);
5、元素复制、删除、替换
1）复制：元素.cloneNode(深度布尔值)
// false 浅复制，仅复制元素，不复制内容和子元素
var div1=div.cloneNode(false);
// true 深复制，可以将元素和元素里面的内容及子元素都复制进去
var div2=div.cloneNode(true);
2）删除：元素.remove(); 元素自身删除
「元素自身删除并非真正删除了，元素只不过不显示了，但还存在，这时需要设置div=null;来彻底删除元素」
div.remove(); // 指从DOM树上删除
父容器.removeChild(子元素); // 父容器删除子元素
3）替换：父容器.replaceChild(新的元素，要替换的元素);
document.body.replaceChild(div,ul);
6、标签属性
「任何一个DOM元素，有两种属性，一个是对象属性，一个是标签属性」
「把写在标签上的属性称为标签属性」
「任何一个DOM元素都是对象模型，都可以自主的添加设置对象的属性和值」
1）设置标签属性
「属性名的命名不能使用驼峰式命名，通常命名时使用-区分两个单词:toggle-target」
「属性值不能出现大写，并且必须是字符串」
元素.setAttribute(属性名,属性值);
div.setAttribute("abc","20"); // 设置标签属性以后，可以用于多种数据使用，可以用于获取标签元素等操作
2）获取标签属性值
元素.getAttribute(属性名)
console.log(div.getAttribute("abc"));
3）删除标签属性
元素.removeAttribute(属性名);
div.removeAttribute("title");
4）所有的标签单属性值和属性名相同
「如input的checked标签，当标签单属性值和属性名相同可以不写，但是要写空字符串」
var ck=document.querySelector("input");
ck.setAttribute("checked","checked");
ck.setAttribute("checked","");
「标签属性和对象属性是两套系统」
「标签系统一般用于展现，对象数据一般用于数据的存储和设置」
7、对象属性
1）当遇到标签属性值和对象属性值冲突时，以对象属性值为准
示例input
var ck=document.querySelector("input");
ck.setAttribute("checked","");
ck.checked=false; // 对象
2）所有标签属性并不是都有对应的对象属性
var ck=document.querySelector("input");
ck.setAttribute("abc","10");
console.log(ck.abc);
3）class是一个特殊的存在，他的对象名是className
var div=document.querySelector("div");
div.setAttribute("class","div123");
console.log(div.className);
div.className="divsss";更改class名
8、标签样式
console.log(div.style.width); // 这个只能获取css的行内样式，这种方法将无法取到css树的样式
1）获取样式 getComputedStyle(元素)
getComputedStyle(元素)；
会自动将元素与对应的css混合形成这个元素的渲染树对象，
然后通过这个渲染树对象取出对应的属性这个方法属于window的方法
注意：getComputedStyle具有兼容问题 火狐和谷歌都是兼容，IE8及以下不兼容
IE任何版本都支持的写法：console.log(div.currentStyle.width);
2）设置css样式
「style属性可以设置字符串的方式增加行内属性」
var div=document.querySelector("div");
div.style="width:50px;height:50px;background-color:red;";
「style属性也是设置对象属性设置方式，修改行数样式属性」
var div=document.querySelector("div");
div.style.width="50px";
div.style.height="50px";
div.style.backgroundColor="red";
