一、什么是DOM？
什么叫DOM，DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异，正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了。因此，必须要对DOM有一定的认识，才能把Javascript应用于WEB，或你的RIA应用当中，因为DHTML本质上就是操作DOM树。
以后的编程当中，希望你能够把DHTML.chm这本手册也拿上，如果你需要兼容gecko，把gecko的DOM手册也带上。因为API太多，想不起来的接口还可以查这本手册。
如果你要测试浏览器是否是支持DOM的，简单的一句就可以判断
<script>
var isSupportDOM = !!document.getElementById; //两个取反，这已经在上节中说过了，意思是强制转型
alert("你的浏览器 " +(isSupportDOM?"":"不")+ "支持 DOM！");
</script> 二、DOM树
要注意：DOM树的根统一为文档根—document，DOM既然是树状结构，那么他们自然有如下的几种关系:
根结点(document)
父结点(parentNode)
子结点(childNodes)
兄弟结点 兄弟结点
(sibling) (sibling)
例子：
假设网页的HTML如下
程序代码
<html>
<head>
<title>never-online's website</title>
<script>
function myGetElementById (id) {
var nodeRoot = document; //这个是根结点
var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点
var nodeBody = nodeHTML.childNodes[1]; //body结点
var bodyChild = nodeBody.childNodes; //body的孩子
for (var i=0; i<bodyChild.length; i++) { //简单的遍历（指body的孩子下的深度为1)
if (bodyChild[i].id==id) return bodyChild[i];
};
return null;
}
function TestGetElementById (id) {
var node = myGetElementById(id);
if (node!=null) {
alert("找到结点 "+id+"!");
alert(node.childNodes[0].data);
} else {
alert("没有找到结点 "+id+".");
}
}
</script>
</head>
<body>
<div id="aTestNode"></div>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="TestGetElementById('textNode')" type="button" value="change"/>
</body>
</html>2)、属性：object.innerHTML，返回值：一个节点内的HTML值。该属性为可写属性。它虽然不是获取结点，但经常与获取结点相结合，所以我把它放在获取结点这一类，它的属性就类似于是纯文本节点属性中的data。以document.getElementById和object.innerHTML这两个API为例，我们就可以把上面所写的代码简化一下了，示例如下：
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementById("textNode");
node.innerHTML = strText;
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>3)、方法：object.getElementsByTagName(标签的名字)，返回一个集合，该集合的把有元素都是有指定标签的元素。访问集合里的元素，可以用下标来访问。语法里的object，是指document（根）或者是一个ELEMENT_NODE。这个的原理示例我就不写了，可以作为一个作业，大家可以写写。这里写一些具体应用。如上例，我们还可以这样写。
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementsByTagName("DIV");
node[0].innerHTML = strText;
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>再取一个例子，注意，BODY下的结点深度为2。
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementById("nodeTest");
var myNode = node.getElementsByTagName("DIV");
myNode[0].innerHTML = strText;
}
</script>
</head>
<body>
<div id="nodeTest">
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</div>
</body>
</html>二、动态创建与插入结点
1)、创建结点对象。document.createElement(tagname)，tagname指的是一个标签，比如一个DIV，就是document.createElement("DIV")，它返回的是这个结点的引用。
2)、在body的尾部插入结点用document.body.appendChild(object)，为了容易理解，下面这个示例，我用了IE专有的属性object.outerHTML，得到一个该元素的HTML标签内容（包括自身），这样会更容易看到效果。
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML：\n" +document.body.outerHTML);
var node = document.createElement("DIV");
node.innerHTML = strText;
document.body.appendChild(node);
alert("插入元素后的body HTML：\n" +document.body.outerHTML);
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>
[/htm]
3)、在元素处插入结点。object.insertBefore(oNewNode [, oChildNode])，oNewNode为一个我们创建的结点，oChildNode是可选的，为object下的一个子节点。同样的，为了看到效果，我也用了outerHTML。示例
[html]
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML：\n" +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素后的body HTML：\n" +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>三、移除结点。
1) object.parentNode.removeChild(oChildNode)，这个就是语法，下面看示例。
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML：\n" +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素后的body HTML：\n" +document.body.outerHTML);
}
function removeCreateNode() {
alert("移除元素前的body HTML：\n" +document.body.outerHTML);
var node = document.getElementById("textNode");
node.parentNode.removeChild(node);
alert("移除元素前的body HTML：\n" +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="insert"/>
<input onclick="removeCreateNode()" type="button" value="remove"/>
</body>
</html>这一节就先写到这里，下一节我们就可以用这几个简单的API做许多事情了，几个API就可以写出很多效果
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
