1.innerText和innerHTML的区别
document.getElementByTagName(" ").innerText = "元素中显示的文本内容"；
document.getElementByTagName(" ").innerHTML = "如果含有元素标签，则标签进入dom树"；
具体如下：
<p>我是段落</p>
<script>
var el = document.getElementByTagName("p");
el.innerText = "<span>我是innerText</span>"；//el：<p><span>我是innerText</span></p> //文本内容：<span>我是innerText</span>
el.innerHTML= "<span>我是innerHTML</span>"；//el：<p><span>我是innerText</span></p> //为文本增加了p标签，文本内容：我是innerHTML
</script>
2.节点访问及Dom操作
以下面小段html为例：
<div id = "mydiv">
<p id= "p1">我是第一个段落</p>
<p class = "p2">我是第二个段落</p>
</div>
节点访问
（1）getElementById() 方法返回带有指定 ID 的元素：
var element = document.getElementById("mydiv");
（2）getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点（以数组形式输出）：
var element = getElementsByTagName("p");
（3）getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表:
var element = getElementsByClassName("p1") ;
DOM操作
（1）修改html的内容
<script type = "text/javascript">
var el = document.getElementById("p1");//获取id为p1的元素
el.innerHTML="New text!";；//将该元素的内容改为New text!
</script>
（2）修改html的属性
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";//改变图片地址
document.getElementById("image").setAttribute('class','pic');//增加class="pic"
</script>
（3）添加新元素
在父元素末尾添加孩子节点（appendChild）
<div class="d1">
</div>
<script>
var para=document.createElement("p");
para.innerHtml="我是新添加的段落";
var element=document.getElementsByClassName("d1");
element.appendChild(para);//增加为最后一个子孩子
</script>
//增加之后DOM元素如下
<div class = "dl">
<p>我是新添加的段落</p>
</div>
在兄弟节点前添加节点（insertBefore）
<script>
var para2=document.createElement("div");
para2.innerHtml="我是新添加的div";
var element=document.document.getElementsByTagName("p") ,
parent=document.getElementsByClassName("d1");
parent.insertBefore(para2,element);//在p元素前增加一个div
parent.removeChild("p");//删除元素p
</script>
//增加之后DOM元素如下
<div class = "dl">
<div>我是新添加的div</div>
<p>我是新添加的段落</p>
</div>
//删除之后
<div class = "dl">
<div>我是新添加的div</div>
<p>我是新添加的段落</p>
</div>
（4）改变元素样式
<p id="p1">我是段落，要变色</p>
<button>变色</button>
<script>
document.getElementsByTagName('button')[0].onclick=function(){
document.getElementById('p1').style.color="red";
}
</script>
（5）替换元素
replaceChild
var btn1 = document.getElementById("btn1");//获取旧按钮
var btn3 = document.createElement("button");//创建新按钮
btn3.id = "btn3"; //<button id="btn3">新按钮</button>
btn3.innerText = "新按钮";
c1.replaceChild(btn3, btn1);
