一、选取父级、子级元素
<div id='father' style=" 200px;height: 200px;"> <div id='son' style=" 100px;height: 100px;"></div> </div>
1、ParentNode（选取父级元素）
语法：子元素.parentNode;
<script> son.parentNode.style.backgroundColor ="yellow"; son.style.backgroundColor="red"; </script>
2、Children （选取子级元素）
语法：父元素.children；获取到的是一个伪数组。使用的时候需要加上下标，指定子元素。
<script> father.children[0].style.backgroundColor="black"; </script>
二、元素的增删改
1、creatElement（生成元素）
<script>
var oInput = document.createElement('input');
//在内存中生成这个元素
oInput.type= "button";
oInput.value="这是一个按钮";
//给这个元素赋上属性
document.body.appendChild(oInput);
//在body尾部插入我们定义好的oInput
</script>
2、appendChild（尾部插入元素）
语法：父级元素.appendChild(需要插入的子元素)
document.body.appendChild(oInput);
3、insertBefore（指定位置插入元素）
语法：父级元素.insertBefore（需要插入的元素，插在哪个元素前边）
document.body.insertBefore(oInput,div1);
4、replaceChild（替换元素）
语法：父级元素.replaceChild（需要替换的元素，被替换的元素）
document.body.replaceChild(oInput,div1);
5、removeChild（删除元素）
语法：父级元素.replaceChild（要删除的子元素）
document.body.removeChild(div1);
需要注意的是，removeChi如果想要删除自身元素并且不知道父元素，可以用parentNode选取父元素后再选择自己。
div1.parentNode.removeChild(div1);
6、innerHTML（获取父级元素底下的全部标签）
语法：父级元素.innerHTML
console.log(div1.innerHTML); //获取div1下面的所有便签
需要注意的是，修改innerHTML时，会将原有的元素清空，再重新赋值一遍，原有的元素绑定的事件将不再生效。
<div id="div1"> <div id="div2"> 12321 </div> </div>
<script> div2.onclick = function(){
//div2是div原有的子元素 alert("onclick"); } div1.innerHTML += `<span>新的span标签</span>`;
//此时div2的onclick事件失效 </script>
三、修改元素的属性
1、setAttribute（设置元素属性）
语法：元素.setAttribute（'属性'，'值'）
div1.setAttribute('name','divName');
2、getAttribute(获取元素属性)
console.log(div1.getAttribute('id'));
//控制台打印div1的id值，一般常见的属性可以不用getAttribute就直接获取
3、removeAttribute（删除元素属性）
语法：元素.removeAttribute('属性')
div1.removeAttribute('id');
4、hasAttribute（检测元素属性）
语法：元素.hasAttribute('属性')，如果有这个属性，返回true，没有返回false
console.log(div1.hasAttribute('id'));
四、操作元素的Class
1、className（获取类）
语法：元素.className，如果给它赋值就会覆盖原本的class，不赋值的话，它会返回元素class属性的值。
console.log(div1.className);
2.classList（类列表）
语法：
1、元素.classList.add('类名')
div1.classList.add('box1');//添加一个类
2、元素.classList.remove('类名')
div1.classList.remove('box1');//删除一个类
3、元素.classList.contains('类名')
div1.classList.contains('box1');//检测类列表中有没有指定的类，有返回true，没有返回false
4、元素.classList.toggle('类名')
div1.classList.toggle('box1');//切换一个类，有就删除，没有就添加。