任务12.6 文档对象模型（DOM）_第1页
任务12.6 文档对象模型（DOM）_第2页
任务12.6 文档对象模型（DOM）_第3页
任务12.6 文档对象模型（DOM）_第4页
任务12.6 文档对象模型（DOM）_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

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

文档简介

网页设计项目教程（HTML5+CSS3+JavaScript）模块12使用JavaScript脚本语言实现网页任务12.6文档对象模型（DOM）学习目标认识DOM与DOM树，掌握获取、创建、修改元素节点以及处理元素属性的方法知识目标理解DOM与DOM树的概念；了解DOM节点的分类；掌握获取元素节点的方法；掌握创建、修改节点的方法；掌握处理元素属性的方法。能力目标能够获取页面中的元素节点；能够创建并添加节点；能够删除、替换和插入节点；能够设置元素的属性与样式；能够用DOM渲染页面内容。素养目标培养结构化分析问题的习惯；体会“先获取、再操作”的思路；养成查阅官方文档的意识；提升页面交互功能的开发能力。任务描述丰富多彩的页面交互效果，需要使用JavaScript操作文档对象模型（DOM）来实现DOM（DocumentObjectModel，文档对象模型）是一种用于表示和操作HTML、XML文档的编程接口。浏览器成功加载HTML文档后，会对文档进行分析，将其转换成一颗由节点构成的DOM树；通过DOM，可以使用JavaScript访问、操作HTML文档中的各个元素，从而实现动态更新页面内容、响应用户交互、控制页面样式等功能。本任务目标：认识DOM与DOM树，掌握获取、创建、修改元素节点以及处理元素属性的方法，能够通过操作DOM动态渲染页面内容。12.6.1认识DOM对象DOM不是编程语言，也不是JavaScript的一部分，而是用于建立网站的WebAPIDOM简介DOM（DocumentObjectModel），即文档对象模型，是一种用于表示和操作HTML、XML文档的编程接口。通过DOM，可以使用JavaScript访问、操作HTML文档中的各个元素。DOM树DOM树是用于访问文档信息的一种分层次对象结构。浏览器加载HTML文档后，将得到的信息转换成一颗节点树，多个节点根据元素之间的父子关系、兄弟关系构成一棵DOM树。访问文档元素操作文档元素动态更新页面内容响应用户交互控制页面样式提示：DOM并非一种编程语言，也不属于JavaScript语言本身，而是用于建立网站的WebAPI。12.6.1DOM树与节点类型DOM树主要由根节点、元素节点、文本节点和属性节点构成Documenthtmlheadbodytitleap"Document"href="#""链接""自然段"图12-26DOM树结构根节点Document节点，表示整个文档的起始节点。元素节点Element节点，表示文档中的HTML元素，如<div>、<p>、<a>、<ul>等，具有子元素和属性。文本节点Text节点，表示文档中的文本内容，如段落中的文字。属性节点Attribute节点，表示HTML元素上的属性，如a标签上的href属性。12.6.1document对象document是DOM的核心对象，表示整个HTML文档属性/方法说明document.title属性。获取、设置文档标题。document.domain属性。获取当前文档的域名。document.body属性。获取body元素。document.write方法。向页面写入内容。document.getElementById方法。获取指定id的元素对象。document.getElementsByName方法。获取带有指定name值的对象集合。document.getElementsByTagName方法。获取带有指定标签名的对象集合。提示：通过document对象提供的方法和属性，即可访问、操作HTML文档中的元素，这是后续所有DOM操作的基础。案例演示：改变元素的内容和样式创建demo20.html，用getElementById()获取元素对象并修改其内容与样式<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>document对象</title></head><body><h2>改变HTML元素的内容和样式</h2><buttononclick='updateContent()'>点我改变内容</button><buttononclick='updateStyle()'>点我改变样式</button><pid="test">HelloWorld!!</p><script>//修改元素的内容functionupdateContent(){document.getElementById("test").innerHTML="我喜欢学习计算机课程！";}//修改元素的样式functionupdateStyle(){document.getElementById("test").style.border="2pxsolid#ccc";}</script></body></html>代码说明页面中的两个按钮分别调用updateContent()与updateStyle()，通过id获取p元素后，分别修改其内容与边框样式。file:///demo20.html改变HTML元素的内容和样式点我改变内容点我改变样式我喜欢学习计算机课程！图12-27改变元素的内容或样式提示：先通过document.getElementById()获取元素节点，再对其内容或样式进行操作。12.6.2获取DOM元素在操作HTML中的元素之前，需要先使用document对象的方法获取元素节点getElementById()elementID返回id为elementID的元素节点。页面中id应唯一，未找到时返回null。getElementsByTagName()tagname返回标签名为tagname的元素节点集合，集合中元素的顺序与它们在文档中的顺序一致。getElementsByClassName()classname返回类名为classname的元素节点集合，可用于批量获取同类元素。返回值对比getElementById()返回单个元素节点，未找到时返回null；getElementsByTagName()与getElementsByClassName()返回元素节点集合（类数组对象），可通过length属性获取集合中元素的数量，通过下标访问具体的元素节点。案例演示：获取元素节点创建demo21.html，分别按id、标签名、类名获取元素节点<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>获取DOM节点</title></head><body><h1id="title">请根据id获取我</h1><ahref="#">链接1</a><ahref="#">链接2</a><divclass="card">我是一个div</div><pclass="card">我是一个自然段</p><spanclass="card">我是一个span</span>

