1.概念
文档对象模型，定义了访问和操作文档的模型
DOM操作：对元素进行获取，创建，删除的操作
2.元素对象的获取
document.getElementById(Id值)
document.getElementsByTagName(标签名)
document.getElementsByName(name值)
document.getElementsByClassName(class值)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
onload = function(){
btnObj = document.getElementById("btn");
btnObj.onclick = function(){
this.style.background = "red";
}
pObjs = document.getElementsByTagName("p");
for(var i =0;i<pObjs.length - 1;i++){
pObjs[i].onmousover = function(){
this.style.color = "red";
}
}
}
</script>
</head>
<body>
<button id="btn">按钮</button>
<hr />
<p>11111</p>
<p>22222</p>
<p>3333</p>
</body>
</html>
3.元素的创建、添加
createElement():创建元素节点
appendChild():向标签内末尾添加新的子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
onload = function() {
books = new Array(4);
books[0] = new Array("宋江", "武松", "李逵", "吴俊逸");
books[1] = new Array("小乔", "周瑜", "张飞", "庞统");
books[2] = new Array("薛宝钗", "贾母", "王熙凤", "刘姥姥");
books[3] = new Array("孙悟空", "白龙马", "沙僧", "猪八戒");
}
function select(index) {
var persons = books[index];
var per = document.getElementById("per");
per.innerHTML = "<option>请选择人物</option>";
for(var i = 0; i < persons.length ; i++) {
var person = persons[i];
//创建option元素
var option = document.createElement("option");
//创建文本节点，并将每一个人名（小数组中的元素）发明合法好文本节点中
var textNode = document.createTextNode(person);
//将文本节点放入到option中
option.appendChild(textNode);
per.appendChild(option);
}
}
</script>
</head>
<body>
<select onchange="select(this.value)">
<option>请选择书籍</option>
<option value="0">水浒</option>
<option value="1">三国</option>
<option value="2">红楼梦</option>
<option value="3">西游记</option>
</select>
<select id="per">
<option>请选择人物</option>
<option></option>
</select>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="button" onmovestart="添加"/>
</div>
<table border="1" style="margin-top: 50px;" cellspacing="0">
<tr>
<td>编号</td>
<td>商品名</td>
<td>价格</td>
<td>
<button>操作</button>
</td>
</tr>
<tr>
<td>10086</td>
<td>卡萨帝</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr>
<td>89757</td>
<td>P40</td>
<td>7000</td>
<td>
<button>删除</button>
</td>
</tr>
</table>
</body>
</html>