Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第5章 DOM编程_第1页
Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第5章 DOM编程_第2页
Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第5章 DOM编程_第3页
Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第5章 DOM编程_第4页
Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第5章 DOM编程_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

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

文档简介

E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3第5章DOM编程商品分类管理介绍背景知识商品分类管理的实现步骤本章小结01020304-学习文档对象模型（DOM）的基本概念和作用；-理解DOM和HTML之间的关系；深入了解DOM的树状结构及其组成元素；学习如何通过DOM方法选择、遍历和修改页面元素；理解如何使用DOM方法来处理用户事件和浏览器事件；学习如何使用DOM来操作表单元素并处理表单数据。010203040506E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商品分类管理介绍01需求分析1.1商品分类管理功能的需求如下：

1.分类显示与管理界面提供一个界面用于显示所有商品分类。分类应清晰地分为一级和二级分类。2.添加一级分类用户能够通过输入框输入一级分类名称，提交后可以添加新的一级分类。新添加的一级分类应立即显示在分类列表中。3.添加二级分类每个一级分类下方应提供一个添加二级分类的按钮。用户点击添加按钮后，通过弹出的输入框输入二级分类名称并提交。新添加的二级分类应立即显示在其对应的一级分类下。4.删除一级分类每个一级分类下方应提供一个删除一级分类按钮。点击删除按钮将删除该一级分类及其所有二级分类。删除操作应在用户确认后执行。5.删除二级分类每个二级分类旁应提供一个删除二级分类按钮。点击删除按钮将删除该二级分类。删除操作应在用户确认后执行。6.用户界面设计界面应简洁明了，易于操作。应用适当的样式以增强用户体验。分类列表应清晰展示一级和二级分类的层级关系。需求分析1.1商品分类管理运行截图：商品分类管理实现思路1.2商品分类管理模块的实现思路如下：1.构建商品分类管理的基础页面利用HTML构建商品分类管理的基础页面。页面应包含用于显示和添加一级和二级分类的必要元素，如分类列表、输入字段和操作按钮。2.使用CSS美化分类管理页面在HTML页面中嵌入CSS样式，使用不同类型的选择器定位页面元素，使用常用的CSS属性来设置元素的布局、颜色、字体等，利用CSS盒子模型来精确控制元素间的间距和排列，确保页面布局的整洁和一致性。3.使用JavaScript和DOM编程来实现商品分类的动态管理编写脚本来处理分类的添加和删除操作，并能及时更新页面。编写函数用于处理表单的提交，能够动态的在列表中添加新的分类，也能够删除现有的分类。同时，也要注意事件处理和表单验证，以提升用户操作的流畅性和准确性。知识导图1.3E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3背景知识02DOM简介2.1DOM（文档对象模型，DocumentObjectModel）是一种与平台和语言无关的应用程序接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM将HTML或XML文档转换为一个由节点构成的树状结构，每个节点代表文档中的一部分，如元素、属性和文本。以下是DOM的一些关键特点：节点树结构：DOM将文档视为一个树状结构，其中每个节点都是文档的一部分，例如标签、属性、文本等。这种结构使得开发人员可以轻松访问和操作文档的各个部分。语言独立：虽然DOM最常与JavaScript一起使用（尤其在网页编程中），但它实际上是独立于任何特定编程语言的。它定义了操作文档的标准方法，可以被多种语言实现和使用。交互性和动态修改：DOM允许脚本通过改变节点（添加、删除、修改）的方式动态地更改文档的结构、样式和内容。这是网页交互性的基础，它允许网页在不重新加载整个页面的情况下发生变化。事件处理：DOM定义了事件和事件处理的概念，允许脚本在发生特定事件时（如用户点击鼠标或键盘输入时）做出响应。这增强了用户与网页的交互。多种实现和扩展：浏览器的DOM实现存在细微差异，并可能添加特有的功能和扩展，这有时会引发跨浏览器兼容性问题。DOM与HTML的关系与区别2.2DOM和HTML之间的关系与区别如表5-1所示。特性HTMLDOM定义HTML是一种标记语言，用于创建网页的结构和内容。DOM是编程接口，它表示HTML文档，并允许程序和脚本动态地访问和修改这个文档。类型语言/代码。概念/模型。作用定义网页的静态结构和内容。提供访问和操作网页结构、样式和内容的方法。交互性非交互式，用于描述文档内容。交互式，用于改变文档内容和结构。语言依赖独立，不依赖于特定编程语言。通常与JavaScript一起使用，但本身是语言独立的。表现形式文本文件，用标签定义结构。可以是一个动态的、由脚本操作的对象树。修改方式通常在编辑器或文本编辑器中手动修改。可以通过脚本在运行时动态修改。DOM的结构2.3DOM（文档对象模型）的结构是一种树状结构，用来表示HTML（或XML）文档中的所有元素。这种结构允许开发者使用脚本语言JavaScript来访问、修改、添加或删除网页的内容，表5-2是DOM结构的主要元素。DOM结构元素描述示例节点(Node)DOM的构建块，可以是元素、属性、文本等。<divclass="example">Hello,World!</div>树状结构(TreeStructure)DOM的层级表示形式，从一个根节点开始，分支到多个子节点。文档节点是树的根，元素节点是树枝，文本节点是叶子。父节点(ParentNode)在层级中位于上一级的节点，可以有一个或多个子节点。如果<span>在<div>内，则<div>是<span>的父节点。子节点(ChildNode)子节点是指位于DOM层级结构中某个父节点下一级的节点。在<ul>内的<li>元素是子节点。兄弟节点(SiblingNodes)具有相同父节点的节点，属于兄弟节点，位于同一层级。两个连续的<li>元素是兄弟节点。元素节点(ElementNode)对应HTML中的标签，可以包含其他元素或文本。<body>,<div>,<p>等。文本节点(TextNode)包含在元素内的文本内容。<p>这是一个段落。</p>其中的”这是一个段落。”就是一个<p>元素的文本节点内容。属性节点(AttributeNode)定义元素的属性。id="header",class="main-content"。其中id和class是元素的属性。DOM的结构2.3现在将一个HTML页面转化为DOM树结构。<!DOCTYPEhtml><html><head><title>简单页面</title></head><body><divid="container"><h1>标题</h1><p>这是一个段落。</p></div></body></html>使用DOM控制元素2.4（1）选择DOM元素在DOM（文档对象模型）中，选择元素是指通过特定的方法从HTML文档中找到一个或多个特定的元素，这是在使用JavaScript或其他脚本语言与网页交互时的常用步骤，因为它允许开发者访问和操作网页的各个部分，表5-3是DOM中常用的几种选择元素的方法。方法用途getElementById通过元素的ID选择一个特定的元素。

