《JavaScript程序设计》课件-项目5 DOM基础

JavaScript程序设计20211课程导入2任务导入3知识讲解4任务实施项目5-1DOM简介和获取5任务总结知识回顾任务导入知识讲解任务实施任务总结数组对象怎么实例化？字符串对象怎么实例化？提问知识回顾任务导入知识讲解任务实施任务总结任务重难点练习获取元素重点：WebAPIDOM树获取元素知识回顾任务导入知识讲解任务实施任务总结WebAPI简介1.WebAPI简介WebAPI是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而WebAPI包括BOM和DOM两部分。

1.1

初识WebAPIJavaScript的组成部分知识回顾任务导入知识讲解任务实施任务总结WebAPI简介API：应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可。例如，调起手机的摄像头拍摄画面。1.2

WebAPI与API的关系知识回顾任务导入知识讲解任务实施任务总结WebAPI简介WebAPI：主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用WebAPI。例如，console对象、document对象、window对象。document.title='设置新标题'; //设置页面标题console.log(document.title); //获取页面标题document.write('<h1>网页内容</h1>');//将字符串写入页面示例代码知识回顾任务导入知识讲解任务实施任务总结DOM简介2.1

什么是DOMDOM：文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C定义了一系列的DOM接口，利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。在实际开发中，诸如改变盒子的大小、标签栏的切换、购物车功能等带有交互效果的页面，都离不开DOM。2.DOM简介知识回顾任务导入知识讲解任务实施任务总结DOM简介2.2DOM树DOM中将HTML文档视为树结构，被称之为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。DOM树知识回顾任务导入知识讲解任务实施任务总结DOM简介接下来针对DOM中各节点的专有名词解释如下：文档（document）：可以把一个页面当成一个文档元素（element）：页面中的所有标签都是元素节点（node）：网页中的所有内容，在文档树中都是节点（如：元素节点、属性节点、文本节点、注释节点等），在DOM中会把所有的节点都看作是对象，这些对象拥有自己的属性和方法知识回顾任务导入知识讲解任务实施任务总结获取元素3.1

根据id获取元素document.getElementById('id')方法，是由document对象提供的用于查找元素的方法，该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素则返回undefined。<divid="box">你好</div><script>varObox=document.getElementById('box');console.log(Obox); //结果为：<divid="box">你好</script>示例代码3.获取元素知识回顾任务导入知识讲解任务实施任务总结获取元素3.2

根据标签获取元素根据标签名获取元素的两种方式：可以通过document对象获取元素和通过element对象获取元素。document.getElementsByTagName('标签名');element.getElementsByTagName('标签名');语法结构由于相同标签名的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，或称为伪数组，它可以像数组一样用索引来访问元素，但不能使用push()等方法，使用Array.isArray()也可以证明它不是一个数组。知识回顾任务导入知识讲解任务实施任务总结获取元素注意getElementsByTagName()方法获取到的集合是动态集合，也就是说，当页面增加了标签，这个集合中也会自动增加元素。知识回顾任务导入知识讲解任务实施任务总结获取元素

3.3

根据name获取元素document.getElementsByName()方法，是通过name属性来获取元素，一般用于获取表单元素。name属性的值不要求必须是唯一的，多个元素也可以有同样的名字，如表单中的单选框和复选框。document.getElementsByName('name名');语法结构知识回顾任务导入知识讲解任务实施任务总结获取元素<body><p>请选择你最喜欢的水果（多选）</p><label><inputtype="checkbox"name="fruit"value="苹果">苹果</label><label><inputtype="checkbox"name="fruit"value="香蕉">香蕉</label><label><inputtype="checkbox"name="fruit"value="西瓜">西瓜</label><script>varfruits=document.getElementsByName('fruit');

//返回对象集合fruits[0].checked=true;//将fruits中的第1个元素的checked属性值设置为true</script></body>示例代码案例需求：在复选框中选择最喜欢的水果（多选）。知识回顾任务导入知识讲解任务实施任务总结获取元素根据name获取元素知识回顾任务导入知识讲解任务实施任务总结获取元素

3.4