<scripttype="text/javascript">vartitleNode=document.getElementById("title");console.log("id为title的元素：",titleNode);

varaNodeList=document.getElementsByTagName("a");for(vari=0;i<aNodeList.length;i++){console.log("a标签对应的元素节点",aNodeList[i]);}

varcardList=document.getElementsByClassName("card");for(vari=0;i<cardList.length;i++){console.log("类名为card的元素节点",cardList[i]);}</script></body></html>观察要点getElementById()直接返回一个元素节点；getElementsByTagName()与getElementsByClassName()返回集合，需通过循环遍历才能逐个取得元素节点。Console>id为title的元素：<h1id="title">…>a标签对应的元素节点<ahref="#">链接1</a>>a标签对应的元素节点<ahref="#">链接2</a>>类名为card的元素节点<divclass="card">…>类名为card的元素节点<pclass="card">…>类名为card的元素节点<spanclass="card">…图12-28获取元素节点12.6.3创建DOM元素document对象提供多个方法用于创建不同类型的节点createElement()返回标签名为tagname的元素节点。createTextNode()返回包含文本text的文本节点。createDocumentFragment()返回文档碎片节点，用于批量插入节点。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>创建DOM节点</title></head><body><scripttype="text/javascript">constdivNode=document.createElement("div");consttextNode=document.createTextNode("这是一段文本");constfragmentNode=document.createDocumentFragment();

console.log("div节点",divNode);console.log("文本节点",textNode);console.log("文档碎片",fragmentNode);</script></body></html>Console>div节点<div></div>>文本节点#text>文档碎片#document-fragment图12-29创建节点提示：创建的节点并不会自动显示在页面上，还需要使用添加节点的方法将其挂载到文档中。12.6.4修改DOM中的元素获取元素节点后，可通过添加、删除、替换、插入等操作动态修改HTML页面appendChild()parentNode.appendChild(childNode);向元素节点的子节点列表末尾添加新的子节点。removeChild()parentNode.removeChild(childNode);从子节点列表中删除某个子节点。replaceChild()parentNode.replaceChild(newNode,oldNode);将某个子节点替换成另外一个新节点。insertBefore()parentNode.insertBefore(newNode,existingNode);在已有的子节点前插入一个新的子节点。操作要点四种方法都由父节点调用，操作的对象都是父节点下的子节点；删除、替换、插入操作需先获取到目标节点，可借助parentNode属性取得父节点。案例演示：appendChild()添加节点创建demo23.html，使用appendChild()方法将节点添加到另外一个元素节点中parentNode.appendChild(childNode);<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>添加节点</title></head><body><divid="root"></div></body><scripttype="text/javascript">//创建元素节点pvarpNode=document.createElement("p");//创建文本节点，文本内容：一段文本vartxtNode=document.createTextNode("一段文本");//将文本节点添加到元素节点的子节点列表pNode.appendChild(txtNode);

