一、DOM（文档对象模型）
DOM对象方法.png
1、nodeValue 属性（规定节点的值）
①元素节点的 nodeValue 是 undefined 或 null
②属性节点的 nodeValue 是属性值
③文本节点的 nodeValue 是文本本身
<p id="test">hello world</p>
<script>
var test = document.getElementById("test");
console.log(test.firstChild.nodeValue);
</script>
2、nodeType 属性（返回节点的类型）
①元素（标签）节点返回的类型type------------1
②属性（ID）节点返回的类型type---------------2
③文本（文字）节点返回的类型type------------3
<p id="test">hello world</p>
<script>
var p = document.getElementById("test");
var attr=p.getAttributeNode("id");
console.log(attr.nodeType);
</script>
3、获取元素的值（childNodes）
<p id="text">
我是谁
<a href="">hello</a>
good
</p>
<script>
// .firstChild 获取第一个节点
// .firstElementChild 获取第一个元素节点
// .lastChild 获取最后一个节点
// .lastElementChild 获取最后一个元素节点
var p=document.getElementById("text");
console.log(p.childNodes[0].nodeType);
</script>
4、创建新的 HTML 元素（createElement / createTextNode / appendChild）
<div id="parent">
good
</div>
<script>
var parent = document.getElementById("parent");
var p = document.createElement("p");
var text = document.createTextNode("hello world");
p.appendChild(text);
console.log(p);
parent.appendChild(p);
</script>
5、添加新的 HTML 元素 - insertBefore(新的节点newChild，参照节点refChild)
如果要添加HTML 元素，必须清楚该元素的父元素：（this.parentNode：当前对象的父节点）
<div id="div">
<p>first</p>
<!--<p>hello world</p>-->
<p id="one">good</p>
</div>
<script>
var div = document.getElementById("div");
var one = document.getElementById("one");
/*1.生成p标签*/
var p = document.createElement("p");
var txt = document.createTextNode("hello world");
p.appendChild(txt);
console.log(p);
div.insertBefore(p,one)
</script>
6、删除已有的 HTML 元素（removeChild）
如果要删除 HTML 元素，必须清楚该元素的父元素：（this.parentNode：当前对象的父节点）
<p>hello world</p>
<p id="del">删除我</p>
<button id="btn">btn</button>
<script>
var btn = document.getElementById("btn");
var del = document.getElementById("del");
btn.onclick = function(){
this.parentNode.removeChild(del);
};
</script>
7、替换 HTML 元素（replaceChild）
如果要替换 HTML 元素，必须清楚该元素的父元素：（this.parentNode：当前对象的父节点）
<p>hello world</p>
<a id="one" href="#">baidu</a> <br/>
<!--<span>我替换你</span>-->
<button id="btn">btn</button>
<script>
var btn = document.getElementById("btn");
var span = document.createElement("span");
var txt = document.createTextNode("我替换你");
var one = document.getElementById("one");
span.appendChild(txt);
btn.onclick=function(){
this.parentNode.replaceChild(span,one);
}
</script>
