1、DOM是文档对象模型（Document Object Model）的简称。
当网页加载时，可以将结构化文档在内存中转换成对象树。
简单的说，DOM并不是一种技术，而是一种访问结构化文档的思想。借助DOM模型，我们可以对DOM树进行修改、删除、新增等操作，让结构化文档动态化。
2、DOM模型中的节点--文档可以说是由节点构成的集合。在DOM模型中有以下3种节点：
（1）元素节点：各种标签就是这些元素节点的名称，如<ul>、<p>等；
（2）文本节点：文本节点总是被包含在元素节点的内部；
（3）属性节点：一般用来修饰元素节点的就称之为属性节点。
3、DOM对HTML元素的访问操作：
为了动态地修改HTML元素，须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素：
（1）根据ID访问HTML元素--通过document对象调用getElementById（）方法来查找具有唯一id属性值的元素；
如下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="name" content="content">
<title>DOM-使用getElementById方法查找元素</title>
<script type="text/javascript">
function showContent(){
var myDiv,content,txtName;
with(document){
myDiv=getElementById("myDiv");
content=getElementById("content");
txtName=getElementById("txtName");
}
alert(myDiv.innerHTML+"\n"+content.value+"\n"+txtName.value);
}
</script>
</head>
<body>
<div id="myDiv">我的div块</div>
<textarea id="content" rows="3" cols="25">好好学习,天天向上</textarea><br>
<input type="text" id="txtName" value="chen"><br>
<input type="button" id="btn_show" value="访问3个元素的内容" onclick="showContent()"><br>
</body>
</html>
（2）利用节点关系访问HTML元素。常用的属性和方法如下：
parentNode:返回当前节点的父亲节点；
previousSibling:返回当前节点的前一个兄弟节点；
nextSibling:返回当前节点的后一个兄弟节点；
childNode:返回当前节点的所有子节点；
firstChild:返回当前节点的第一个子节点；
lastChild:返回当前节点的最后一个子节点；
getElementsByTagName(tagName):返回当前节点的具有指定标签名的所有子节点。
如下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#n4{color:red;}
</style>
</head>
<body>
<ul id="names">
<li id="n1">Bob</li>
<li id="n2">PJ</li>
<li id="n3">Teddy</li>
<li id="n4">Chariel</li>
<li id="n5">Gabe</li>
<li id="n6">Dorra</li>
</ul>
<input type="button" value="父节点" onclick="showContent(current.parentNode)">
<input type="button" value="第一个子节点" onclick="showContent(current.parentNode.firstChild.nextSibling)">
<!--注意：在火狐谷歌浏览器里面，换行也会被认为是子节点，
如果没有加nextSibling，在火狐谷歌浏览器输出的结果会是undefined-->
<input type="button" value="上一个节点" onclick="showContent(current.previousSibling.previousSibling)">
<input type="button" value="下一个节点" onclick="showContent(current.nextSibling.nextSibling)">
<input type="button" value="最后一个子节点" onclick="showContent(current.parentNode.lastChild.previousSibling)">
<input type="button" value="得到所有li元素的个数" onclick="showCount()">
<script type="text/javascript">
var current=document.getElementById("n4");
function showContent(target){
alert(target.innerHTML);
}
/*若是将JavaScript代码放在head标签中，那么会报错：Cannot read property ‘parentNode‘ of null
因为JavaScript是解析执行的，HTML会从上面的标签往下执行，
语句“var current=document.getElementById("n4");”没有放在函数中，还没有解析到ul标签，就去找n4了，
所以会出错。解决方法之一是将JavaScript代码放在最后面，就是放在</body>前面。
还有一种解决方法就是先让HTML结构加载完毕之后再执行。
*/
function showCount(){
alert(document.getElementsByTagName("li").length);
}
</script>
</body>
</html>
时间： 2024-08-08 12:19:35