前端基础实战 11_第1页
前端基础实战 11_第2页
前端基础实战 11_第3页
前端基础实战 11_第4页
前端基础实战 11_第5页
已阅读5页，还剩33页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

文档对象模型课件目录01Document对象02查找DOM元素03操作DOM元素Document对象对象集合Document对象集合如表7-1所示。Document对象对象集合所谓对象集合，是指调用Document的集合便可以获取该页面中该类型的所有元素，且返回的是一个数组，该数组内保存着所有元素。示例代码如下。Document对象对象集合上述代码为页面定义了4张图像、2个超链接，使用document.images获取所有图像元素，并通过allImages[0]读取数组元素，获取第一张图像（即页面中首先出现的图像）的src属性。运行上述代码，Document对象集合获取失败，如图7-1所示。Document对象对象属性了解了Document对象的常见对象集合及使用方法后，再来了解Document对象的属性，如表7-2所示。Document对象对象属性下面通过一段简单的代码来了解上述属性的用法。Document对象对象属性运行上述代码，使用Document对象属性的效果如图7-3所示。上述代码的重点在于使用Document对象属性的时候，这些属性是可读写的，所以不但可以获取这些属性的值，而且可以设置它们的值。比如本来页面的标题是“这是一个JavaScript页面”，这里通过document.title直接将页面的标题修改成“这是页面的新标题”；还有页面的背景色，通过document.body.bgColor将其从绿色修改为了红色（图中页面背景实际为红色）。Document对象对象方法Document对象除集合和属性外，还内置了一些特别的方法，如表7-3所示。查找DOM元素DOM简介1．DOM文档对象模型是为HTML和XML提供的编程接口。DOM可以同时给HTML和XML提供编程接口，虽然它们用来标记的标签不同，但是它们本质的结构是相同的。2．文档树在DOM规范中，对节点的定义比较简单，即HTML文档中的每个成分都是一个节点。查找DOM元素通过id属性查找在HTML中，任何一个标签元素都拥有一个固定的属性id，也就是说，可以给任意标签元素设置一个id属性，且id属性在页面中是唯一的。既然每个元素的id是唯一的，那么可以通过id来对元素进行查找。在Document对象中，可以使用getElementById()方法来查找一个元素并对其进行操作。查找DOM元素通过id属性查找上述代码中定义了3个盒模型，并为其设置了不同的id属性，这样就可以通过该id属性来获取该盒模型元素，并获取其innerHTML（即该标签的文本内容）。其他标签元素的使用与此相同。上述代码的运行结果如下。查找DOM元素通过标签查找查找DOM元素通过class属性查找由于class属性在页面中是可以重复设置的（与标签一样），通过class属性会查找到多个元素，因此其方法也是复数形式，即getElementsByClassName()，这里通过如下代码演示其用法。查找DOM元素通过class属性查找上述代码的运行结果如下。查找DOM元素通过name属性查找示例代码如下。

