《WEB前端开发技术实用教程》课件第09章 文档对象模型(DOM).pptx

1、1 1目录9.1 DOM概述9.2 DOM节点分类9.3 节点属性与文本操作9.4 DOM节点访问方法9.5 动态创建HTML内容9.6 DOM Style对象9.7 表单元素对象9.8 表单验证9.1 DOM概述uDOM：Document Object Model 即文档对象模型，定义了用户操作文档对象的接口。uDOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义如何通过脚本来访问文档结构；u文档中的每个元素都是DOM的一部分，Javascript可以访问元素的属性和方法9.1 DOM概述u文档：DOM中的”D”没有文档，DOM就无从谈起。当创建一个网页并把它加载到浏览器

2、中，DOM就根据你编写的网页创建了一个文档对象。u对象：DOM中的”O”我们把注意力放在浏览器对象上u模型：DOM中的”M”当网页加载后，浏览器向我们提供了当前网页的模型，我们可以去提取这个模型。DOM把文档表示成一颗树。9.1 DOM概述u 如下例：u u u dom demo u u u 标题一u 段落1u u javascriptu domu cssu u u 9.1 DOM概述DOM层次结构图DOM分层u通过上图可以看出，在文档对象模型中，每一个对象都可以称为一个节点(Node)。u根节点 在最顶层的节点，称为是根节点。u父节点 一个节点之上的节点是该节点的父节点(parent)。例如

3、，就是和的父节点，就是的父节点。u子节点 位于一个节点之下的节点就是该节点的子节点。例如，和就是的子节点，就是的子节点。u兄弟节点 如果多个节点在同一个层次，并拥有着相同的父节点，这几个节点就是兄弟节点(sibling)。例如，和就是兄弟节点，和就是兄弟节点。DOM分层u后代 一个节点的子节点的结合可以称为是该节点的后代(descendant)。例如，和就是的后代，和就是的后代。u叶子节点 在树形结构最底部的节点称为叶子节点。例如，“标题内容”、“3号标题”和“加粗内容”都是叶子节点。9.2 DOM节点分类u文档模型中，节点的三种类型：u元素节点 在HTML中，、等一系列标记，是这个文档的元素

4、节点。元素节点组成了文档模型的语义逻辑结构。u文本节点 包含在元素节点中的内容部分，如标签中的文本等等。一般情况下，不为空的文本节点都是可见并呈现于浏览器中的。u属性节点 元素节点的属性，如标签的href属性与title属性等等。一般情况下，大部分属性节点都是隐藏在浏览器背后，并且是不可见的。属性节点总是被包含于元素节点当中。9.2 DOM节点分类isaacs Blog9.2 DOM节点分类u每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）9.2 DOM节点分类u节点信息如下表所示：元素类型元素类型节点

5、类型节点类型节点名称节点名称节点值节点值元素节点1标签名null属性节点2属性名属性值文本节点3#text 文本文档节点9#documentnull9.3 节点属性与文本操作u节点属性操作 getAttribute()查询对象的属性值 setAttribute()设置对象的属性值u节点文本操作 innerHTML表示某个标记之间的所有内容，包括HTML标记该属性可以读取，同时还可以设置 innerText获取标记中的文本信息，不包括标记本身9.4 DOM节点访问方法u通过 DOM，您可访问 HTML 文档中的每个节点。u1、通过使用 document的3个方法 getElementById()

6、：通过ID名访问唯一元素 getElementsByName()：通过name访问具有相同名称的同一类元素 getElementsByTagName()：通过标签名访问同一类标签u 特点：可查找整个 HTML 文档中的任何 HTML 元素，这些方法会忽略文档的结构9.4 DOM节点访问方法u实例：返回文档中所有 元素的一个节点列表：uvar x=document.getElementsByTagName(p);变量 x 包含着页面中所有 元素的一个列表，并且我们可以通过它们的索引号来访问这些 元素。注释：索引号从 0 开始。可以通过使用 length 属性来循环遍历节点列表：for(var i

7、=0;ix.length;i+)alert(xi.innerText);9.4 DOM节点访问方法u2.遍历文档树u通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性u 特点：遵循文档的结构，在文档中进行“短距离的旅行”。9.4 DOM节点访问方法uchildNodes属性(集合，用索引值0开始)从给定文档的节点树里把任何一个元素的所有子元素检索出来，返回一个数组。ufirstChild和lastChild属性 返回第一个节点和最后一个节点，类似node.childNodes0和node.childNodesnode.childNodes.len

