JavaScript前端开发案例教程第7章 DOM 教学PPT.pptVIP

本章小结 本章主要讲解如何利用DOM的方式在JavaScript中操作HTML元素和CSS样式，以及根据开发需求能够通过节点的方式添加、移动或删除指定的元素。最后将Web开发中常见的功能以案例的形式实现，如标签栏的切换、列表的增删和移动、以及购物车功能。 通过本章的学习，希望大家能够熟练的运用DOM完成Web开发中常见功能的开发。 7.2 HTML元素操作 获取操作的元素——Element对象的方法和属性 ul id=ul liPHP/liliJavaScript/li ullijQuery/liul /ul script var lis = document.getElementById(ul).getElementsByTagName(li); console.log(lis);// 输出结果：(3) [li, li, li] /script 示例 7.2 HTML元素操作 获取操作的元素——Element对象的方法和属性 除此之外，元素对象还提供了children属性用来获取指定元素的子元素。例如，获取上述示例中ul的子元素。 var lis = document.getElementById(ul).children; console.log(lis); // 输出结果：(3) [li, li, ul] 元素对象的children属性返回的也是对象集合，若要获取其中一个对象，也需通过下标的方式获取，默认从0开始。 另外，document对象中也有children属性，它的第一个子元素通常是html元素。 7.2 HTML元素操作 多 学 一 招 HTMLCollection对象 HTMLCollection对象：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。 NodeList对象：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。 7.2 HTML元素操作 多 学 一 招 HTMLCollection对象 HTMLCollection与NodeList对象的区别： HTMLCollection对象用于元素操作。 NodeList对象用于节点操作。 7.2 HTML元素操作 多 学 一 招 HTMLCollection对象 提示：对于getElementsByClassName()方法、getElementsByTagName()方法和children属性返回的集合中可以将id和name自动转换为一个属性。 7.2 HTML元素操作 多 学 一 招 HTMLCollection对象 li id=test name=testtest/li script var lis1 = document.getElementsByTagName(li); // 获取标签名为li的对象集合 var test = document.getElementById(test); // 获取id为test的li元素对象 lis1.test === test; // 比较结果：true var lis2 = document.getElementsByName(test); // 获取name名为test的对象集合 lis1.test === lis2[0]; // 比较结果：true /script 7.2 HTML元素操作 JavaScript中，若要对获取的元素内容进行操作，则可以利用DOM提供的属性和方法实现。 元素内容 分类 名称 说明 属性 innerHTML 设置或返回元素开始和结束标签之间的HTML innerText 设置或返回元素中去除所有标签的内容 textContent 设置或者返回指定节点的文本内容 方法 document.write() 向文档写入指定的内容 document.writeln() 向文档写入指定的内容后并换行 7.2 HTML元素操作 元素内容 属性属于Element对象，方法属于document对象。 innerHTML在使用时会保持编写的格式以及标签样式。 innerText则是去掉所有格式以及标签的纯文本内容。 textContent属性在去掉标签后会保留文本格式。 7.2 HTML元素操作 元素内容 注意 innerText属性在使用时可能会出现浏览器兼容的问题。因此，推荐在 开发时尽可能的使用i