getElementsByClassName通过元素的类名选择所有匹配的元素。getElementsByTagName通过元素的标签名选择所有匹配的元素。querySelector使用CSS选择器选择匹配的第一个元素。querySelectorAll使用CSS选择器选择所有匹配的元素。使用DOM控制元素2.4使用一个示例说明如何使用前面提到的DOM选择方法。<!DOCTYPEhtml><html><head><title>DOM选择元素示例</title><style>.box{margin:10px;padding:10px;border:1pxsolidblack;}</style></head><body><divid="container"><divclass="box">Box1</div><divclass="box">Box2</div><p>段落文本</p></div>

<script>//使用getElementById选择ID为'container'的元素varcontainer=document.getElementById('container');console.log('getElementById:',container);

//使用getElementsByClassName选择所有类名为'box'的元素varboxes=document.getElementsByClassName('box');console.log('getElementsByClassName:',boxes);

//使用getElementsByTagName选择所有'p'标签的元素varparagraphs=document.getElementsByTagName('p');console.log('getElementsByTagName:',paragraphs);

//使用querySelector选择第一个类名为'box'的元素varfirstBox=document.querySelector('.box');console.log('querySelector:',firstBox);

//使用querySelectorAll选择所有类名为'box'的元素varallBoxes=document.querySelectorAll('.box');console.log('querySelectorAll:',allBoxes);</script></body></html>使用DOM控制元素2.4（2）遍历DOM元素遍历DOM（文档对象模型）是指在DOM树上移动，以访问和操作其中节点的过程。DOM是一个将HTML和XML文档表示为节点树的编程接口。在这个树状结构中，每个节点都可能是一个元素、属性、文本等。遍历DOM的目的通常是为了找到、修改、添加或删除文档中的节点，表5-4是DOM中常用的遍历元素的方法。方法描述parentNode返回当前节点的父节点。childNodes返回当前节点的所有子节点的NodeList。firstChild返回当前节点的第一个子节点。lastChild返回当前节点的最后一个子节点。nextSibling返回当前节点的下一个兄弟节点。previousSibling返回当前节点的上一个兄弟节点。children返回当前元素的所有子元素的HTMLCollectionfirstElementChild返回当前元素的第一个子元素节点。lastElementChild返回当前元素的最后一个子元素节点。nextElementSibling返回当前元素的下一个兄弟元素节点。previousElementSibling返回当前元素的上一个兄弟元素节点。使用DOM控制元素2.4使用一个示例说明如何使用前面提到的DOM选择方法。<!DOCTYPEhtml><html><head><title>DOMTraversalExample</title></head><body><divid="parent"><divid="firstChild">FirstChild</div><divid="middleChild">MiddleChild</div><divid="lastChild">LastChild</div></div>