HTML5新增的获取方式HTML5中为document对象新增了querySelector()、querySelectorAll()和getElementsByClassName()方法。注意：这三种方式在使用时需要考虑到浏览器的兼容性问题。知识回顾任务导入知识讲解任务实施任务总结获取元素根据类名获取document.getElementsByClassName()方法，用于通过类名来获得某些元素集合。<body><spanclass="one">英语</span><spanclass="two">数学</span><spanclass="one">语文</span><spanclass="two">物理</span><script>varOspan1=document.getElementsByClassName('one');varOspan2=document.getElementsByClassName('two');Ospan1[0].style.fontWeight='bold';Ospan2[1].style.background='red';</script></body>示例代码知识回顾任务导入知识讲解任务实施任务总结获取元素通过类名获取元素知识回顾任务导入知识讲解任务实施任务总结获取元素querySelector()和querySelectorAll()querySelector()方法用于返回指定选择器的第一个元素对象。querySelectorAll()方法返回指定选择器的所有元素对象集合。<body><divclass="box">盒子1</div><divclass="box">盒子2</div><divid="nav"><ul><li>首页</li><li>产品</li></ul></div></body>结构代码类名：boxid名：nav知识回顾任务导入知识讲解任务实施任务总结获取元素<script>varfirstBox=document.querySelector('.box');console.log(firstBox);//获取class为box的第1个divvarnav=document.querySelector('#nav');console.log(nav);//获取id为nav的第1个divvarli=document.querySelector('li');console.log(li);//获取匹配到的第一个livarallBox=document.querySelectorAll('.box');console.log(allBox);//获取class为box的所有divvarlis=document.querySelectorAll('li');console.log(lis);//获取匹配到的所有li</script>JS代码通过CSS选择器获取元素知识回顾任务导入知识讲解任务实施任务总结获取元素

3.5

document对象的属性document对象提供了一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等，document对象的常用属性如下表：方法作用document.body返回文档的body元素document.title返回文档的title元素document.documentElement返回文档的html元素document.forms返回对文档中所有Form对象引用document.images返回对文档中所有Image对象引用知识回顾任务导入知识讲解任务实施任务总结练习获取页面元素知识回顾任务导入知识讲解任务实施任务总结总结：本章主要讲解了WebAPI的基本概念，如何利用DOM方式在JavaScript中获取元素，并实例演示。

作业：完成练习获取元素。1课程导入2任务导入3知识讲解4任务实施项目5-2节点基础和操作5任务总结知识回顾任务导入知识讲解任务实施任务总结获取元素的方法有几种?document.getElementsByTagName()获取的元素是什么数据类型？提问知识回顾任务导入知识讲解任务实施任务总结任务重难点完成下拉菜单完成简易留言板重点：节点基础节点操作知识回顾任务导入知识讲解任务实施任务总结节点基础1.节点基础

1.1

什么是节点HTML文档可以看作是一个节点树，网页中的所有内容都是节点，一般来说，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这3个基本属性。下面列举常见的节点类型：元素节点，nodeType为1属性节点，nodeType为2文本节点，nodeType为3，文本节点包含文字、空格、换行等知识回顾任务导入知识讲解任务实施任务总结节点基础

1.2

节点层级一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>测试</title></head><body><ahref="#">链接</a><p>段落...</p></body></html>知识回顾任务导入知识讲解任务实施任务总结节点基础DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点。节点之间的层级关系如下：根节点：<html>标签是整个文档的根节点，有且仅有一个父节点：指的是某一个节点的上级节点子节点：指的是某一个节点的下级节点兄弟节点：两个节点同属于一个父节点知识回顾任务导入知识讲解任务实施任务总结节点基础1.3获取节点属性说明firstChild访问当前节点的首个子节点lastChild访问当前节点的最后一个子节点nodeName访问当前节点名称nodeValue访问当前节点的值nextSibiling返回同一树层级中指定节点之后紧跟的节点previousSibling返回同一树层级中指定节点的前一个节点parentNode访问当前元素节点的父节点childNodes访问当前元素节点的所有子节点的集合知识回顾任务导入知识讲解任务实施任务总结节点基础获取父级节点在JavaScript中，可以使用parentNode属性来获得离当前元素的最近的一个父节点，如果找不到父节点就返回为

