全部章节 >>>>
本章目录
4.1 文档对象模型简介及属性
4.1.1 文档对象模型概述
DOM（Document Object Model）是文档对象模型的简称
DOM 把HTML 文档看成由元素、属性和文本组成的一棵倒立的树
可以把HTML 文档中的每个成分看成一个节点，所以 DOM 的核心操作是查看节点、创建节点、增加节点、删除节点以及替换节点
整个文档是一个文档节点
每个HTML 标签是一个元素节点
包含在HTML 元素中的文本是文本节点
每个HTML 属性是一个属性节点
注释属于注释节点 HTML 文档中的节点彼此间都存在关系，类似一张家族图谱
示例：简要说明HTML文档中节点的关系
<html>
<head>
<meta charset="utf-8">
<title> 文档对象模型节点的特点 </title>
</head>
<body>
<h1> 文档对象模型概述</h1>
<p>DOM: 文档对象模型</p>
</body>
</html>
- 除文档根节点之外的每个节点都有父节点
- 大部分元素节点都有子节点
- 当节点共享同一个父节点时，它们就是同辈
- 节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推
- 节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推
整个HTML 文档在DOM 中是一个document 对象
|
属性 |
含义 |
|
bgColor |
页面的背景颜色 |
|
fgColor |
文本的前景颜色 |
|
title |
页面标题 |
示例：
<body>
<h2>document 对象的常用属性</h2>
<script type="text/javascript">
document.title="document 对象的常用属性";
document.bgColor="blue";
document.fgColor="white";
</script>
</body>
4.1.3 实践练习
4.2 document 对象查找 HTML 元素
4.2.1 通过 id 查找 HTML 元素
使用 document.getElementById(id) 方法可以通过 id 获取 HTML 页面的元素
示例：
<p id="intro"> 你好，世界！ </p>
<p> 本案例演示了 <b>getElementById</b> 的用法！ </p>
<script type="text/javascript">
var x=document.getElementById("intro");
document.write("<p> 该文本来自 id 为 intro 的段落 :"+x.innerHTML+"</p>");
</script>
innerHTML属性是一个字符串，用来设置或获取位于对象起始和结束标签之间的HTML内容
- 使用 document.getElementsByName(name) 方法可以通过name获取页面元素
- 参数 name 为必选项，为字符串类型
- 返回值为数组对象，如果无符合条件的对象，则返回空数组
示例：使用getElementsByName() 方法模拟购物车的全选功能
<script type="text/javascript">
function check() {
var cb1 = document.getElementById("allCheck");
var chs = document.getElementsByName("item");
for(var i=0; i<chs.length;i++) {
chs[i].checked = cb1.checked;
}
}
function checkItem() {
var checked=0;
var notchecked=0;
var cb1 = document.getElementById("allCheck");
var chs = document.getElementsByName("item");
for(var i=0; i<chs.length;i++) {
if(chs[i].checked) {
checked++;
} else {
notchecked++;
}
}
if(checked == chs.length)
{cb1.checked=true;}
else if(notchecked == chs.length)
{cb1.checked=false;}
else {cb1.checked=false;} }
</script>
4.2.2 通过 name 查找 HTML 元素
- 使用 document.getElementsByName(name) 方法可以通过name获取页面元素
- 参数 name 为必选项，为字符串类型
- 返回值为数组对象，如果无符合条件的对象，则返回空数组
示例：使用getElementsByName() 方法模拟购物车的全选功能
<script type="text/javascript">
function check() {
var cb1 = document.getElementById("allCheck");
var chs = document.getElementsByName("item");
for(var i=0; i<chs.length;i++) {
chs[i].checked = cb1.checked;
}
}
function checkItem() {
var checked=0;
var notchecked=0;
var cb1 = document.getElementById("allCheck");
var chs = document.getElementsByName("item");
for(var i=0; i<chs.length;i++) {
if(chs[i].checked) {
checked++;
} else {
notchecked++;
}
}
if(checked == chs.length)
{cb1.checked=true;}
else if(notchecked == chs.length)
{cb1.checked=false;}
else {cb1.checked=false;} }
</script>
4.2.3 通过标签名查找 HTML 元素
- 使用 document.getElementsByTagName(tagname) 方法可以通过标签名访问页面元素
- 参数 tagname 为必选项，为字符串类型
- 返回值是指定标签名的对象的集合，如果无符合条件的对象，则返回空数组
示例：当鼠标移动到页面中的菜单上时，修改菜单的背景图像以
<script type="text/javascript">
var navUl=document.getElementById("nav");
var lis = navUl.getElementsByTagName("li");
for (var i=0; i<lis.length;i++) {
lis[i].onmouseover=function() {
this.style.backgroundImage="url(../img/bg2.gif)";
}
lis[i].onmouseout=function() {
this.style.backgroundImage="url(../img/bg1.gif)";
}
}
</script>
4.2.4 通过类名查找 HTML 元素
- 使用 document.getElementsByClassName(classname) 方法可以通过类名访问页面元素
- 参数 classname为必选项，是字符串类型，指需要获取的元素类名
- 返回值为NodeList 对象，表示指定类名的元素集合。可通过节点列表中的节点索引号来访问列表中的节点
可以使用NodeList对象的length属性来确定指定类名的元素个数，并循环各个元素来获取需要的元素
示例：使用getElementsByClassName() 方法实现斑马线效果
<ul id="ul1">
<li class="box"> 通过 id 查找 HTML 元素 </li>
<li> 通过 name 查找 HTML 元素 </li>
<li class="box"> 通过标签名查找 HTML 元素 </li>
<li> 通过类名查找 HTML 元素 </li>
<li class="box"> 我是带有 box 样式的列表项 </li>
</ul>
<script type="text/javascript">
window.onload=function() {
var ul1=document.getElementById("ul1");
var box=ul1.getElementsByClassName("box");
for(var i=0; i<box.length;i++) {
box[i].style.background="yellow"; }}
</script>
4.2.5 实践练习
4.3 document 对象改变 HTML
4.3.1 使用document对象改变HTML输出流
JavaScript 中的 document 对象能够动态地创建 HTML 内容。document.write() 方法可用于直接向 HTML 的输出流写内容
示例：页面中动态输出当前的日期
不要在文档加载完成之后使用document.write()方法，这样做会覆盖该文档中所有的内容
4.3.2 使用document对象改变HTML内容
修改 HTML 内容最简单的方法是使用 innerHTML 属性
语法：
document.getElementById(id).innerHTML= 新的 HTML 内容示例：使用 innerHTML 在页面中动态添加内容
<script type="text/javascript">
function insert() {
var obj = document.getElementById("content");
obj.innerHTML="<h2> 我是动态添加的内容 </h2>"
}
</script>
<div id="content">
</div>
<input type="button" value=" 向页面中添加内容 " onClick="insert()"/>
4.3.3 使用document对象改变HTML样式
如果需要改变 HTML 元素的样式，可使用以下语法
document.getElementById(id).style.property= 新样式
示例：
<script type="text/javascript">
function insert() {
var obj = document.getElementById("content");
obj.innerHTML="<h2> 我是动态添加的内容 </h2>"
}
function changeStyle() {
var content = document.getElementById("content");
content.style.borderColor="red";
content.style.color="orange";
content.style.borderStyle="solid";
content.style.borderWidth="2px";
}
</script>
<div id="content"> </div>
<input type="button" value=" 向页面中添加内容 " onClick="insert()"/>
<input type="button" value=" 修改页面样式 " onClick="changeStyle();"/>
每个 HTML 对象都有用于访问 CSS 样式的 style 属性，style 对象中包含一系列与 CSS 属性相对应的属性
style 对象的属性同CSS的属性命名不同，它删除了“-”，第一个单词后面的每个单词首字母大写
4.3.4 使用document对象改变HTML属性
如果需要改变 HTML 元素的属性，可使用以下语法
document.getElementById(id).attribute= 新属性值
示例：添加修改 HTML 样式
<p>
<img id="image" src="../img/smiley.gif" width="160" height="120"/>
</p>
<p>
<input type="button" value=" 更换图片 " onClick="changePic()"/>
</p>
<script type="application/javascript">
function changePic() {
var img = document.getElementById("image");
img.src="../img/landscape.jpg";
}
</script>
4.3.5 实践练习
4.4 DOM 节点操作
4.4.1 节点信息
可以根据层级关系来查找节点，在 DOM 中每个节点都具有访问其他节点的属性
|
属性 |
描述 |
|
parentNode |
当前节点的父节点引用 |
|
childNodes |
当前节点的所有子节点 |
|
firstChild |
当前节点的第一个子节点 |
|
lastChild |
当前节点的最后一个子节点 |
|
previousSibling |
当前节点的前一个兄弟节点 |
|
nextSibling |
当前节点的后一个兄弟节点 |
示例：使用属性查找节点，并设置其样式
function getChildren() {
var div1 = document.getElementById("test");
var ps=div1.childNodes;
for(var i=0; i<ps.length;i++) {
// 如果子节点是元素节点
if(ps[i].nodeType==1) {
ps[i].style.color="blue";
}
}
}
function getParent() {
var div1=document.getElementById("test");
var parent=div1.parentNode;
parent.style.backgroundColor="pink"; }
childNodes 属性，它返回当前节点的所有子节点，其中子节点包括元素节点、属性节点和文本节点
通过节点对象的 nodeType 属性可以判断属于哪种类型的节点
当 nodeType 是 1 时就是元素节点；nodeType 为 2 时是属性节点；nodeType 为 3 时则是文本节点
4.4.2 动态添加和删除节点
添加节点
- 使用 createElement 创建节点
- 使用 appendChild(node) 方法将指定的节点追加到现有节点的末尾
删除节点
- 使用 removeChild 删除节点
使用 DOM 删除元素时，需要清楚地知道要删除元素的父元素
示例：动态添加和删除节点
<input type="button" value=" 添加 " onClick="ins()"/>
<input type="button" value=" 删除 " onClick="del()"/>
<script type="text/javascript">
var sel=document.createElement("select");
var option1=document.createElement("option");
option1.value="yellow";
option1.innerHTML=" 黄色 ";
sel.appendChild(option1);
var option2=document.createElement("option");
option2.value="red";
option2.innerHTML=" 红色 ";
sel.appendChild(option2);
var option3=document.createElement("option");
option3.value="blue";
// 创建一个文本节点
var txt=document.createTextNode(" 蓝色 ");
option3.appendChild(txt);
sel.appendChild(option3);
//select 的 onchange 事件处理
sel.onchange=function() {
document.body.bgColor=this.value;
}
// 将 select 中的第一个元素节点移动到 select 子节点的末尾
sel.appendChild(sel.firstChild);
function ins() {
document.body.appendChild(sel);
}
// 删除 select 节点
function del() {
document.body.removeChild(sel);
}
</script>
4.4.3 实践练习
总结：
DOM 把HTML 文档看成由元素、属性和文本组成的一棵倒立的树
document 对象中用于查找 HTML 元素的方法有
- getElementById() 方法：获取指定 id 的 HTML 页面元素对象
- getElementsByTagName() 方法：返回所有指定标签名的 HTML 页面元素对象
- getElementsByName() 方法：获取一组指定 name 的 HTML 页面元素对象
- getElementsByClassName() 方法：返回所有指定类名的 HTML 页面元素对象
在 DOM 中每个节点都具有访问其他节点的属性
- parentNode 属性：返回当前节点的父节点引用
- childNodes 属性：返回当前节点的所有子节点
- firstChild 属性：返回当前节点的第一个子节点
- nextSibling 属性：返回当前节点的后一个兄弟节点