<script>//获取特定元素作为起点varparent=document.getElementById('parent');varmiddleChild=document.getElementById('middleChild');

//parentNode-访问一个元素的父节点//这会返回middleChild的父元素，即id为'parent'的divconsole.log('parentNode:',middleChild.parentNode);

//childNodes-获取一个元素的所有子节点//这包括所有类型的节点，如元素节点、文本节点等varchildNodes=parent.childNodes;console.log('childNodes:',childNodes);

//firstChild-获取一个元素的第一个子节点//这可能是任何类型的节点，包括文本节点varfirst=parent.firstChild;console.log('firstChild:',first);

//lastChild-获取一个元素的最后一个子节点varlast=parent.lastChild;console.log('lastChild:',last);

//nextSibling-获取当前节点的下一个兄弟节点//这可能是任何类型的节点varnext=middleChild.nextSibling;console.log('nextSibling:',next);

//previousSibling-获取当前节点的上一个兄弟节点varprevious=middleChild.previousSibling;console.log('previousSibling:',previous);

//children-获取当前元素的所有子元素节点//这只返回元素节点，忽略文本节点等varchildren=parent.children;console.log('children:',children);

//firstElementChild-获取当前元素的第一个子元素节点varfirstElement=parent.firstElementChild;console.log('firstElementChild:',firstElement);

//lastElementChild-获取当前元素的最后一个子元素节点varlastElement=parent.lastElementChild;console.log('lastElementChild:',lastElement);

//nextElementSibling-获取当前元素的下一个兄弟元素节点varnextElement=middleChild.nextElementSibling;console.log('nextElementSibling:',nextElement);

//previousElementSibling-获取当前元素的上一个兄弟元素节点varpreviousElement=middleChild.previousElementSibling;console.log('previousElementSibling:',previousElement);</script></body></html>使用DOM控制元素2.4（3）修改DOM元素修改DOM结构指的是通过脚本语言（通常是JavaScript）在运行时改变HTML文档的内容、结构或样式。修改DOM结构是Web编程中的一个常见需求，允许开发者动态地改变网页的内容、结构或样式，表5-5是一些常用的修改DOM结构的方法。方法描述createElement()创建一个新的元素节点。createTextNode()创建一个新的文本节点。appendChild()将一个新节点添加到指定父节点的子节点列表的末尾。insertBefore()在指定的子节点前插入一个新的子节点。removeChild()从DOM中删除一个子节点。replaceChild()替换父节点的一个子节点。setAttribute()设置元素的属性。innerHTML获取或设置元素内部的HTML内容。使用DOM控制元素2.4使用一个示例说明如何使用前面提到的DOM选择方法<!DOCTYPEhtml><html><head><title>DOMManipulationExample</title></head><body><divid="container"><pid="firstParagraph">这是第一个段落。</p><pid="secondParagraph">这是第二个段落。</p></div>

<script>//创建新的元素节点varnewElement=document.createElement('div');newElement.id='newElement';newElement.innerHTML='<strong>这是一个新的div元素。</strong>';

//创建新的文本节点varnewText=document.createTextNode('这是一些额外的文本。');