null，语法格式为：obj.parentNode，obj是一个DOM对象。<body>

<div

class="demo">

<div

class="box"><span

class="child">span元素</span></div>

</div>

<script>

var

child=

document.querySelector('.child');//获取类名为child的span元素

console.log(child.parentNode);//输出离child元素最近的父级节点(box)

</script></body>示例代码案例演示：如何获取当前元素的父节点。知识回顾任务导入知识讲解任务实施任务总结节点基础获取子级节点在JavaScript中，可以使用childNodes属性或者children属性两种方式来获得当前元素的所有子节点的集合，接下来我们就分别介绍这两种方式的用法。方式1：childNodes属性获得的是当前元素的所有子节点的集合，该集合为即时更新的集合。下面通过案例的形式演示如何获取当前元素子节点。知识回顾任务导入知识讲解任务实施任务总结节点基础<ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><script>

var

ul

=

document.querySelector('ul');

var

lis

=

ul.querySelectorAll('li');console.log(lis)

console.log(ul.childNodes);

console.log(ul.childNodes[0].nodeType);

console.log(ul.childNodes[1].nodeType);</script>示例代码案例演示：如何使用childNodes属性获取当前元素的子节点。知识回顾任务导入知识讲解任务实施任务总结节点基础注意childNodes属性返回的是NodeList对象的集合，返回值里面包含了元素节点、文本节点等其他类型的节点。知识回顾任务导入知识讲解任务实施任务总结节点基础方式2：children是一个可读的属性，返回所有子元素节点。children只返回子元素节点，其余节点不返回，目前各大浏览器都支持该属性，在实际开发中推荐使用children。接下来，通过案例的形式演示如何获取当前元素子节点。<ol>

<li>我是li</li>

<li>我是li</li>

<li>我是li</li>

<li>我是li</li></ol>HTML代码案例演示：如何使用children属性获取当前元素的子节点。<script>

var

ul

=

document.querySelector('ol');

var

lis

=

ul.querySelectorAll('li');

console.log(ul.children);//结果为：HTMLCollection(4)

[li,li,li,li]</script>JS代码知识回顾任务导入知识讲解任务实施任务总结节点基础值得一提childNodes属性与children属性虽然都可以获取某元素的子元素，但是两者之间有一定的区别。前者用于节点操作，返回值是NodeList对象集合，后者用于元素操作，返回的是HTMLCollection对象集合。知识回顾任务导入知识讲解任务实施任务总结节点基础方式3：使用firstChild属性和lastChild属性获取子节点，前者返回第一个子节点，后者返回的是最后一个子节点，如果找不到则返回null。需要注意的是它们的返回值包括文本节点和元素节点等。方式4：使用firstElementChild属性和lastElementChild属性获取子元素节点，前者返回第一个子元素节点，后者返回最后一个子元素节点，如果找不到则返回null。需要注意的是，这两个属性有兼容性问题，IE9以上才支持。知识回顾任务导入知识讲解任务实施任务总结节点基础注意实际开发中，firstChild

和lastChild

包含其他节点，操作不方便，而firstElementChild和lastElementChild又有兼容性问题，为了解决兼容性问题，在实际开发中通常使用“obj.children[索引]”的方式来获取子元素节点。obj.children[0] //获取第一个子元素节点obj.children[obj.children.length-1]//获取最后一个子元素节点示例代码知识回顾任务导入知识讲解任务实施任务总结节点基础获取兄弟节点在JavaScript中，可以使用nextSibling属性获得下一个兄弟节点，或者使用previousSibling属性获得上一个兄弟节点，它们的返回值包含元素节点或者文本节点等。如果找不到，就返回null。可以使用nextElementSibling返回当前元素的下一个兄弟元素节点，previousElementSibling属性返回当前元素的上一个兄弟元素节点，如果找不到则返回null。需要注意的是，这两个属性有兼容性问题，IE9以上才支持。实际开发中，nextSibling和previousSibling属性返回值都包含其他节点，操作不方便，而nextElementSibling和previousElementSibling又有兼容性问题。为了解决兼容性问题，在实际开发中通常使用封装函数来处理兼容性。知识回顾任务导入知识讲解任务实施任务总结节点基础function

