## DOM * DOM是JavaScript操作网页的接口 * DOM将网页转变为JavaScript对象 * DOM有七种节点：document(文档)，documentType(文档类型),element(元素)，attribute(属性)，text(文本)，comment(注释)，documentFragment(文档片段) * 除了根节点，其他的节点都有三种关系，父节点，子节点，兄弟节点关系 ## DOM操作节点属性 * `Node.nodeName` 和 `Node.nodeType` 获取节点名称和节点类型，注意这边节点类型是一个数字 * `Node.nodeValue`返回字符串，但是只有Text，comment和XML文档中的CDATA节点才有文本值，其他的节点返回null * `Node.textContent`返回当前节点和后代节点的文本内容，可以读取也可以修改内容。但是要注意修改内容时，HTML标签会被解析为文本 * `Node.nextSibling`返回紧跟在当前节点的一个同级节点。如果在当前节点后又空格返回的是文本节点，只有紧紧依靠的情况下才会返回同级元素节点 * `Node.previousSibling`返回当前节点前面的距离最近的一个节点，使用方法如`Node.nextSibling` * `Node.parentNode`返回当前节点的父节点，连带着所有子节点都找到 * `Node.parentElement`与`Node.parentNode`效果相同，尽量使用`Node.parentNode` * `Node.childNodes`返回节点集合，包括文本节点在内的所有节点 * `Node.firstChild/lastChild`返回当前节点的第一个或最后一个子节点 * 总结：很多寻找节点的方法都会文档中的回车 空格等文本节点干扰，注意使用的时机。 ## DOM操作节点方法 * `Node.appendChild()`接受对象节点，将该节点插入当前节点作为最后一个节点 * `Node.hasChildNodes()`判断当前节点是否有子节点 * `Node.insertBefore()`指定位置插入子元素，参数有两个，第一个是要被插入的节点，第二个参数是当前节点的子节点 * `Node.removeChild()`接收一个当前节点的子节点，用于从当前节点中删除该子节点 * `Node.replaceChild()`用一个新的节点，替换掉当前节点的子节点。参数一是新节点，参数二是要被替换的节点 ## Element对象的相关属性和方法 * Element属性方法 * var myList = document.getElementById("myList"); * console.log(myList.id);//返回id属性值 * console.log(myList.tagName);//返回大写标签名 * console.log(myList.innerHTML);//返回所有的子节点，包括文本节点 * console.log(myList.outerHTML);//返回自身和所有的子节点 * console.log(myList.className);//返回当前节点的所有类名 * console.log(myList.classList);//返回当前节点的类名集合 * console.log(myList.classList.contains("ul"));//返回布尔值，判断当前节点中是否存在指定类名 * console.log(myList.classList.add("fontClass"));//添加指定类名，无返回值 * console.log(myList.classList.add("ulBlueClass"));//注意指定样式属性的后来居上 * console.log(myList.classList.remove("ulClass"));//删除指定类名，无返回值 * 盒子模型的属性方法 * `Element.clientHeight/clientWidth`返回元素可见部分的高度和宽度：注意包含了`padding`的值 * `Element.clientLeft/Top` 获取元素左边框、顶部边框的宽度 * 查找元素节点的一些方法 * 查找子元素 * `Element.children`获取当前节点的所有子元素节点集合，这是最常用的方法之一（注意：不包括文本节点） * `Element.childElementCount`返回当前元素的所以子元素的个数 * `Element.firstElementChild`找到当前元素的第一个子元素 * `Element.lastElementChild`找到当前元素的最后一个子元素 * `Element.querySelector()` 传入css选择器，找到第一个匹配的子元素 * `Element.querySelectorAll()`传入css选择器，找到所有匹配的子元素集合 * 查找同级元素 * `Element.nextElementSibling`找到当前元素紧随其后（下方）的同级元素 * `Element.previousElementSibling`找到当前元素之前第一个的同级元素 * 查找元素本身（集合） * `document.getElementById("")`通过id属性值找到元素本身 * `document.getElementsByTagName()`通过标签名找到元素集合 * `document.getElementsByClassName()`通过类名找到元素集合 * 查找父元素 * `Element.closest()`寻找当前元素的最近的父元素，使用css选择器来规定父元素的范围 * 删除元素 * `Element.remove()` 删除当前元素本身