//将新的元素节点添加到#container的末尾varcontainer=document.getElementById('container');container.appendChild(newElement);

//将新的文本节点添加到新元素中newElement.appendChild(newText);

//使用insertBefore在第一个段落前插入一个新段落varnewParagraph=document.createElement('p');newParagraph.textContent='这是一个新的段落。';varfirstParagraph=document.getElementById('firstParagraph');container.insertBefore(newParagraph,firstParagraph);

//使用removeChild删除第二个段落varsecondParagraph=document.getElementById('secondParagraph');container.removeChild(secondParagraph);

//使用replaceChild替换第一个段落varreplacementParagraph=document.createElement('p');replacementParagraph.textContent='这是一个替换后的段落。';container.replaceChild(replacementParagraph,firstParagraph);

//使用setAttribute修改#newElement的样式newElement.setAttribute('style','color:blue;');</script></body></html>DOM的事件处理2.5DOM的事件处理是指在Web开发中利用JavaScript监听和响应用户在浏览器中与HTML元素交互时发生的各种事件处理过程。事件可以包括用户行为（如鼠标点击或悬停、键盘输入）或浏览器触发的事件（如页面加载完成、窗口大小变化）。事件处理的基本步骤通常包括：（1）选择元素：先选择要添加事件监听器的DOM元素。（2）定义事件监听器：然后定义当事件发生时要执行的函数，这个函数称为“事件处理器”或“事件监听器”。（3）绑定事件监听器：再将事件监听器绑定到元素上，这可以通过JavaScript中的addEventListener()方法进行事件处理。常用的DOM事件处理方法如表5-6所示。DOM的事件处理2.5方法描述addEventListener(type,listener)为元素添加一个事件监听器。type是监听的事件类型（如'click','mouseover'），listener是当事件发生时执行的函数。removeEventListener(type,listener)移除元素上的一个事件监听器。需要指定事件类型和要移除的监听函数。dispatchEvent(event)触发元素上的指定事件。event是要触发的Event实例。onclick,onmouseover,onmouseout等这些是元素的事件属性，可以直接在HTML元素或通过JavaScript代码中为其分配一个函数来处理相应的事件。event.preventDefault()在事件处理函数中调用，阻止事件的默认行为。例如，在表单提交事件中使用，可以阻止表单的默认提交行为。event.stopPropagation()阻止事件继续传播到其他节点。DOM的事件处理2.5使用一个示例说明如何使用事件处理中的方法。<!DOCTYPEhtml><html><head><title>DOMEventHandlingExample</title></head><body><buttonid="myButton">点击我</button><pid="displayText">按钮尚未被点击。</p><ahref="#"id="preventLink">防止默认行为的链接</a>

<script>//获取需要绑定事件的元素varbutton=document.getElementById('myButton');vardisplayText=document.getElementById('displayText');varpreventLink=document.getElementById('preventLink');

//定义一个事件处理函数functionbuttonClicked(){displayText.textContent='按钮已被点击！';}

//为按钮添加点击事件监听器button.addEventListener('click',buttonClicked);

//移除事件监听器的函数（此例中未调用）functionremoveButtonEventListener(){button.removeEventListener('click',buttonClicked);}

//阻止链接的默认行为preventLink.addEventListener('click',function(event){event.preventDefault();alert('默认行为被阻止，链接不会跳转。');});

//模拟点击事件functionsimulateClick(){varevent=newEvent('click');button.dispatchEvent(event);}

//在3秒后自动触发点击事件setTimeout(simulateClick,3000);</script></body></html>DOM的表单处理2.6（6）DOM的表单处理DOM的表单处理是指使用JavaScript和DOM（文档对象模型）来操作和处理网页表单的过程。这包括获取和设置表单字段的值、验证表单数据、控制表单的提交，以及在用户与表单交互时进行动态更新。利用DOM进行表单处理是现代网页应用中常见的一部分，用于提升用户体验和数据的有效性。方法或属性描述document.forms获取页面上的所有表单。document.getElementById()获取特定的表单或表单元素。element.value获取或设置表单元素（如输入框、单选按钮）的值。HTML5验证属性(required,minlength,pattern,等)在HTML元素上设置这些属性进行简单的验证。appendChild(),removeChild(),createElement()用于动态添加、移除或创建表单元素。form.action,form.method设置表单的提交URL(action)和方法(method，如GET或POST)。DOM的表单处理2.6使用一个示例说明如何使用表单处理中的方法。<!DOCTYPEhtml><html><head><title>DOMFormHandlingExample</title></head><body><formid="myForm"action="/submit-form"method="post"><inputtype="text"id="nameInput"requiredminlength="3"placeholder="Name"><inputtype="number"id="ageInput"requiredpattern="\d+"placeholder="Age"><buttontype="submit">提交</button></form><buttonid="addInput">添加输入框</button>

