HTML DOM
通过 HTML DOM，JavaScript 可访问 HTML 文档的所有元素。
选择元素
document 对象具有三种方法最常用于选择HTML元素：
//通过 id 找元素
document.getElementById(id)
//通过 类 找元素
document.getElementsByClassName(name)
//通过 标签 找元素
document.getElementsByTagName(name)1.getElementById 方法用于选择 id=“demo” 的元素并更改其内容：
<body>
<h1>下一行会变</h1>
<h2 id='here'>这里会变</h2>
<h3>上一行会变</h3>
<script>
var a = document.getElementById("here");
a.innerHTML = "Hello World";
</script>
</body>
getElementsByClassName()方法通过类名查找所有元素，并将其作为数组返回。
<div class="demo">
<span class="demo">no change</span>
</div>
<p class="demo">change</p>
<script>
var arr = document.getElementsByClassName("demo");
//访问第二个元素
arr[2].innerHTML = "to change";
</script>
getElementsByTagName 方法返回指定标签名称的所有元素,作为数组返回。
<p>1</p>
<p>2</p>
<p>3</p>
<script>
var arr = document.getElementsByTagName("p");
for (var x = 0; x < arr.length; x++) {
arr[x].innerHTML = "this";
}
</script>
DOM操作
DOM中的每个元素都有一组属性和方法element.childNodes 返回一个元素的子节点的数组。element.firstChild 返回元素的第一个子节点。element.lastChild 返回元素的最后一个子节点。element.hasChildNodes 如果元素有任何子节点，则返回 true，否则为 false 。element.nextSibling 返回相同树级别的下一个节点。element.previousSibling 返回在同一树级别的上一个节点。element.parentNode 返回元素的父节点。
<div id ="test">
<p>子节点1</p>
<p>子节点2</p>
</div>
<script>
var a = document.getElementById("test");
var arr = a.childNodes;
for(var x=0;x<arr.length;x++) {
arr[x].innerHTML = "new test";
}
</script>
改变属性
1、以更改图像的 src 属性
<img id="image" src="1.jpg">
<script>
var el = document.getElementById("myimg"); // 通过id="image"获取元素
el.src = "2.png";
</script>2、更改链接的href属性
<a href="http://www.baidu.com">百度</a>
<script>
var el = document.getElementsByTagName("a");
el[0].href = "";
el[0].innerHTML =
</script>改变样式
可以使用元素的 style 对象来访问所有样式属性。
<div id="test" style="width:200px">change style</div>
<script>
var x = document.getElementById("test");
x.style.color = "#ff00ff";
x.style.width = "100px";
</script>
添加元素
element.cloneNode()克隆元素并返回结果节点。document.createElement(element)创建一个新的元素节点。document.createTextNode(text)创建一个新的文本节点。element.appendChild(newNode)将一个新的子节点添加到元素作为最后一个子节点。element.insertBefore(node1, node2)在节点2之前插入node1作为子节点。
<div id ="test">第一段</div>
<script>
//创建一个新的段落
var p = document.createElement("p");
var node = document.createTextNode("添加的内容");
//添加文本到段落
p.appendChild(node);
var div = document.getElementById("test");
//将段落添加到div中
div.appendChild(p);
</script>
移除元素
要删除HTML元素，选择元素的父项并使用 removeChild(node)方法
<div id="test">
<p id="p1">被移除的段</p>
<p id="p2">留下的段落</p>
</div>
<script>
var parent = document.getElementById("test");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>另一种方法是使用 parentNode 属性来获取要删除的元素的父项
<div id="test">
<p id="p1">被移除的段</p>
<p id="p2">留下的段落</p>
</div>
<script>
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
</script>
替换元素
要替换HTML元素，使用 element.replaceChild(newNode,oldNode) 方法
<div id="test">
<p id="p1">AAA</p>
<p id="p2">BBB</p>
</div>
<script>
var p = document.createElement("p");
var node = document.createTextNode("CCC");
p.appendChild(node);
var parent = document.getElementById("test");
var child = document.getElementById("p1");
parent.replaceChild(p, child);
</script>
