12 第五章 JavaScript文档对象模型
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
本章学习任务
• 了解文档对象模型的概念 • 理解DOM的树形结构 • DOM内部对象常用属性与方法 • 了解节点与元素的概念 • 使用DOM处理页面元素 • 利用div完善校验 • *利用DOM处理表格
2
5.1 什么是文档对象模型
• 文档对象模型， Document Object Model， 简称DOM，是W3C组织推荐的处理可扩展置标语
27
5.4.1 获取页面的body
• 2、直接使用document.body获取body元素
document方法有一个body属性，使用body属性可以直接得到body元素 var bodyEle=document.body;
• 3、使用getElementsByTagName获取body元素列表，然后获得body元素
明
将键盘焦点从当前元素移开的事件
在当前元素上模拟鼠标单击的事件
使当前元素获得焦点的事件 返回当前节点中指定属性的值 返回当前节点的指定属性值的Attr节点 返回指定标记名的元素数组 如果指定的属性存在，返回true；否则返回false 将制定的属性删除 为元素添加指定的属性
18
5.3.6 Document对象方法
</p>
5.3.2节点Node对象方法
方 法 名
appendChild(arg) hasChildNodes()
说
为当前节点添加一个子节点 判断当前节点是否有子节点
明
insertBefore(newNode,oChildNo 当前节点指定的子节点之前添加一个子节点；如果指 de 定的子节点为null或不存在，直接在指定的节点的最 ) 后添加一个子节点 removeChild(arg) 将指定的子节点删除并返回 返回被替代的子节点，并用指定的子节点代替；如果 指定的子节点为null或不存在，直接将被替代的子节 点删除
言的标准编程接口
• DOM是一个允许程序和脚本，动态读取和更新文档内容、样式的语言和平台 • DOM是针对html与xml的应用程序接口，编程人员可以通过dom修改html或xml文档中某个
元素及其属性和属性值
3
5.2 DOM的树形结构
• HTML文档有一个嵌入标记的层级结构，它在DOM中表示对象的一棵树。HTML文档的这棵树
=1
=2
• 我们发现使用DOM获取页面中的某个元素有很多方法，实际编程中可以根据元素本身属性
选择合适的方法
29
5.4.2 获取元素的子节点
常用获取元素子节点的方法
•childNodes，返回当前节点的子节点组成的Node数组列表，没有子节点返回空数组 •firstChild，返回当前节点的Node型的第一个子节点，没有则返回null •lastChild，返回当前节点的Node的最后一个子节点，没有则返回null
30
5.5 利用div完善校验
• 页面的应用常常需要处理一些将信息隐藏或者将隐藏的信息显示的效果。
• 使用div可以方便地实现一些用户提示功能，div元素本身是用来为HTML文档内大块(blocklevel)的内容提供结构和背景的元素
31
练习
• Html文档body中一段代码：
<div id= " mx " >桃李满四海</div>
返回当前节点的node型的下一个兄弟节点，没有则返回null
返回当前节点的名字 返回当前节点的类型 返回当前节点的Node型的父节点，没有则返回null 返回当前节点的Node型的前一个兄弟节点，没有返回null
8
一个简单的HTML
<p>
<strong>Hello</strong> How are you doing?
createTextNode()
getElementById() getElementsByName()
创建一个文本节点
根据ID获取元素 返回指定名称的元素列表
19
练习1
• 下面我们利用document对象方法来做一个全选的例子
• 当单击全选按钮时，所有的复选框都被选中，再次单击则全部不选中
20
样例：全选按钮（1）
</body>
</html>
5
5.2 DOM的树形结构
document html head body
title
树形结构
h1
p
文档对象模型
b 树形结构
5.3 DOM内部对象常用属性与方法
• 在DOM中，文档所有的组成部分都被看作是树的一部分，文档中所有的元素都是树的节点
Node，每个节点都是一个Node对象，每种Node对象都定义了特定的属性与方法
var bodyAry=document.getElementsBy TagName(“body”); var bodyEle=bodyAry[0];
28
5.4.1获取页面的body
• 4、为body元素添加id，使用getElementBy Id获取body元素
var bodyEle=document.getElementById (“bodyId”)
本章小结
本章我们学习了
•文档对象模型的概念 •理解DOM的树形结构 •DOM内部对象常用属性与方法 •使用DOM处理页面元素 •利用div完善校验 •*使用DOM处理表格
44
课后作业
<table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <table>
• 在所有的节点类型中，Document节点是一个HTML文档中所有元素的根节点，是整个文档树的根
(root)，我们使用Document节点生成页面中的元素
方 法 名
createAttribute() createElement()
说
明
根据指定的属性名，创建一个属性节点，返回新的Attr 对象 根据指定的元素名，创建一个元素
•一. 用2种方法，把表格中第二列的内容改为：创新思维 •二. 用dom处理表格的方法，表格添加2个新行，每行2列，内容任意。 •三. 用dom操纵节点(Node对象)的方法重复做一遍第二问。
附录:常用节点类型
• Node.ELEMENT_NODE • Node.ATTRIBUTE_NODE • Node.TEXT_NODE = 3
5.3.5 Element对象方法
方 法 名
blur()
click() focus() getAttribute() getAttributeNode() getElementsByTagName() hasAttribute() removeAttribute() setAttribute()
说
replaceChild(oNewNode , oChild)
12
5.3.3 节点与元素
•一个节点可以是一个元素节点，一个属性节点，一个文本节点，或任何其他的节点类型的节点。 •节点：HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
•整个文档是一个文档节点 •每个 HTML 标签是一个元素节点 •包含在 HTML 元素中的文本是文本节点 •每一个 HTML 属性是一个属性节点 •注释属于注释节点
• 1.为div标签添加一个b 元素子节点，内容为”教育兴中华” • 2. 为div添加一个name属性，属性值自己定。 • 3. 通过操作body标签，把背景颜色改为蓝色
<script language="javascript"> function getFirstRow() { var tbAry=document.getElementsByTagName("table"); //根据标记名称获得table数组 var oprTb=tbAry[0];//得到第一个table对象 var trAry=oprTb.getElementsByTagName("tr"); //使用table对象的方法获取行数组 var firstRow=trAry[0]; alert(" 第一行对象标记的名称"+firstRow.tagName); alert(" 第一行索引:"+firstRow.rowIndex); alert(" 第一行内容："+firstRow.innerText); } </script>
的表示包含了HTML标记和元素的节点，以及表示文本串的节点
• 我们可以通过一段基本的HTML代码来了解其树形结构
4
5.2 DOM的树形结构
<html> <head> <title>树形结构</title> </head> <body> <h1>文档对象模型</h1> <p> <b>树形结构</b> </p>
的操作。这些操作包括页面获取页面的body、获取元素的子节点、改变页面的样式等
26
5.4.1 获取页面的body
• 我们可以使用先得到HTML元素，然后获得其子元素body
var htmlEle=document.documentElement;
var bodyEle=stChild; 或var bodyEle=htmlEle.childNodes[1];
5.3.4 Element对象的属性
• 使用dom操作页面，多数情况下需要操作页面中的元素（element），通过element的属性
与方法可以方便地进行各种控制element的操作。常用的element的属性除了与node通用表 上的属性，还具有如下属性。
5.3.4 Element对象的属性
属性名
7
5.3.1节点Node对象属性
属 性 名
childNodes
说
明
返回当前节点的子节点组成的node数组列表，没有子节点返回空数组 返回当前节点的node型的第一个子节点，没有返回null 返回当前节点的node型的最后一个子节点，没有则返回null
firstChild
lastChild nextSibling nodeName nodeType parentNode previousSibling
21
样例：全选按钮（2）
22
练习2：
• 我们再来做一个练习来体会一下如何利用document对象来创建元素 • 动态添加和删除文件域
• 当点击添加和删除的时候可以对应添加和删除文本域
23
样例：增减文本域（1）
24
样例：增减文本域（2）
25
5.4 使用DOM处理页面元素
• 了解了DOM的概念及其结构，下面开始使用DOM处理页面中的各种元素，并进行一些简单
id innerHTML innerText style tagName 返回当前元素的ID 返回当前元素的HTML标记内容 以文本的形式返回当前元素的内容 返回当前元素的样式 返回当前元素的标记名
说
明
<html>
<head>
<script> function show(){ var pTag = document.getElementById("pId"); alert(pTag.firstChild.tagName); } </script> </head> <body onload="show();"> <p id="pId"><b>我是</b>龙的传人</p> <div>我是一个div</div> </body> </html>
<span>创新思维</span> <p id="pId"><b>我是</b>龙的传人</p> <div><b>我是一个div</b></div>
练 习
用dom操作输出HTML文档的内容。
注意：不允许手动更改HTML文档的内容。
•1.输出p标签的父节点的元素标记名称 •2.输出p标签的子节点数量 •3.输出p标签的第一个子节点的文本内容 •4.输出p标签的上一个同级元素的元素名称 •5.输出p标签的下一个同级元素的html标记内容
• 了解文档对象模型的概念 • 理解DOM的树形结构 • DOM内部对象常用属性与方法 • 了解节点与元素的概念 • 使用DOM处理页面元素 • 利用div完善校验 • *利用DOM处理表格
2
5.1 什么是文档对象模型
• 文档对象模型， Document Object Model， 简称DOM，是W3C组织推荐的处理可扩展置标语
27
5.4.1 获取页面的body
• 2、直接使用document.body获取body元素
document方法有一个body属性，使用body属性可以直接得到body元素 var bodyEle=document.body;
• 3、使用getElementsByTagName获取body元素列表，然后获得body元素
明
将键盘焦点从当前元素移开的事件
在当前元素上模拟鼠标单击的事件
使当前元素获得焦点的事件 返回当前节点中指定属性的值 返回当前节点的指定属性值的Attr节点 返回指定标记名的元素数组 如果指定的属性存在，返回true；否则返回false 将制定的属性删除 为元素添加指定的属性
18
5.3.6 Document对象方法
</p>
5.3.2节点Node对象方法
方 法 名
appendChild(arg) hasChildNodes()
说
为当前节点添加一个子节点 判断当前节点是否有子节点
明
insertBefore(newNode,oChildNo 当前节点指定的子节点之前添加一个子节点；如果指 de 定的子节点为null或不存在，直接在指定的节点的最 ) 后添加一个子节点 removeChild(arg) 将指定的子节点删除并返回 返回被替代的子节点，并用指定的子节点代替；如果 指定的子节点为null或不存在，直接将被替代的子节 点删除
言的标准编程接口
• DOM是一个允许程序和脚本，动态读取和更新文档内容、样式的语言和平台 • DOM是针对html与xml的应用程序接口，编程人员可以通过dom修改html或xml文档中某个
元素及其属性和属性值
3
5.2 DOM的树形结构
• HTML文档有一个嵌入标记的层级结构，它在DOM中表示对象的一棵树。HTML文档的这棵树
=1
=2
• 我们发现使用DOM获取页面中的某个元素有很多方法，实际编程中可以根据元素本身属性
选择合适的方法
29
5.4.2 获取元素的子节点
常用获取元素子节点的方法
•childNodes，返回当前节点的子节点组成的Node数组列表，没有子节点返回空数组 •firstChild，返回当前节点的Node型的第一个子节点，没有则返回null •lastChild，返回当前节点的Node的最后一个子节点，没有则返回null
30
5.5 利用div完善校验
• 页面的应用常常需要处理一些将信息隐藏或者将隐藏的信息显示的效果。
• 使用div可以方便地实现一些用户提示功能，div元素本身是用来为HTML文档内大块(blocklevel)的内容提供结构和背景的元素
31
练习
• Html文档body中一段代码：
<div id= " mx " >桃李满四海</div>
返回当前节点的node型的下一个兄弟节点，没有则返回null
返回当前节点的名字 返回当前节点的类型 返回当前节点的Node型的父节点，没有则返回null 返回当前节点的Node型的前一个兄弟节点，没有返回null
8
一个简单的HTML
<p>
<strong>Hello</strong> How are you doing?
createTextNode()
getElementById() getElementsByName()
创建一个文本节点
根据ID获取元素 返回指定名称的元素列表
19
练习1
• 下面我们利用document对象方法来做一个全选的例子
• 当单击全选按钮时，所有的复选框都被选中，再次单击则全部不选中
20
样例：全选按钮（1）
</body>
</html>
5
5.2 DOM的树形结构
document html head body
title
树形结构
h1
p
文档对象模型
b 树形结构
5.3 DOM内部对象常用属性与方法
• 在DOM中，文档所有的组成部分都被看作是树的一部分，文档中所有的元素都是树的节点
Node，每个节点都是一个Node对象，每种Node对象都定义了特定的属性与方法
var bodyAry=document.getElementsBy TagName(“body”); var bodyEle=bodyAry[0];
28
5.4.1获取页面的body
• 4、为body元素添加id，使用getElementBy Id获取body元素
var bodyEle=document.getElementById (“bodyId”)
本章小结
本章我们学习了
•文档对象模型的概念 •理解DOM的树形结构 •DOM内部对象常用属性与方法 •使用DOM处理页面元素 •利用div完善校验 •*使用DOM处理表格
44
课后作业
<table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <table>
• 在所有的节点类型中，Document节点是一个HTML文档中所有元素的根节点，是整个文档树的根
(root)，我们使用Document节点生成页面中的元素
方 法 名
createAttribute() createElement()
说
明
根据指定的属性名，创建一个属性节点，返回新的Attr 对象 根据指定的元素名，创建一个元素
•一. 用2种方法，把表格中第二列的内容改为：创新思维 •二. 用dom处理表格的方法，表格添加2个新行，每行2列，内容任意。 •三. 用dom操纵节点(Node对象)的方法重复做一遍第二问。
附录:常用节点类型
• Node.ELEMENT_NODE • Node.ATTRIBUTE_NODE • Node.TEXT_NODE = 3
5.3.5 Element对象方法
方 法 名
blur()
click() focus() getAttribute() getAttributeNode() getElementsByTagName() hasAttribute() removeAttribute() setAttribute()
说
replaceChild(oNewNode , oChild)
12
5.3.3 节点与元素
•一个节点可以是一个元素节点，一个属性节点，一个文本节点，或任何其他的节点类型的节点。 •节点：HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
•整个文档是一个文档节点 •每个 HTML 标签是一个元素节点 •包含在 HTML 元素中的文本是文本节点 •每一个 HTML 属性是一个属性节点 •注释属于注释节点
• 1.为div标签添加一个b 元素子节点，内容为”教育兴中华” • 2. 为div添加一个name属性，属性值自己定。 • 3. 通过操作body标签，把背景颜色改为蓝色
<script language="javascript"> function getFirstRow() { var tbAry=document.getElementsByTagName("table"); //根据标记名称获得table数组 var oprTb=tbAry[0];//得到第一个table对象 var trAry=oprTb.getElementsByTagName("tr"); //使用table对象的方法获取行数组 var firstRow=trAry[0]; alert(" 第一行对象标记的名称"+firstRow.tagName); alert(" 第一行索引:"+firstRow.rowIndex); alert(" 第一行内容："+firstRow.innerText); } </script>
的表示包含了HTML标记和元素的节点，以及表示文本串的节点
• 我们可以通过一段基本的HTML代码来了解其树形结构
4
5.2 DOM的树形结构
<html> <head> <title>树形结构</title> </head> <body> <h1>文档对象模型</h1> <p> <b>树形结构</b> </p>
的操作。这些操作包括页面获取页面的body、获取元素的子节点、改变页面的样式等
26
5.4.1 获取页面的body
• 我们可以使用先得到HTML元素，然后获得其子元素body
var htmlEle=document.documentElement;
var bodyEle=stChild; 或var bodyEle=htmlEle.childNodes[1];
5.3.4 Element对象的属性
• 使用dom操作页面，多数情况下需要操作页面中的元素（element），通过element的属性
与方法可以方便地进行各种控制element的操作。常用的element的属性除了与node通用表 上的属性，还具有如下属性。
5.3.4 Element对象的属性
属性名
7
5.3.1节点Node对象属性
属 性 名
childNodes
说
明
返回当前节点的子节点组成的node数组列表，没有子节点返回空数组 返回当前节点的node型的第一个子节点，没有返回null 返回当前节点的node型的最后一个子节点，没有则返回null
firstChild
lastChild nextSibling nodeName nodeType parentNode previousSibling
21
样例：全选按钮（2）
22
练习2：
• 我们再来做一个练习来体会一下如何利用document对象来创建元素 • 动态添加和删除文件域
• 当点击添加和删除的时候可以对应添加和删除文本域
23
样例：增减文本域（1）
24
样例：增减文本域（2）
25
5.4 使用DOM处理页面元素
• 了解了DOM的概念及其结构，下面开始使用DOM处理页面中的各种元素，并进行一些简单
id innerHTML innerText style tagName 返回当前元素的ID 返回当前元素的HTML标记内容 以文本的形式返回当前元素的内容 返回当前元素的样式 返回当前元素的标记名
说
明
<html>
<head>
<script> function show(){ var pTag = document.getElementById("pId"); alert(pTag.firstChild.tagName); } </script> </head> <body onload="show();"> <p id="pId"><b>我是</b>龙的传人</p> <div>我是一个div</div> </body> </html>
<span>创新思维</span> <p id="pId"><b>我是</b>龙的传人</p> <div><b>我是一个div</b></div>
练 习
用dom操作输出HTML文档的内容。
注意：不允许手动更改HTML文档的内容。
•1.输出p标签的父节点的元素标记名称 •2.输出p标签的子节点数量 •3.输出p标签的第一个子节点的文本内容 •4.输出p标签的上一个同级元素的元素名称 •5.输出p标签的下一个同级元素的html标记内容