一、节点操作
1. html元素和body元素
document.documentElement来获取html元素，document.head来获取头部元素，document.body来获取body元素。
2、获取父节点
方法：元素.parentNode 得到已知节点父节点
每个节点都有一个parentNode属性，这个属性指向文档树中的父节点。对于一个节点来说，它的父节点只能是三种类型element节点，document节点，documentFragment节点，如果不存在的话，返回null。属性节点是没有父节点的。
3、获取子节点
方法：元素.childNodes 得到已知节点的所有子节点
childNodes元素身上第一层子节点，是一个类数组对象NodeList，它保存着这个节点的第一层子节点。children是一个类数组对象HTMLCollection对象，它保存的是这个节点的第一层元素子节点。父级.children获取到父级下的第一层子元素，每个子元素都有一个对应的下标，它还有一个length属性，代表着子元素的个数。childElementCount返回子元素的节点的个数，相当于children.length。firstChild第一个子节点，lastChild最后一个子节点。
4、查找节点
方法：元素.firstChild 获取第一个子节点；元素.firstElementChild获取第一个元素节点；元素.lastChild获取最后一个子节点；元素.lastElementChild 获取最后一个元素节点；
<body>
<div id="box">
<li><span>隐藏1</span></li>
<li><span>隐藏2</span></li>
<li><span>隐藏3</span></li>
</div>
<script>
var box = document.getElementById('box');
var lis = document.querySelectorAll('li');
var spans = document.querySelectorAll('span');
console.log(box.parentNode); //body
console.log(document.body.parentNode); //html
console.log(document.parentNode) / null
console.log(box.childNodes); //NodeList(7) [text, li, text, li, text, li, text]
console.log(box.children) //HTMLCollection(3) [li, li, li]
console.log(box.tagName == box.nodeName) //true tagName标签名称，只有元素节点才有这个属性
//点击隐藏父节点
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function () {
this.parentNode.style.display = 'none';
}
}
</script>
</body>
5、获取相邻节点
方法：元素.nextSibling已知节点后一个节点；元素.previousSibling已知节点前一个节点。
<body>
<div id="box">
<li><span>green</span></li>
<li><span>pink</span></li>
<li><span>blue</span></li>
<li><span>yellow</span></li>
</div>
<script>
var box = document.getElementById('box');
var lis = document.querySelectorAll('li');
var spans = document.querySelectorAll('span');
lis[2].previousElementSibling.style.background = 'pink';
console.log(lis[0].previousElementSibling) //null
//用法：父级.firstElementChild
box.firstElementChild.style.background = 'green';
box.lastElementChild.style.background = 'yellow';
</script>
</body>
元素.offsetParent获取离元素最近的有定位的父级(body是没有offsetParent)、元素.offsetLeft找到元素最左边离有定位的父级之间的距离不带单位且不带边框、元素.offsetTop找到元素最上边离有定位的父级之间的距离，不带单位，且不带边框(如果没有定位的父级，那默认是到html的距离，所以要遵循一个原则，给父级定位或者是把清除默认样式)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {margin: 0;}
.text strong {color: red;cursor: pointer;}
#tips {position: absolute;display: none;background: white;}
</style>
</head>
<body>
<div class="text">
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过<strong>HTML</strong>，<strong>CSS</strong>及<strong>JavaScript</strong>
以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
</div>
<div id="tips"></div>
<script>
var strongs=document.querySelectorAll('strong');
var tips=document.getElementById('tips');
var arr = [
'HTML称为超文本标记语言，是一种标识性的语言。',
'层叠样式表。',
'JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。'
];
for (var i = 0; i < strongs.length; i++) {
strongs[i].index = i;
strongs[i].onmouseover = function () {
tips.style.display = 'block'; //显示
tips.innerHTML = arr[this.index];
tips.style.left = this.offsetLeft + 'px';
tips.style.top = this.offsetTop + 30 + 'px';
}
strongs[i].onmouseout = function () {
tips.style.display = 'none'; //隐藏
}
}
</script>
</body>
</html>
6、创建节点
方法：document.createElement() 创造一个节点；document.createTextNode() 创建文本节点
document.createElement(tagName)通过标签名的形式来创建一个元素，这个方法接受一个参数，即要创建元素的标签名。返回创建的标签元素，需要注意的是只能用来创建元素节点，不能创建文本注释节点。createElement前面的主语只能是document。
7、添加节点
方法：parentNode.appendElement(childNode) 给一个父节点添加一个子节点；parentNode.insertBefore(childNode1,childNode2) 在某个节点前插入节点
parentNode.appendElement(childNode)方法用于向childNodes列表的末尾添加一个节点，并还回新增的节点。只能添加标签节点不能添加其它节点。
parentNode.insertBefore(newNode,referenceNode)插入节点，把newNode插入到referenceNode的前面。这两个参数要同时存在不然会报错。如果第二个参数为null或者是undefined,insertBefore的作用相当于appendChild。返回要插入的那个元素（newNode）。如果插入的节点已经是文档的一部分，那结果就是将这个节点从原来的位置转移到新的位置。
<input type="button" id="btn" value="创建元素">
<script>
var btn = document.getElementById('btn1');
btn.onclick = function () {
var p = document.createElement('p'); //创建一个p标签
p.innerHTML = '这里是一段文字';
console.log(p);//<p>这里是一段文字</p>
var appendNode = document.body.appendChild(p);//给页面添加p标签
}
</script>
<ul class="list" id="list">
<li>1</li>
<li >2</li>
<li >3</li>
</ul>
<script>
var ul = document.getElementById('list');
var li = document.createElement('li');
li.style.background='red';
ul.insertBefore(li, null);
var num = -1;
var max = ul.children.length;
function fn() {
num++;
ul.insertBefore(li, ul.getElementsByTagName('li')[num]);
if (num == max) {
num = -1;
}
if (num == 0) {
num = 1;
}
setTimeout(fn, 1000);
}
setTimeout(fn, 1000);
</script>
8、删除节点
方法：parentNode.removeChild(childNode)方法用于从父级中移除指定元素。参数为要删除的那个元素，返回被删除的那个元素。
方法：remove()删除节点，这个方法不调用父节点，直接在当前节点使用remove()方法就可以删除这个节点，无返回值。
<button id="btn">删除节点</button>
<ul>
<li >1</li>
<li >2</li>
<li >3</li>
</ul>
<script>
var ul = document.querySelector('ul');
var btn=document.getElementById('btn');
function fn(){
//获取oList中子元素的个数
var len = ul.getElementsByTagName('li').length;
//如果长度不为0
if(len){
//删除最后一个子元素
ul.removeChild(ul.getElementsByTagName('li')[len-1]);
//再次调用计时器
setTimeout(fn,1000);
}
}
btn.onclick = function(){
//1s后执行函数incrementNumber
setTimeout(fn,1000);
}
</script>
<div id="box">123</div>
<script>
//console.log(box.childNodes[0]) //'123'
console.log(box.childNodes[0].remove()) //undefined
console.log(box.childNodes[0]) //undefined
</script>
9、复制节点
方法：要克隆的节点.cloneNode(boolean)克隆一个节点。参数为true时克隆元素和元素所包含的子孙节点，false克隆元素不包含子孙节点，当没有写参数时，默认为false。返回被克隆节点。注意的是克隆只克隆html、css,js是不会克隆，如果克隆元素身上有js的功能，那克隆后的元素是不具备的。如果克隆的元素本身有id，那克隆后的元素也会有id，两个一样，这样不符合标准，我们需要手动修改id
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.getElementById('list');
ul.index = 0;
var deepList = ul.cloneNode(true);
//成功复制了子节点
console.log(deepList.children.length);//3
//但并没有复制属性
console.log(deepList.index);//undefined
var shallowList = ul.cloneNode();
//浅复制不复制子节点
console.log(shallowList.children.length);//0
</script>
10、替换节点
parentNode.replaceChild(newNode,oldNode)方法用第一个参数替换第二个参数。newNode,oldNode分别是要替换的元素，被替换的元素，这两个参数要同时出现不然会报错。如果用父级里的元素去替换另一个元素，替换的那个元素会跑到被替换的位置，被替换的那个元素会被删除。
<input type="button" id="btn" value="替换">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<script>
window.onload = function () {
var btn = document.getElementById('btn');
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
btn.onclick = function () {
ul.replaceChild(lis[3], lis[0]);
}
}
</script>
appendChild/insertBefore/replaceChild在操作一个已有的元素时，是将已有元素移动，而不是复制一份进行操作(剪切)
二、属性操作
1. 创建属性
方法：document.createAttribute() 对某个节点创建属性，还可以添加属性的值。
<div></div>
<script>
var att=document.createAttribute('id');
att.value="box";
document.getElementsByTagName('div')[0].setAttributeNode(att);
</script>
方法：元素.getAttribute(属性名)通过属性名称获取某个节点属性的值，如果参数是一个src或者是href那它取到的结果就是引号里面的值(相对地址)。它取不到js的自定义属性，但是它可以取到html标签的自定义属性。
方法：元素.setAttribute(attr,value)方法设置属性，这里面的两个参数必须同时出现，可以设置自定义属性，也可以设置系统中的属性。
方法：元素.removeAttribute(属性名)删除属性。
<div id="box" n="davina" class="color" data-v="davina" style="100px;">
<img id="pic" src="image/1.jpg" />
</div>
<script>
var box = document.getElementById('box');
var pic = document.getElementById('pic');
console.log(box.getAttribute('id')); //box
//它取不到js自定义的属性
box.index = 1;
console.log(box.getAttribute('index')); //null
//它可以取到html标签自定义属性
console.log(box.getAttribute('n')); //davina
console.log(box.dataset.v);//davina h5新增的，注意要以dat-开始
//setAttribute
box.setAttribute('id', 'box2');
//removeAttribute
box.removeAttribute('style');
console.log(box);
</script>
留言板例子
<style>
div { 300px;height: 200px; border: 1px solid black;}
</style>
<input type="text" class="text">
<input type="button" id="btn" value="提交">
<div class="box"></div>
<script>
var text = document.getElementsByClassName('text');
var btn = document.getElementById('btn');
var box = document.querySelector('div');
btn.onclick = function () {
var val = text[0].value;
//方法1：拼接字符串
//box.innerHTML+='<span>'+val+'</span>';
//方法2：用属性操作
var span = document.createElement('span');
span.innerHTML = val;
box.appendChild(span);
/*innerHTML和DOM的区别：
innerHTML:它会把原来的内容清空，然后添加新的内容，添加的时候原来的内容已经没有了，只不过是新添加的内容与原来的内容长的一样
DOM:会把新的内容追加到原来的内容里面，原来的内容所具有的事件依然会存在
内容有无js事件如果有的话用DOM*/
}
</script>