什么是HTML DOM
DOM作为JavaScript四大组成之一，它的作用是极其重要的。DOM全称为Document Object Model 及文档对象模型。我所介绍的是dom标准中的HTML DOM-针对HTML文档。HTML DOM是：
- HTML的标准对象模型
- HTML的标准编程接口
- W3C标准
HTML DOM定义了所以的HTML元素的对象和属性，以及它们的访问方法。换句话说，HTML DOM就是关于如何获取、修改、添加、删除（增删改查）HTML元素的标准。
HTML DOM节点
根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个HTML元素是元素节点
- HTML元素内的文本是文本节点
- 每个HTML属性是属性节点
- 注释为注释节点
说到HTML DOM节点，HTML DOM Tree图很好地向我们展示HTML节点以及它们之间的关系。
通过该模型，开发者可以通过编程语言（JavaScript）访问各节点。节点树中的节点彼此拥有层级关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
HTML DOM方法
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
以下为dom一些常用的方法(参考w3c官方文档，具体使用不详细介绍）：
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
</style>
<script type="text/javascript">
window.onload = function() {
//创建一个"斗罗大陆"节点,添加到#animation下
myClick("btn01",function(){
//创建斗罗大陆节点 <li>斗罗大陆</li>
//创建li元素节点
/*
* document.createElement()
* 可以用于创建一个元素节点对象，
* 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
* 并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//创建斗罗大陆文本节点
/*
* document.createTextNode()
* 可以用来创建一个文本节点对象
* 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
var dlText = document.createTextNode("斗罗大陆");
//将dlText设置li的子节点
/*
* appendChild()
* - 向一个父节点中添加一个新的子节点
* - 用法：父节点.appendChild(子节点);
*/
li.appendChild(dlText);
//获取id为animation的节点
var animation = document.getElementById("animation");
//将斗罗大陆添加到animation下
animation.appendChild(li);
});
//将"斗罗大陆"节点插入到#yw前面
myClick("btn02",function(){
//创建一个斗罗大陆
var li = document.createElement("li");
var dlText = document.createTextNode("斗罗大陆");
li.appendChild(dlText);
//获取id为yw的节点
var yw = document.getElementById("yw");
//获取animation
var animation = document.getElementById("animation");
/*
* insertBefore()
* - 可以在指定的子节点前插入新的子节点
* - 语法：
* 父节点.insertBefore(新节点,旧节点);
*/
animation.insertBefore(li , yw);
});
//使用"斗罗大陆"节点替换#yw节点
myClick("btn03",function(){
//创建一个斗罗大陆
var li = document.createElement("li");
var dlText = document.createTextNode("斗罗大陆");
li.appendChild(dlText);
//获取id为yw的节点
var yw = document.getElementById("yw");
//获取animation
var animation = document.getElementById("animation");
/*
* replaceChild()
* - 可以使用指定的子节点替换已有的子节点
* - 语法：父节点.replaceChild(新节点,旧节点);
*/
animation.replaceChild(li , yw);
});
//删除#yw节点
myClick("btn04",function(){
//获取id为yw的节点
var yw = document.getElementById("yw");
//获取aniamtion
var animation = document.getElementById("animation");
/*
* removeChild()
* - 可以删除一个子节点
* - 语法：父节点.removeChild(子节点);
*
* 子节点.parentNode.removeChild(子节点);
*/
yw.parentNode.removeChild(yw);
});
//读取#animation内的HTML代码
myClick("btn05",function(){
//获取animation
var animation = document.getElementById("animation");
alert(animation.innerHTML);
});
//设置#yw内的HTML代码
myClick("btn06" , function(){
//获取yw
var yw = document.getElementById("yw");
yw.innerHTML = "斗破苍穹";
});
myClick("btn07",function(){
//向animation中添加斗罗大陆
var animation = document.getElementById("animation");
/*
* 使用innerHTML也可以完成DOM的增删改的相关操作
* 一般我们会两种方式结合使用
*/
var li = document.createElement("li");
//向li中设置文本
li.innerHTML = "斗罗大陆";
//将li添加到animation中
animation.appendChild(li);
});
};
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个动漫?
</p>
<ul id="animation">
<li id="yw">妖尾</li>
<li>火影</li>
<li>柯南</li>
<li>海贼王</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"斗罗大陆"节点,添加到#animation下</button></div>
<div><button id="btn02">将"斗罗大陆"节点插入到#yw前面</button></div>
<div><button id="btn03">使用"斗罗大陆"节点替换#yw节点</button></div>
<div><button id="btn04">删除#yw节点</button></div>
<div><button id="btn05">读取#animation内的HTML代码</button></div>
<div><button id="btn06">设置#yw内的HTML代码</button></div>
<div><button id="btn07">创建一个"斗罗大陆"节点,添加到#animation下</button></div>
</div>
</body>
</html>
总结
以上只是对DOM 的简单介绍，DOM 的存在可使我们精确的定位到网页元素，从而操作元素。DOM中还有许多方法和属性，具体请参考w3c离线手册或者去网上获取。
1730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