<script>//获取表单varform=document.getElementById('myForm');//获取并设置表单元素的值varnameInput=document.getElementById('nameInput');nameInput.value='JohnDoe';//动态添加新的表单元素varaddInputBtn=document.getElementById('addInput');addInputBtn.addEventListener('click',function(){varnewInput=document.createElement('input');newInput.type='text';newInput.placeholder='NewInput';form.appendChild(newInput);});

//表单提交事件处理form.addEventListener('submit',function(event){//阻止表单的默认提交行为event.preventDefault();

//检查表单数据varageInput=document.getElementById('ageInput');if(!form.checkValidity()){alert('请正确填写表单！');return;}//处理表单数据（此处为演示，仅打印到控制台）console.log('Name:',nameInput.value);console.log('Age:',ageInput.value);});</script></body></html>E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商品分类管理的实现步骤03商品分类管理页面3.1提供一个商品分类管理页面用于显示所有商品分类，用户能够通过输入框输入分类名称并提交以添加新的一级分类。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>商品分类管理</title><linkrel="stylesheet"href="category.css"></head><body><divid="category-management"><h2>商品分类管理</h2><ulid="category-list"><!--动态添加的分类将出现在这里--></ul><formid="add-category-form"><inputtype="text"id="new-category-name"placeholder="输入新的一级分类名称"/><buttontype="submit">添加一级分类</button></form></div><scriptsrc="category.js"></script></body></html>商品分类管理页面的CSS样式3.2提供一个独立的CSS样式文件，用于美化商品分类管理页面。/*CSS样式*/body{font-family:Arial,sans-serif;}

#category-management{width:60%;margin:0auto;padding:20px;}

#category-list,.sub-category-list{list-style:none;padding:0;}

#category-listli,.sub-category-listli{background-color:#f9f9f9;border:1pxsolid#ddd;margin-bottom:5px;padding:10px;position:relative;}

.sub-category-list{margin-top:10px;margin-left:20px;}

button{margin-left:10px;}

#add-category-forminput[type="text"]{width:70%;padding:10px;}使用DOM操控一级和二级商品分类3.3使用DOM操控一级和二级商品分类的添加和删除。//JavaScript代码letcategories=[{id:1,name:'电子产品',subCategories:[]},{id:2,name:'家居用品',subCategories:[]},//更多初始分类...];

functionloadCategories(){categories.forEach(category=>addCategoryToList(category));}

functionaddSubCategory(category,subCategoryName){constsubCategory={id:Date.now(),name:subCategoryName};category.subCategories.push(subCategory);updateCategoryDisplay(category);}

functionupdateCategoryDisplay(category){constcategoryElement=document.querySelector(`#category-${category.id}`);constsubUl=categoryElement.querySelector('.sub-category-list');subUl.innerHTML='';

category.subCategories.forEach(subCat=>{constsubLi=document.createElement('li');subLi.textContent=subC;

constdeleteSubButton=document.createElement('button');deleteSubButton.textContent='删除';deleteSubButton.onclick=function(){category.subCategories=category.subCategories.filter(sub=>sub.id!==subCat.id);updateCategoryDisplay(category);};

subLi.appendChild(deleteSubButton);subUl.appendChild(subLi);});}

functionaddCategoryToList(category){constli=document.createElement('li');li.id=`category-${category.id}`;li.textContent=;

constsubUl=document.createElement('ul');subUl.className='sub-category-list';

constaddSubCategoryButton

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

温馨提示

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

最新文档

评论

0/150

提交评论