8、gth-1uparentNode属性 返回目标节点的父节点unextSibling属性 返回目标节点的下一个兄弟节点upreviousSibling属性 返回目标节点的上一个兄弟节点ul中li子节点的兼容性问题uUl中定义li时，如换行定义，浏览器会认为中间的空行是文本信息，也会当成ul的子节点来处理，如只处理ul中的li信息，兼容性写法可以这样来做：for(var i=0;ioUl.childNodes.length;i+)if(oUl.childNodesi.nodeType=1)oUl.childNodesi.style.background=red;for(var i=0;ioUl.c

9、hildren.length;i+)oUl.childreni.style.background=red;也可以这样处理：children只获取元素节点，且是第一层的子节点只获取元素节点，且是第一层的子节点9.5 动态创建HTML内容ucreateElement(“标签名”)创建一个元素节点（标签）ucreateTextNode(“文本”)创建一个文本节点uappendChild(创建的节点)把新创建的节点插入某个文档中uremoveChild(子节点名)删除某一节点的子节点uinsertBefore(newNode,targetNode)将节点newNode作为当前元素的子节点插入到targ

10、etNode子节点元素的前面ureplaceChild(newNode,oldNode)将节点oldNode替换为节点newNodeucloneNode(true)复制当前节点，true表示复制当前节点以及它的所有子孙节点9.6 DOM Style 对象uStyle 对象 Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。使用使用 Style Style 对象属性的语法对象属性的语法：document.getElementById(id).style.property=值9.6 DOM Style 对象uStyle 对象的属性：n背景背景 n边框和边距边框

11、和边距 n布局布局n列表列表 n定位定位 n表格表格 n文本文本 n滚动条滚动条 u注：详细用法参考w3school手册JavaScript改变字体样式实现思路1、创建改变样式的JavaScript代码this.style.fontSize=24pxthis.style.fontSize=14px2、利用鼠标相关事件调用JavaScript代码onMouseOver=this.style.fontSize=24px“onMouseOut=this.style.fontSize=14px样式表：font-size脚本代码：fontSize使用了style属性用事件来触发9.6 DOM Style

12、 对象请编写如下图所示，实现随鼠标移入改变边框色的效果鼠标移入边框变成红色JavaScript改变边框样式9.6 DOM Style 对象JavaScript改变图片按钮样式如何实现如下图所示，按钮的图片背景效果？鼠标移入按钮改变背景9.6 DOM Style 对象JavaScript改变图片按钮样式我们除了可以用行内样式来改变图片按钮的样式，也可以调用不同的内嵌css样式来改变图片按钮的样式。实现思路：1、定义鼠标移入和离开的两个图片按钮的css类选择器样式2、然后用onmouseover和onmouseout调用不用的css样式的名称调用不同的css样式名称用：onmouseover=“t

13、his.className=css类选择器名称”9.6 DOM Style 对象.mouseOverStylebackground-image:url(images/back2.jpg);color:#CC0099;border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;.mouseOutStylebackground-image:url(images/back1.jpg);color:#0000FF;border:0px;margin:0px;padding:0px;height:23px;width:8

14、2px;font-size:14px;实现代码9.6 DOM Style 对象Style设置与className的区别u这两种方式存在着细微的差别，它们的区别在于：第一种方式通过style直接设置的样式属性是以行内样式的方式添加到这个元素上的；className方式指定的样式是通过类别样式添加到此元素上的，且它会覆盖掉之前在这个元素上的类别样式。9.7 表单元素对象u表单对象(Form)提供一个让客户端输入文字或进行选择的功能，例如：单选按钮、复选框、选择列表等。由标记组构成，JavaScript自动建立一个表单对象，并将用户端的信息送至服务器进行处理。表单对象是文件对象(document)的

15、子对象，同时，它也包含许多子对象。9.7 表单元素对象uform对象最主要的功能就是能够 直接访问HTML文档中的form表单。u一个web页面可以有一个或多个from表单，使用document.forms数组对象可以访问到各表单。u可以将对象的属性，来引用该表单字段元素所对应的对象。udocument.forms索引.属性udocument.forms索引.方法（参数）udocument.表单名称.属性udocument.表单名称.方法（参数）9.7 表单元素对象表单对象属性：表单方法：reset()表单重置表单重置submit()表单提交表单提交action表单动作表单动作elements

16、以索引表示的所有表单元素以索引表示的所有表单元素encodingMIME的类型的类型length表单元素的个数表单元素的个数method方法方法name表单名称表单名称9.7 表单元素对象文本框事件 onBlur文本框失去焦点onChange 文本框的值被修改onFocus光标进入文本框中方法 focus()获得焦点，即获得鼠标光标select()选中文本内容，突出显示输入区域属性 readOnly 只读，文本框中的内容不能修改，属性的取值为true或false 9.7 表单元素对象单选按钮事件onBlur单选按钮失去焦点onFocus 单选按钮获得焦点 onClick 单选按钮被选定或取消选