上述代码的运行结果如下。查找DOM元素DOM操作练习1．25宫格利用JavaScript操作盒模型完成一个稳定的25宫格布局，其期望效果如图7-7所示。查找DOM元素DOM操作练习编写具体的代码如下。查找DOM元素DOM操作练习2．九九乘法表利用JavaScript操作盒模型完成一个九九乘法表，其期望效果如图7-9所示。查找DOM元素DOM操作练习具体的实现代码如下。操作DOM元素DOM的属性与方法1．DOM的属性DOM常见的属性中都有关于节点的操作，其详细描述如表7-4所示。操作DOM元素DOM的属性与方法2．DOM的方法DOM所具备的常见方法及其对应的用法如下。（1）创建元素节点的方法createElement()varnode=document.createElement("div");其表示创建一个元素节点，但这个节点不会被自动添加到文档中。（2）创建文本节点的方法createTextNode()varvalue=document.createTextNode("text");其表示创建一个文本节点，常用来向元素节点中添加内容，这个节点也不会被自动添加到文档中。（3）插入节点到文档最后的方法appendChild()node.appendChild(value);其表示将不会自动添加到文档里的节点插入到文档最后。操作DOM元素DOM的属性与方法（4）插入节点到目标节点前面的方法insertBefore()varnode=document.createElement("div");var_p=document.createElement("p");var_span=document.createElement("span");node.appendChild(_p);node.insertBefore(_span,_p);以上代码表示<span>节点在<p>节点前面插入。参数列表中的第二个参数可选，如果不写第二个参数，则默认添加节点到文档的最后，相当于appendChild()。如果是已存在的节点，则appendChild()和insertBefore()都会先自动删除原节点，再移动节点到指定的位置。操作DOM元素DOM的属性与方法（5）复制节点的方法cloneNode()node.cloneNode(true);node.cloneNode(false);其表示复制盒模型节点，参数为true时，表示复制整个节点和其中的内容；参数为false时，表示只复制节点而不复制其中的内容，复制后的新节点也不会被自动插入文档，需要使用appendChild()和insertBefore()方法进行插入。（6）删除节点的方法removeChild()node.removeChild(_p);其表示把<p>节点从<div>中删除。如果不知道要删除的节点的父节点，则一般使用node.parentNode.removeChild(node);实现。操作DOM元素DOM的属性与方法（7）替换节点的方法replaceChild()node.replaceChild(_p,_span);其表示把<span>节点替换成<p>节点。（8）设置节点属性的方法setAttribute()node.setAttribute("title","abc");其表示对<node>节点设置其title属性值为字符串"abc"。（9）获取节点属性的方法getAttribute()node.getAttribute("title");其表示获取节点的title属性。（10）判断元素是否有子节点的方法hasChildNodes()node.hasChildNodes();其会返回boolean类型。操作DOM元素DOM元素的新增对DOM的属性和方法有所了解后，现在来实现新增DOM元素的操作，主要实现在页面中单击某个按钮后随机增加一批蓝色背景的盒模型的操作，其最终效果如图7-10所示（盒模型实际背景颜色为蓝色）。操作DOM元素DOM元素的新增现在分析如何实现通过代码新增盒模型。新增DOM元素使用的DOM方法是createElement()，新增盒模型时，会调用createElement("div")，具体的实现代码如下。functionadd(){varmydiv=document.createElement("div");mydiv.style.width="100px";//设置CSS属性的宽度mydiv.style.height="50px";//设置CSS属性的高度mydiv.style.backgroundColor="blue";//设置CSS属性的背景色document.body.appendChild(mydiv);//添加到<body>节点中}操作DOM元素DOM元素的删除既然可以新增DOM元素，自然也可以删除DOM元素。这里基于7.3.2小节的代码，介绍如何将新增的盒模型一次性删除，具体的实现代码如下。操作DOM元素DOM元素属性的修改下面通过一个简单的灯泡开关的例子进行讲解。本示例期望实现的效果（灯泡关闭状态和灯泡打开状态）如图7-11和图7-12所示。操作DOM元素DOM元素属性的修改问题的解决思路比较容易理解，先需要准备两张大小一样的图像，一张是灯泡关闭的状态，另一张是灯泡打开的状态；再在图像上响应鼠标单击事件，单击时根据当前灯泡的<img>标签对应的src属性的值决定切换为哪一张图像，实现灯泡的打开和关闭效果，具体的实现代码如下。操作DOM元素针对表格的操作1．表格的创建下面来回顾使用标准的HTML标签和属性来创建一个白色的表格的操作，其边框使用黑色线条，示例代码如下。操作DOM元素针对表格的操作现在来看如何使用JavaScript动态创建一张表格，示例代码如下。操作DOM元素针对表格的操作2．表格的插入第一种方法，将表格视为一个大的元素，在<table>标签中使用innerHTML属性为表格添加一个新的内容，从而实现新增一行的效果。操作DOM元素针对表格的操作上述代码先针对已有表格定义了一个id属性，再在insertRow1()函数中通过id属性获取该表格，通过innerHTML属性获取表格的已有内容，将该内容与需要新增的一行内容连接在一起，并重新将该内容写回当前表格。其中直接使用<body>标签的onload事件在页面加载时调用insertRow1()函数，所以当页面在浏览器中运行时，直接将表格已有的两行内容和新增的一行内容都显示出来，其效果如图7-13所示。操作DOM元素针对表格的操作第二种方法，使用DOM中专门针对表格插入的方法insertRow()完成新增一行的操作，同时针对该行使用insertCell()方法新增单元格，具体的实现代码如下。操作DOM元素针对表格的操作运行上述代码，使用insertRow()插入一行的效果如图7-14所示。上述代码中需要注意的是，调用insertRow()和insertCell()方法时，传递的参数为-1，表示在最后一个位置新增一行或一列。如果insertRow()传递的参数为0，则会在表格的第1行插入一个新行；如果insertRow()传递的参数为1，则会在第2行插入一个新行。操作DOM元素针对表格的操作3．表格的删除既然可以使用JavaScript新增表格，或者在已有表格中插入行或者列，那么同样可以利用DOM提供的接口来删除整个表格或者表格中的一行或一列。删除整个表格时，可以使用对所有元素都通用的方

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论