getNextElementSibling(element){

var

el

=

element;

while

(el

=

el.nextSibling){

if(el.nodeType

===

1){

return

el;}}

return

null;}示例代码知识回顾任务导入知识讲解任务实施任务总结节点基础

【案例】下拉菜单<body>

<ul

class="nav">

<li><a

href="#">微博</a>

<ul></ul>

</li>...（此处省略3个li）

</ul></body>示例代码案例需求：鼠标指针经过菜单时，显示当前下拉框中的内容同时隐藏其他下拉菜单内容编写HTML结构代码知识回顾任务导入知识讲解任务实施任务总结节点基础<script>

var

nav

=

document.querySelector('.nav');//

1.

获取元素

var

lis

=

nav.children;

for

(var

i

=

0;

i

<

lis.length;

i++)

lis[i].onmouseover

=

function()

{{//

2.注册鼠标指针经过和鼠标指针离开事件

this.children[1].style.display

=

'block';//ul为li的第2个子元素

};

lis[i].onmouseout

=

function()

{this.children[1].style.display

=

'none';};

}</script>示例代码鼠标经过，展示当前下拉列表内容知识回顾任务导入知识讲解任务实施任务总结节点基础浏览器预览效果图如下所示：下拉菜单效果知识回顾任务导入知识讲解任务实施任务总结节点操作方法说明document.createElement()创建元素节点document.createTextNode()创建文本节点document.createAttribute()创建属性节点appendChild()在指定元素的子节点列表的末尾添加一个节点insertBefore()为当前节点增加一个子节点（插入到指定子节点之前）getAttributeNode()返回指定名称的属性节点setAttributeNode() 设置或者改变指定名称的属性节点create系列的方法是由document对象提供的，与Node对象无关。2.节点操作知识回顾任务导入知识讲解任务实施任务总结节点操作

2.1

创建节点在DOM中，使用document.createElement('tagName')方法创建由tagName指定的HTML元素，也称为动态创建元素节点。动态创建元素节点的3种常见方式如下：document.write()创建元素，如果页面文档流加载完毕，再调用会导致页面重绘element.innerHTML将内容写入某个DOM节点，不会导致页面全部重绘document.createElement()创建多个元素效率稍微低一点，但是结构更加清晰知识回顾任务导入知识讲解任务实施任务总结节点操作

2.2

添加和删除节点DOM中，提供了node.appendChild()和node.insertBefore()方法用于添加节点，node.removeChild(child)用于删除节点。下面讲解这3种方法的使用。appendChild()方法，将一个节点添加到指定父节点的子节点列表末尾insertBefore(child,指定元素)方法，将一个节点添加到父节点的指定子节点前面removeChild(child)用于删除节点，该方法从DOM中删除一个子节点，返回删除的节点知识回顾任务导入知识讲解任务实施任务总结节点操作

【案例】简易留言板案例分析：利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击“发布”按钮动态创建一个li元素，添加到ul里面。案例实现步骤如下：编写HTML结构，完成页面布局<body>

<textarea

name=""

id=""></textarea>//用户输入留言

<button>发布</button>

<ul></ul>//用于展示留言模块</body>示例代码知识回顾任务导入知识讲解任务实施任务总结节点操作添加留言功能：获取元素<script>//

1.

获取元素

var

btn

=

document.querySelector('button');

var

text

=

document.querySelector('textarea');

var

ul

=

document.querySelector('ul');</script>示例代码知识回顾任务导入知识讲解任务实施任务总结节点操作btn.onclick

=

function()

{

if

(text.value

==

'')

{

alert('您没有输入内容');

return

false;

}

else

{

//

(1)

创建元素

var

li

=

document.createElement('li');

li.innerHTML

=

text.value;

ul.insertBefore(li,

ul.children[0]);//

(2)

添加元素//…(3)此处编写删除留言功能

}

};示例代码添加留言功能：注册事件，添加留言知识回顾任务导入知识讲解任务实施任务总结节点操作浏览器预览效果图如下所示：添加留言知识回顾任务导入知识讲解任务实施任务总结节点操作删除留言功能：首先在添加li时，给li中增加一个a链接，给所有的a链接注册单击事件，找到a的父节点li，进行删除即可。修改第（2）步中