一. 操作dom节点元素
1. 属性获取节点元素
（1）firstChild和firstElementChild、lastChild和firstElementChild、nextSibling和nextElementSibling、childNodes和children。
firstChild是子代第一个节点（包含文本节点）, firstElementChild是子代第一个元素;lastChild是子代最后一个节点（包含文本节点）, lastElementChild
子代最后一个元素；childNodes获取所有的子代节点(包含文本节点)，children获取所有的子代元素。
<body>
<div id="node">节点<span>元素</span></div>
节点
<div>元素</div>
</body>
//child和elementChild区别证明
<script>
(function() {
var node = document.getElementById(‘node‘);
console.log(node.firstChild) //"node"
console.log(node.firstElementChild) //<span>元素</span>
})()
</script>
//childNodes和children区别
<scirpt>
(function(){
var node = document.getElementById("node");
console.log(node.childNodes);//["节点", "<div>元素</div>"]
console.log(node.children);//["<div>元素</div>"]
})()
</script>
（2）parentnode和parentElement/offsetParent
- offsetParent是位置上的父级元素，parentElement是父级元素，parentNode是父级节点元素。
- 三者在很大程度上是可以划等号的，但是也有特殊情况，如下：
console.log(document.body.offsetParent)//null
console.log(document.body.parentElement) //html
console.log(document.body.parentElement.parentElement) //null
console.log(document.body.parentNode.parentNode); //document
offsetParent最高层是body， parentElement最高层是html，parentNode最高层是document。从一个角度说明，在一个document中，从位置上来说，最高层是body；从元素上来说，始祖元素是html；从节点上来说，document是起始点。
(3) closest 获取祖先级元素
<body id="wrapper">
<div id="inner">
<input type="button" value="点击" id="clibtn"/>
</div>
</body>
<script>
(function(){
var cliBtn = document.getElementById("clibtn");
cliBtn.onclick = function() {
console.log(this.closest("#inner")) //<div id="inner"></div>
console.log(this.closest("#wrapper")) //<body id="wrapper"></body>
}
})()
</script>
2.方法获取元素节点
getElementById、getElementByClassName、getElementByTagName、querySelector、querySelectorAll。
<body>
<div id="wrapper">
<ul class="list">
<li class="item"></li>
<li class="item"></li>
<li class="item list"></li>
</ul>
</div>
</body>
<sctipt>
var wrapper = document.getElementById("wrapper");
var liList = document.getElementByTagName("li");
var itemList = document.getElementByClassName("item");
var list = document.querySelector(".list") //<ul class="list">...</ul>
var list = document.querySelectorAll("list") //[ul.list, li.list]
</script>
3. 删除dom元素
remove() 和 removeChild()
<body>
<div id="wrapper">
<span id="inner">11111</span>
</div>
</body>
<script>
var wrapper = document.getElementById("wrappper");
var inner = document.getElementById("inner");
wrapper.removeChild(inner); //删除子代元素span
wrapper.remove() //删除自身
</script>
4. 取代元素
<body>
<div id="wrapper">
<span id="inner">内部</span>
</div>
</body>
<script>
var wrapper = document.getElementById("wrapper");
var inner = document.getElemrntById("inner");
var newEle = document.createElement("em");
newEle.innerHTML = ‘我们的承诺‘;
wrapper.replaceChild(newEle, inner); // inner将被新创建的em元素替换
</script>
5. 创建元素
createElement和createText
<body> <div id="wrapper"> <span id="inner">内部</span> </div> </body> <script> var wrapper = document.getElementById("wrapper"); var inner = document.getElemrntById("inner"); var newEle = document.createElement("em"); //创建元素节点
var textNode = document.createTextNode("我们的承诺");//创建文本节点 newEle.innerHTML = textNode; wrapper.replaceChild(newEle, inner); // inner将被新创建的em元素替换 </script>
6.元素插入
<body> <div id="wrapper"> <span id="inner">内部</span> </div> </body> <script> var wrapper = document.getElementById("wrapper"); var inner = document.getElemrntById("inner"); var newEle = document.createElement("em"); newEle.innerHTML = ‘我们的承诺‘; inner.innerBefore(newEle); // inner前面插入新元素
wrapper.appendChild(newEle); 在wrapper最后子代元素后面添加新元素
wrapper.insertAdjacentElement(newEle); </script>
二、操作dom的属性
1. 获取属性
<body>
<div id="wrapper" class="class-wrapper">
<div id="inner">
操作dom属性的方法
</div>
</div>
</body>
<script>
var wrapper = document.getElementById("wrapper");
wrapper.getAttribute("class"); //class-wrapper
wrapper.getAttributeNode("class"); //class="class-wrapper"
wrapper.getAttributeName() //["id", "class"]
</script>
2. 删除属性值
<body>
<div id="wrapper" class="class-wrapper">
<div id="inner">
删除DOM属性
</div>
</div>
</body>
<script>
var wrapper = doucment.getElementById("wrapper");
wrapper.removeAttribute("class");
wrapper.removeAttributeNode("class");
</script>
3.设置属性值
<body>
<div id="wrapper" class="class-wrapper">
设置属性值
</div> </body>
<script>
var wrapper = document.getElementById("wrapper");
wrapper.setAttribute(‘name‘, ‘attributeName‘)
</script>
