第四章DOM文档对象模型

JavaScript程序设计与应用DOM文档对象模型目

录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作目

录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作一、DOM是什么内置函数DOM基础1、WebAPIsAPI：应用程序编程接口，是一些预定义的接口（如函数等），通过接口我们可以实现某种功能，但是使用时我们不需了解接口这个功能具体是如何实现的。WebAPIs：指浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM）。2、DOM定义文档对象模型DOM（DocumentObjectModel）：是W3C组织推荐的可扩展标记语言（html或者xml）的标准编程接口。是一个与语言无关、与平台无关的标准接口规范。它定义了HTML文档的逻辑结构，给出了一种访问和处理HTML文档的方法。通过DOM接口，JavaScript可以在任何时候访问并操作HTML文档中的任何一部分数据。可以动态地创建文档，遍历文档结构，添加、修改、删除文档内容，改变文档的显示方式等，从而实现页面交互效果。一、DOM是什么内置函数DOM基础1、WebAPIsAPI：应用程序编程接口，是一些预定义的接口（如函数等），通过接口我们可以实现某种功能，但是使用时我们不需了解接口这个功能具体是如何实现的。WebAPIs：指浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM）。2、DOM定义文档对象模型DOM（DocumentObjectModel）：是W3C组织推荐的可扩展标记语言（html或者xml）的标准编程接口。是一个与语言无关、与平台无关的标准接口规范。它定义了HTML文档的逻辑结构，给出了一种访问和处理HTML文档的方法。通过DOM接口，JavaScript可以在任何时候访问并操作HTML文档中的任何一部分数据。可以动态地创建文档，遍历文档结构，添加、修改、删除文档内容，改变文档的显示方式等，从而实现页面交互效果。二、DOM树DOM基础1、定义DOM接口提供了一种依据HTML的文档结构的分层对象模型。在浏览器中，基于DOM的HTML分析器将一个页面转换成一个对象模型的集合（通常称DOM树）。DOM基础2、节点DOM树中的每一个对象我们称之为节点，所以我们也称这个根据文档生成的层次结构是一棵节点树。不管一个文档有多简单或者多复杂，其中的信息都会被转化成一棵对象节点树。在这棵节点树中，有一个根节点即Document节点，所有其他的节点都是根节点的后代节点。DOM中的节点有元素节点、属性节点、文本节点、注释节点等不同类型，最常用的节点类型有元素、文本和属性节点这三种。DOM基础3、节点类型Node.ELEMENT_NODE(1)

一个标记（元素）Node.ATTRIBUTE_NODE(2)

表示一个标记（元素）的属性Node.TEXT_NODE(3)

表示一个元素的文本内容Node.CDATA_SECTION_NODE(4)

在XML文档中表示CharacterData（字符数据）部分Node.ENTITY_REFERENCE_NODE(5)

在文档中表示一个实体引用Node.ENTITY_NODE(6)

在XML文档中表示一个实体Node.PROCESSING_INSTRUCTION_NODE(7)

表示一个文档处理程序使用的特有指令Node.COMMENT_NODE(8)

：表示一个注释Node.DOCUMENT_NODE(9)

表示文档的根节点Node.DOCUMENT_TYPE_NODE(10)

每个文档节点都有一个DocumentType节点，它提供文档类型的定义Node.DOCUMENT_FRAGMENT_NODE(11)

可以将文档片段看作轻量级或者更小型的Document节点。定义这种数据类型是因为通常希望只提取文档的一部分来处理。Node.NOTATION_NODE(12)

在XML文档中表示一个符号DOM基础4、Document对象每个载入浏览器的HTML页面都会成为document对象（即该HTML页面对应的DOM）。document对象使我们可以通过JavaScript对HTML页面中的所有元素进行访问。（1）Document对象document对象是window对象的一部分，可通过window.document属性对其进行访问。（2）Document对象集合DOM基础（3）Document对象属性（4）Document对象方法4、Document对象目