varrootNode=document.getElementById("root");rootNode.appendChild(pNode);</script></html>节点结构变化（图12-30）div#root（空）appendChild(pNode)div#rootp一段文本文本节点被挂到p上，p又挂到root上案例演示：removeChild()删除节点创建demo23.html，父节点使用removeChild()方法删除子节点parentNode.removeChild(childNode);<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>删除节点</title></head><body><divid="root"><h3>标题</h3><p>一段文本</p></div></body><scripttype="text/javascript">//获取h3元素节点consth3Node=document.getElementsByTagName("h3")[0];//获取h3元素节点的父节点，即id为root的元素节点constparNode=h3Node.parentNode;//父节点调用removeChild方法删除子节点parNode.removeChild(h3Node);</script></html>节点结构变化（图12-31）div#rooth3标题p一段文本removeChild(h3Node)div#rootp一段文本页面中h3元素节点被删除案例演示：replaceChild()替换节点创建demo24.html，父节点使用replaceChild()方法替换某个子节点parentNode.replaceChild(newNode,oldNode);<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>替换节点</title></head><body><divid="root"><h3>替换节点</h3><p>一段文本</p></div></body><scripttype="text/javascript">//创建文本节点constnewTxtNode=document.createTextNode("我是新的标题");//创建元素节点h3constnewH3Node=document.createElement("h3");//将新的文本节点作为新创建的h3的子节点newH3Node.appendChild(newTxtNode);//获取文档中已经存在的h3节点constoldH3Node=document.getElementsByTagName("h3")[0];//用新h3节点替换已存在的h3节点oldH3Node.parentNode.replaceChild(newH3Node,oldH3Node);</script></html>节点结构变化（图12-32）div#rooth3替换节点p一段文本replaceChild(new,old)div#rooth3我是新的标题p一段文本新节点替换了原来的h3节点案例演示：insertBefore()在特定节点前插入创建demo25.html，父节点使用insertBefore()方法将某节点插到另一子节点前parentNode.insertBefore(newNode,existingNode);<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>在特定节点之前插入</title></head><body><divid="root"><h3>在特定节点之前插入</h3><p>一段文本</p></div></body><scripttype="text/javascript">//创建文本节点constnewTxtNode=document.createTextNode("我是一段新的文本节点");//获取文档中的p元素节点constpNode=document.getElementsByTagName("p")[0];//在p元素节点之前插入文本节点pNode.parentNode.insertBefore(newTxtNode,pNode);</script></html>节点结构变化（图12-33）div#rooth3在特定节点之前插入p一段文本insertBefore(new,pNode)div#rooth3在特定节点之前插入我是一段新的文本节点p一段文本新节点被插入到p元素节点之前12.6.5处理DOM元素属性获取元素节点后，可通过处理节点的属性来更新元素的属性、样式、内容等setAttribute()改变已有的属性值，或者创建新的属性。style通过设置元素节点的style属性来动态调整元素的样式。className获取、设置元素的class值，从而切换元素的样式类。innerHTML获取、设置元素的后代节点，字符串会被解析为HTML代码。四种常用方式setAttribute(name,value)用于设置属性节点；style用于设置行内样式；className用于切换样式类；innerHTML用于批量设置元素的后代节点；四者都属于“先获取元素节点、再修改其属性”的操作思路。案例演示：setAttribute()设置属性创建demo27.html，获取元素节点后通过setAttribute()设置href、class属性<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>setAttribute</title></head><body><ahref=""id="link">点我跳转到一个页面</a><spanid="tag">我是一个标签</span><scripttype="text/javascript">constaNode=document.getElementById("link");constspanNode=document.getElementById("tag");

aNode.setAttribute("href","/");spanNode.setAttribute("class","tag");</script></body></html>setAttribute(name,value)name为属性名，value为属性值；属性不存在时会被新建。Elements<ahref="/"id="link">点我跳转到一个页面</a><spanid="tag"class="tag">我是一个标签</span>图12-34设置元素属性后的效果运行后打开开发者工具，切换到Elements菜单，可以看到a标签的href值与span标签新增的class属性。案例演示：style属性设置样式创建demo28.html，通过元素节点的style属性动态调整元素的样式<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>style属性</title></head><body><divid="ad">JavaScript是一门编程语言</div>

<scripttype="text/javascript">constadNode=document.getElementById("ad");adNode.style.width="200px";adNode.style.height="100px";adNode.style.color="#fff";adNode.style.backgroundColor="green";adNode.style.border="1pxsolid#ccc";</script></body></html>style属性通过style属性设置的样式为行内样式，将直接写入元素标签。Elements<divid="ad"style="width:200px;height:100px;color:#fff;background-color:green;border:1pxsolid#ccc;">JavaScript是一门编程语言</div>图12-35设置元素style属性后的效果常用样式属性widthheightcolorbackgroundColorborderCSS中带连字符的属性名，在JavaScript中改为小驼峰命名，如font-size→fontSize。案例演示：className属性设置样式类创建demo29.html，通过className属性获取class的值，并更改样式类<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>class属性</title><style>.title{font-size:20px;}.active{color:red;}</style></head><body><divid="title"class="title">获取、设置class属性</div></body><scripttype="text/javascript">consttitleNode=document.getElementById("title");console.log("获取元素的class属性的值：",titleNode.className);titleNode.className+="active";console.log("新增active样式类后：",titleNode.className);</script></html>Console>获取元素的class属性的值：title>新增active样式类后：titleactive图12-36设置元素class属性后的效果说明className属性返回的是完整的class字符串；通过+=追加类名时，需要在类名前留一个空格，否则会与原类名连在一起，导致样式失效。案例演示：innerHTML属性设置内容创建demo30.html，获取、设置元素的innerHTML，批量替换元素的后代节点<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>innerHTML</title></head><body><divid="card"><pclass="title">innerHTML</p></div></body><scripttype="text/javascript">constcardNode=document.getElementById("card");console.log("获取元素节点的后代

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

温馨提示

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

最新文档

评论

0/150

提交评论