《Web前端开发》第13章 DOM.pptx

;13.1DOM概述;13.1.2DOM的作用

1.获取节点

DOM可以获取文档节点，例如获取到某个节点的属性，遍历列表节点的内容，获得表单的输入值等。DOM获取节点后，还可以对节点的属性进行改变。

例如，应用DOM访问表单节点以获取用户输入的用户名信息，如图13-1所示。;2.监听事件

DOM可以监听事件并作出响应，例如用户的单击、改变窗口大小、表单提交等操作。

例如，可以获取表单元素，代码如下。;13.1.3DOM树

DOM树用于将HTML文档组织成一个树型结构，例如，如下HTML文档对应的DOM树如图13-3所示。;每一个节点表示一个Node对象，可以通过nodeType属性来表明节点类型，常见的节点类型包括。

（1）Document类型：表示整个HTML页面文档，document对象也是window对象的一个属性，可以作为全局对象来访问。

（2）Element类型：元素节点，通过访问其id、title等属性，可以获得该节点的相关属性信息。

（3）Attr类型：属性节点。

（4）Text类型：纯文本节点，不包含HTML代码。;13.2DOM操作;1.getElementById()方法

Document对象提供了getElementById()方法，可以通过元素id属性获取元素，返回值为object类型。由于id属性具有唯一性，所以在获取单一元素时推荐使用这种方法。例如。

divid=wrapper/div

script

letwrapper=document.getElementById(wrapper);

console.log(wrapper);

//输出divid=wrapper…/div

/script;2.getElementsByName()方法

Document对象提供了getElementsByName()方法，可以通过元素name属性获取元素，返回值为NodeList对象。name属性以及getElementsByName()方法通常用于表单元素。例如。

formname=level-formaction=service/form_actionmethod=post

labelinputtype=radioname=levelvalue=junior/初级/label

labelinputtype=radioname=levelvalue=senior/高级/label

inputtype=submitvalue=提交/

/form

script

letformNodeList=document.getElementsByName(level-form);

console.log(formNodeList);

//输出NodeList?[form]

letradioNodeList=document.getElementsByName(level);

console.log(radioNodeList);

//输出NodeList(2)?[input,input]

/script;3.getElementsByTagName()方法

Document和Element对象均提供了getElementsByTagName()方法获取指定标签名的元素，返回值为HTMLCollection。

（1）Document对象的getElementsByTagName()方法；

（2）Element对象的getElementsByTagName()方法;【例13-1】应用Document对象的getElementsByTagName()方法获取所有p元素;【例13-2】应用Element对象的getElementsByTagName()方法获取元素。

;4.getElementsByClassName()方法

Document对象和Element对象提供了getElementsByClassName()方法，可以根据CSS类名获取元素，返回值为HTMLCollection。该方法的参数可以是一个类名，也可以是多个类名。当为多个类名时采用空格分隔，如“classAclassB”，类名先后顺序无关。;13.2.2遍历元素

在DOM操作中经常会需要查找某个元素的其他相关元素，比如它的父元素节点，兄弟元素节点或者子节点，可以通过遍历树的方式来遍历文档结构。

DOM中的Node节点对象，包括Document对象，Element对象等，都提供了一些属性来进行遍历操作，其中常见属性如表13-2所示。;13.2.3访问元素属性

元素属性分为内置