录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作获取元素节点二、获取html元素三、获取其他元素getElementById（‘id名’）：返回的是指定id名的元素getElementsByTagName（’标记名’）：返回的是指定标记名的所有元素的集合，以伪数组的形式存储的getElementsByName（’name名’）：返回的是指定name名的所有元素的集合getElementsByClassName（’类名’）：返回的是指定class名的所有元素的集合querySelector（’选择器’）：返回的是指定选择器的第一个元素querySelectorAll（’选择器’）：返回的是指定选择器的所有元素的集合一、获取body元素document.bodydocument.documentElement目

录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作操作元素一、改变元素内容

利用DOM找到元素，我们可以获取元素的内容并且修改它们。1、innerText、innerHTML2、outerText、outerHTML3、textContent

innerHTML属性可以设置或获取标签所包含的HTML和文本信息(不包括自身标签)

innerText属性可以设置或获取标签所包含的文本信息(不包括内部标签和自身标签)。outerHTML属性可以设置或获取标签自身及其所包含的HTML和文本信息（包括自身标签）

outerText属性在获取时和innerText是相同的效果，但是设置时包含标签自身在内的文本。textContent会获取style=“display:none”中的文本，而innerText不会；

textContent会按照html代码里的格式输出，innerText会根据标签里面的元素独立一行；

innerText对IE的兼容性较好，textContent虽然作为标准方法但是只支持IE8+以上的浏览器，最新的浏览器两个都可以使用操作元素二、操作元素属性除了获取元素内容，获取和设置元素的属性值也是经常进行的操作。一般来说，浏览器在解析HTML页面时元素具有的属性列表是与收集自元素本身表示的信息一起预载入的，并存储在一个关联数组中供稍后访问。1、通过attributes操作元素属性（1）元素的attributes属性保存了该元素的所有html属性值。（2）getAttribute()方法可以获取元素的某个属性。（3）setAttribute()方法可以设置元素的某个属性。（3）removeAttribute()方法可以删除元素的某个属性。2、通过其它方式操作元素属性我们也可以直接通过‘.’或者[]的方式来获取元素的属性（1）常用元素属性，如src、title、id等属性。（2）表单元素属性，如type、value、checked、selected、disabled等属性。（3）使用[]操作属性变量。

操作元素3、样式属性我们可以通过JavaScript修改元素的大小、颜色、位置等样式（1）element.style行内样式操作，可以操作元素style属性。

例如：this.style.color=‘red’（2）element.className类名样式操作，可以操作元素的类

例如：this.className=‘stu’如果修改样式较多，可以采取操作类名方式更改元素样式因为class是一个保留字，因此使用className来操作元素类名属性className会直接更改元素的类名，并覆盖原有的类名。目

录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作利用层级关系获取元素节点一、父子关系1、父节点

node.parentNode2、子节点（1）childNodes（标准）

获取的子节点中包含换行文本节点，一般不提倡使用（2）children(非标准)获取的子节点中不包含换行文本节点（3）第一个子元素

firstChild、firstElementChild(IE9)、children[0]（4）最后一个元素

lastChild、lastElementChild(IE9)、children[length-1]二、兄弟关系1、下一个兄弟node.nextSiblingnextElementSilbling(IE9)2、上一个兄弟node.previousSiblingpreviousElementSilbling(IE9)目

录DOM基础获取元素节点操作元素利用层级关系获取元素节点节点操作节点操作一、创建节点1、创建元素节点：document.createElement(‘tagName’)2、创建文本节点：document.creatTextNode(‘’)二、添加节点1、添加到末尾：node.appendChild(child)2、指定位置插入：node.insertBefore(child,指定元素)三、删除节点node.removeChild(child)四、复制节点（克隆节点）node.cloneNode（）返回调用该方法的节点的第一个副本参数为false只复制节点本身不复制里面的子节点参数为true会复制节点本身以及里面所有的子节点。节点操作五、文档碎片1、定义

当我们用DOM向页面插入元素的时候，每插入一个元素，