17、定属性checked单选按钮是否被选中，选中为true，未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中 value设置或获取单选按钮的值制作全选效果实现思路：创建一组同名的复选框编写脚本1、使用getElementsByName()方法获得一组同名的复选框对象。2、通过循环来改变复选框是否被选中属性checked的值。复选框选中属性是checked若是把所有复选框的checked值逐个赋值为true，很麻烦，那我们如何解决呢？9.7 表单元素对象var allCheckBoxs=document.getElementsByName(isBuy);function

18、 checkAll(boolValue)for(var i=0;iallCheckBoxs.length;i+)if(allCheckBoxsi.type=checkbox)allCheckBoxsi.checked=boolValue;function checkrev()for(var i=0;iallCheckBoxs.length;i+)allCheckBoxsi.checked=!(allCheckBoxsi.checked);全选全不选反选获取一组name相同的元素，保存为数组判断是否是复选框元素全选效果代码9.7 表单元素对象通过取反符号，将选中状态设为未选中，未选中设为选中9.

19、7 表单元素对象下拉列表框事件onBlur下拉列表框失去焦点onChange当选项发生改变时产生onFocus下拉列表框获得焦点属性value下拉列表框中，被选选项的值options所有的选项组成一个数组，options表示整个选项数组，第一个选项即为options0，第二个即为options1，其他以此类推selectedIndex返回被选择的选项的索引号，如果选中第一个返回0，第二个返回1，其他类推方法add(选项对象)添加一个列表项remove(索引)删除一个列表项9.7 表单元素对象 -请选择开户帐号的城市-北京市 上海市 重庆市 天津市 四川省 山东省 湖北省9.7 表单元素对象fu

20、nction showcity()var selobj=document.getelementbyid(“selcity”);var i=selobj.selectedIndex;alert(“您选择了”+selobj.optionsi.value);操作代码：如果很多用户将格式验证交给服务器端，那么服务器压力会很大。所以我们要在客户端先对用户填写的表单进行格式验证，这样大大减轻服务器的负担。9.8 表单验证u我们为什么需要表单验证呢？服务器IE客户端客户端用户输入用户输入客户端客户端用户输入用户输入客户端客户端用户输入用户输入发送请求发送请求返回响应返回响应发送请求发送请求返回响应返回响应发

21、送请求发送请求返回响应返回响应用户名为邮箱，不能为空并且必须包含“”和“.”9.8 表单验证u表单验证示例-1function checkemail()var stremail=document.myform.txtemail.value;if(stremail.length=0)alert(电子邮件不能为空!);return false;if(stremail.indexof(,0)=-1)alert(电子邮件格式不正确n必须包含符号！);return false;if(stremail.indexof(.,0)=-1)alert(电子邮件格式不正确n必须包含.符号！);return fal

22、se;return true;验证表单的方法，如果返回true则提交，放回false则不提交9.8 表单验证u表单验证示例-1表单验证示例-2用户名不能为空用户名不能包含数字密码不能为空密码不能少于6位9.8 表单验证表单验证示例-2function checkUserName()/验证用户名var fname=document.myform.txtUser.value;if(fname.length!=0)for(i=0;ifname.length;i+)var ftext=fname.substring(i,i+1);if(ftext=0)alert(名字中包含数字n+请删除名字中的数字和

23、特殊字符);return false;else alert(请输入“名字”文本框);document.myform.txtUser.focus();return false return true;function passCheck()/验证密码var userpass=document.myform.txtPassword.value;if(userpass=)alert(未输入密码n+请输入密码);document.myform.txtPassword.focus();return false;if(userpass.length 6)alert(密码必须多于或等于6 个字符。n);re

24、turn false;return true;function validateform()if(checkUserName()&passCheck()return true;elsereturn false;循环截取每一个字符判断是否有数字判断密码的位数是否小于6位判断以上两个方法的返回值，如果都为true则通过验证表单提交9.8表单验证function checkLogin()var myDiv=document.getElementById(loginError);myDiv.innerHTML=;var strName=document.userfrm.loginName.value;if(strName.length=0)myDiv.innerHTML=用户名不能为空;return;表单即时提示特效代码如果输入的信息不合法，则利用DIV的innerHTML或innerText进行错误提示，innerText只能写文本信息9.8 表单验证本章小结u1、理解DOM的含义和结构u2、掌握DOM中节点访问方式u3、掌握DOM中Style对象的使用u4、掌握各个表单元素对象的属性和方法u5、实现表单验证的应用传道，授业，解惑