DOM参考手册
DOM 参考手册
-5-
访问页面元素(支持多浏览器)
一、节点的类型：
文档节点（document node） 、元素节点(Element node) 、文本节点(text node) 、属性节点(attribute node) 文档节点代表了文档本身，也是 DOM 树的根。 元素节点代表了 HTML 文档中任何一个标签。 文本节点代表了一个元素标签内部的文本。 属性节点代表了一个开放的元素标签内部所指定的属性。 每个页面都有一个文档节点，其他的节点都源自于这个节点。通过访问元素的节点、文本节点、属性节点，页 面中的所有元素都可以被 Javascript 程序访问。 <html> <head><title>如何访问页面元素</title></head> <body> <h1 id='title'>节点的类型</h1> <p class="top">文本节点</p> </body> </html> 文档节点：document 元素节点：document、html、title、head、body、h1、p 文本节点：如何访问页面元素、节点的类型、文本节点 属性节点：id、class
DOM 节点(node)常用属性和方法
属性/方法 nodeName nodeValue nodetType firstChild lastChild childNodes hasChildNodes() parentNode previousSibling nextSibling attributes appendChild(node) insertBefore(nwNode,oldNode) replaceChild(nwNode,oldNode) 类型/返回类型 String String Number Node Node NodeList Boolean Node Node Node NameNodeMap Node Node Node 说明 节点名称 节点值，由节点类型决定 节点类型：1—元素节点，2—属性节点，3—文本节点 节点的第一个子节点 节点的最后一个子节点 节点的所有子节点集合 本节点有子节点，返回 true, 节点的父节点，如果本节点为根节点，则 parentNode 为 null 节点的前一个兄弟节点 节点的后一个兄弟节点 节点的所有属性映射集合 在本节点的子节点末尾处添加一个子节点 node 在本节点的子节点 oldNode 之前插入一个新节点 newNode 将本节点的子节点 oldNode 替换为新节点 newNode
dom语言技巧
dom语言技巧DOM（文档对象模型）是一种用于访问和操作HTML和XML文档的编程接口。
使用DOM技术，可以轻松地创建、修改、删除和移动文档中的元素和属性。
下面是一些用于操作DOM的技巧：1. 使用getElementById方法获取元素在DOM中，使用getElementById方法可以轻松地获取指定ID的元素。
例如，下面的代码将获取具有ID“myDiv”的元素：var myDiv = document.getElementById('myDiv');2. 使用setAttribute方法设置属性使用setAttribute方法可以设置指定元素的属性。
例如，下面的代码将设置具有ID“myDiv”的元素的“class”属性为“myClass”：myDiv.setAttribute('class', 'myClass');3. 使用appendChild方法添加子元素使用appendChild方法可以将新元素添加为指定元素的子元素。
例如，下面的代码将创建一个新的段落元素，并将其添加为具有ID“myDiv”的元素的子元素：var newParagraph = document.createElement('p');myDiv.appendChild(newParagraph);4. 使用removeChild方法删除子元素使用removeChild方法可以删除指定元素的子元素。
例如，下面的代码将删除具有ID“myDiv”的元素的第一个子元素：myDiv.removeChild(myDiv.firstChild);5. 使用innerHTML属性设置元素内容使用innerHTML属性可以设置指定元素的HTML内容。
例如，下面的代码将设置具有ID“myDiv”的元素的HTML内容为“Hello World”：myDiv.innerHTML = 'Hello World';这些技巧只是操作DOM的冰山一角。
教学大纲 dom
教学大纲 dom教学大纲 DOM在计算机科学领域，DOM（文档对象模型）是一种用于表示和操作HTML、XML等文档结构的标准。
DOM定义了一种树形结构，通过它可以访问文档中的各个元素，从而实现对文档的修改、删除、添加等操作。
教学大纲DOM，作为一种教学方法，旨在帮助学生更好地理解和掌握DOM的概念、原理和应用。
一、DOM的基本概念和原理DOM将文档表示为一个树形结构，树的每个节点都代表文档中的一个元素。
通过DOM，我们可以通过节点之间的关系来访问和操作文档中的元素。
DOM的基本概念包括节点、属性、方法等。
节点是DOM树的基本单位，可以是元素节点、文本节点、注释节点等。
属性则是节点的特征，如节点的名称、值等。
方法则是用于操作节点的函数，如添加节点、删除节点等。
DOM的原理是通过解析文档，将文档中的元素转换为DOM树的节点。
在解析过程中，DOM解析器会根据文档的结构和标签等信息，构建出相应的节点，并建立节点之间的关系。
通过这种方式，我们可以使用DOM提供的方法和属性来访问和操作文档中的元素。
二、DOM的应用场景DOM在Web开发中有着广泛的应用场景。
其中，最常见的应用场景之一是动态地修改和更新网页内容。
通过DOM，我们可以实现在网页中插入、删除和修改元素，从而实现动态效果。
例如，我们可以通过DOM来实现网页的导航菜单，在用户点击菜单项时动态地添加或删除相应的内容。
此外，DOM还可以用于表单验证和数据处理。
通过DOM，我们可以获取表单中的用户输入，并进行验证和处理。
例如，我们可以使用DOM的属性和方法来检查用户输入的合法性，或者将用户输入的数据发送到服务器进行处理。
三、DOM的优势和局限性DOM作为一种标准，具有许多优势。
首先，DOM是跨平台的，可以在不同的浏览器和操作系统上使用。
其次，DOM提供了丰富的方法和属性，可以满足各种操作和需求。
此外，DOM还支持事件处理和动态效果，使得网页更加丰富和交互性。
DOM
1什么是 DOM？ ？通过 JavaScript，您可以重构整个 HTML 文档。
您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。
这个入口， 连同对 HTML 元素进行添加、 移动、 改变或移除的方法和属性， 都是通过文档对象模型来获得的 （DOM） 。
在 1998 年，W3C 发布了第一级的 DOM 规范。
这个规范允许访问和操作 HTML 页面中的每一个单独 的元素。
所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
DOM 被分为不同的部分（核心、XML 及 HTML）和级别（DOM Level 1/2/3）： 被分为不同的部分（核心、 ）和级别（ ）： Core DOM 定义了一套标准的针对任何结构化文档的对象XML DOM 定义了一套标准的针对 XML 文档的对象 HTML DOM 定义了一套标准的针对 HTML 文档的对象。
您可以在我们的《W3C 教程》阅读更多有关 W3C DOM 规范/级别的信息。
HTML 文档中的每个成分都是一个节点。
文档中的每个成分都是一个节点。
节点根据 DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：• 整个文档是一个文档节点 • 每个 HTML 标签是一个元素节点 • 包含在 HTML 元素中的文本是文本节点 • 每一个 HTML 属性是一个属性节点 • 注释属于注释节点Node 层次2节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。
HTML 文档中的每个元素、属性、文本等都代 表着树中的一个节点。
树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节 点为止。
下面这个图片表示一个文档树（节点树）：棵节点树中的所有节点彼此都是有关系的。
XMLDOM手册
XMLDOM是用来访问和操作XML文档的编程接口规范。
1、简介XMLDOM被设计为可用于任何语言和任何操作系统。
借助DOM，程序员可以创建XML文档、遍历其结构，增、改、删其元素。
DOM将整个XML文档视作一棵树，文档级的元素是树的根。
2、MS的XML解析，IE5.0以上。
是一个COM组件，至少包含下列对象：（1）Micosoft.XMLDOM（2）Micosoft.XMLDOM.parseError，有如下属性：（5）NodeList的W3C规定的属性和方法。
async：一个布尔标识，说明请求是否为异步的。
如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作userID 用户ID，用于服务器身份验证password 用户密码，用于服务器身份验证XMLHTTP对象的Send方法用Open方法对Request对象进行初始化后，调用Send方法发送XML数据：poster.send XML-dataSend方法的参数类型是Variant，可以是字符串、DOM树或任意数据流。
发送数据的方式分为同步和异步两种。
在异步方式下，数据包一旦发送完毕，就结束Send 进程，客户机执行其他的操作；而在同步方式下，客户机要等到服务器返回确认消息后才结束Send进程。
XMLHTTP对象中的readyState属性能够反映出服务器在处理请求时的进展状况。
客户机的程序可以根据这个状态信息设置相应的事件处理方法。
属性值及其含义如下表所示：值说明0 Response对象已经创建，但XML文档上载过程尚未结束1 XML文档已经装载完毕2 XML文档已经装载完毕，正在处理中3 部分XML文档已经解析4 文档已经解析完毕，客户端可以接受返回消息客户机处理响应信息客户机接收到返回消息后，进行简单的处理，基本上就完成了C/S之间的一个交互周期。
客户机接收响应是通过XMLHTTP对象的属性实现的：● responseTxt：将返回消息作为文本字符串；● responseXML：将返回消息视为XML文档，在服务器响应消息中含有XML数据时使用；● responseStream：将返回消息视为Stream对象。
DOM可以做什么
DOM 可以做什么？学习过程即将开始，还是先来几个实际例子，看看 DOM 可以做什么吧。
改变页面的背景教程里有如下一段改变网页背景颜色的 JavaScript 代码。
function ChangeColor(){ document.body.bgColor="yellow" }其实在 HTML DOM 简介里面我们就已经做过一个类似的例子了。
在这里我们还是做点更 有趣的例子吧。
隐藏和显示隐藏段落显示段落 上面的按钮可以控制我的显示和消失哦。
这个特效就是通过 JavaScript 配合 HTML DOM 来完成的。
代码如下：JavaScript 代码： <script type="text/javascript"> function hide(){ document.getElementById("hiddenTest").style.display = "none" ; } function show(){ document.getElementById("hiddenTest").style.display = "block" ; } </script> HTML 代码： <form action="#"> <button onclick="hide(); return false;" value="隐藏" >隐藏段落 </button><button onclick="show(); return false;" value="显示" >显示段落 </button> </form> <p id="hiddenTest">上面的按钮可以控制我的显示和消失哦。
dom标准中定义的方法
dom标准中定义的方法
DOM标准中定义了多种方法，用于对文档结构进行操作和修改。
以下是其中一些常用的方法：
1. getElementById(id)：根据元素的id属性选择并返回匹配的
元素。
2. getElementsByTagName(tagName)：根据元素的标签名选择
并返回匹配的元素列表。
3. getElementsByClassName(className)：根据元素的类名选择
并返回匹配的元素列表。
4. createElement(tagName)：创建一个具有指定标签名的新元素。
5. createTextNode(text)：创建一个包含指定文本内容的新文本
节点。
6. appendChild(node)：将一个节点作为子节点添加到指定元素
的末尾。
7. removeChild(node)：从指定元素中移除一个子节点。
8. replaceChild(newNode, oldNode)：用一个新节点替换指定元
素中的一个旧节点。
9. addEventListener(event, function)：向元素添加一个事件监听
器。
10. removeEventListener(event, function)：从元素移除一个事件监听器。
11. setAttribute(name, value)：设置元素的指定属性的值。
12. removeAttribute(name)：从元素中移除指定属性。
这些方法只是DOM标准中定义的一小部分，还有更多方法可用于处理和操作元素、文本节点、属性等。
dom1 教案
dom1 教案以下是一个关于DOM（文档对象模型）的教案示例，供您参考：一、教学目标1. 理解DOM的概念和作用。
2. 掌握DOM的基本操作方法。
3. 能够使用DOM操作HTML文档。
二、教学内容1. DOM概述DOM是文档对象模型（Document Object Model）的缩写，它是一种编程接口，用于表示和交互HTML或XML文档。
DOM将文档解析为对象结构，使得程序能够动态地访问和更新文档的内容、结构和样式。
2. DOM树结构DOM将HTML或XML文档解析为一棵节点树。
根节点是document对象，其他节点包括元素节点、属性节点和文本节点等。
通过遍历DOM树，可以获取和修改文档中的元素。
3. DOM操作方法（1）获取元素：使用getElementById()、getElementsByClassName()、getElementsByTagName()等方法获取元素对象。
（2）修改元素：使用innerHTML、textContent等方法修改元素的内部HTML或文本内容。
（3）添加和删除元素：使用appendChild()、removeChild()等方法添加或删除DOM树中的节点。
（4）样式操作：使用style属性直接修改元素的CSS样式，或使用className属性切换元素的类名。
三、教学步骤1. 导入DOM的概念和作用，展示一个简单的HTML文档示例。
2. 讲解DOM树的结构，通过图示展示节点之间的关系。
3. 介绍常用的DOM操作方法，通过实例演示如何获取、修改、添加和删除元素。
4. 演示如何使用DOM操作样式，包括直接修改style属性和切换类名。
5. 让学生练习使用DOM操作HTML文档，通过编写代码实现简单的网页动态效果。
6. 总结本次课程的主要内容，强调DOM在前端开发中的重要性和应用场景。
DOM简介属性及操作
DOM的官方定义DOM Document Object Model 文档对象模型。
DOM的官方定义：W3C的DOM，可以使程序或脚本(JS或AS、JScript)，动态的访问或操作文档的内容、结构、样式。
DOM只是一个标准，就是操作网页的标准。
而这个标准(模型)在浏览器中，以“对象”的方式实现。
DOM的分类●核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。
●HTMLDOM：针对HTML文档，提供的专有的属性和方法。
●XMLDOM：针对XML文档，提供的专有的属性和方法。
●EventDOM：事件DOM，提供了很多的常用事件。
●CSSDOM：提供了操作CSS的一个接口。
HTML节点树DOM中节点的类型：●document文档节点：代表整个网页，document文档节点不对应标记。
是访问文档中各元素的起点。
●element元素节点：元素节点对应于网页中的各标记。
●attribute属性节点：每个元素都有若干个属性。
●text文本节点：文本节点是最底层节点。
核心DOM公共属性和方法●nodeName：节点名称。
●nodeV alue：节点的值。
●firstChild：第一个子节点。
●lastChild：最后一个子节点。
●parentNode：父节点。
●childNodes：子节点列表，是一个数组。
节点访问为什么，document.firstChild找到的不是HTML节点呢？DOM是针对HTML4.01开发的。
我们现在是XHTML1.0。
所以，要想使用核心DOM中的属性和方法，必须去掉DTD类型定义。
为什么，node_body.firstChild找不到table节点？在Firefox下，会把空格或换行，当成一个文本节点。
因此，所有标记之间的空格和换行，都去掉。
查找html节点的方法●document.firstChild●document.documentElement(兼容性较好)查找body节点的方法●stChild●document.body(推荐使用)节点属性1、getAttribute()——获取属性的值●描述：获取节点属性的值。
第9章DOM基础
DOM基础学习要点：1.DOM介绍2.获取元素一．DOM介绍DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document 对象；M（模型）可以理解为网页文档的树型结构。
1.节点加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。
DOM将这种树型结构理解为由节点组成。
节点树从上图的树型结构，我们理解几个概念，html标签没有父辈，没有兄弟，所以html标签为根标签。
head标签是html子标签，meta和title标签之间是兄弟关系。
如果把每个标签当作一个节点的话，那么这些节点组合成了一棵节点树。
二．获取元素元素节点方法方法说明getElementById() 获取特定ID元素的节点getElementsByTagName() 获取相同元素的节点列表getElementsByName() 获取相同名称的节点列表getElementsByClassName() 获取相同class名称的节点列表1.getElementById()方法getElementById()方法，接受一个参数：获取元素的ID。
如果找到相应的元素则返回该元素的HTMLDivElement对象，如果不存在，则返回null。
document.getElementById('box'); //获取id为box的元素节点PS：上面的例子，默认情况返回null，这无关是否存在id="box"的标签，而是执行顺序问题。
解决方法，1.把script调用标签移到html末尾即可；2.使用onload事件来处理JS，等待html加载完毕再加载onload事件里的JS。
window.onload = function () { //预加载html后执行document.getElementById('box');};PS：id表示一个元素节点的唯一性，不能同时给两个或以上的元素节点创建同一个命名的id。
DOM的基本方法和属性
DOM的基本⽅法和属性DOM ⽅法创建节点：以下DOM⽅法的基本⽤途是创建新的节点。
createElement():createElement()⽅法将按照给定的标签名创建⼀个新的元素节点。
这个⽅法的返回值是⼀个指定新元素节点的引⽤指针：reference = document.createElement(element)这个⽅法只有⼀个参数：将被创建的元素的名字。
这是⼀个字符串：reference = document.createElement("p")reference = document.createElement("h1")createTextNode()：createTextNode()⽅法是创建⼀个含着给定⽂本的新⽂本节点。
这个⽅法的返回值是⼀个指向新建⽂本节点的引⽤指针：reference = document.createTextNode(text)这个⽅法只有⼀个参数：新建⽂本节点所包含的⽂本字符串：reference = document.createTextNode("你好，world")例：第⼀步、创建⼀个包含着⽂本“试验⼀”的⽂本节点，并把由createTextNode()⽅法返回的引⽤指针赋值给了变量message。
var message = document.createTextNode("实验⼀");第⼆步、⽤createElement()⽅法创建⼀个 p 元素，并将其引⽤指针赋值给变量containervar container = document.createElement("p");第三步、⽤appendChild()⽅法把message⽂本节点插⼊了container元素节点container.appendChild(message);第四步、把刷新后的container元素追加给了⽂档body元素document.body.appendChild(container);复制节点：cloneNode()cloneNode()⽅法将为给定节点创建⼀个副本。
dom常见的操作方法
dom常见的操作方法DOM是指文档对象模型（Document Object Model），它可以将文档（HTML、XML）表示为一个具有层次结构的树形结构。
在JavaScript 中，通过操作DOM，我们可以实现对网页元素的增删改查等操作。
下面是DOM的常见操作方法：一、查询元素1.通过元素的id查询：document.getElementById('id')2.通过元素的类名查询：document.getElementsByClassName('class')3.通过元素的标签名查询：document.getElementsByTagName('tag')4.通过选择器查询：document.querySelector('selector')或document.querySelectorAll('selector')，其中querySelector返回匹配的第一个元素，querySelectorAll返回匹配的所有元素。
二、创建元素1.创建元素：document.createElement('tag')2.创建文本节点：document.createTextNode('text')3.将文本节点添加到元素中：element.appendChild(textNode)三、操作元素属性1.获取元素属性值：element.getAttribute('attribute')2.设置元素属性值：element.setAttribute('attribute', 'value')四、操作元素样式1.获取元素样式值：element.style.property2.设置元素样式值：element.style.property = 'value'五、操作元素内容1.获取元素内容：element.innerHTML2.设置元素内容：element.innerHTML = 'content'3.获取元素文本内容：element.innerText六、操作元素位置1.获取元素相对于文档的位置：element.getBoundingClientRect()2.获取元素的父节点：element.parentNode3.插入元素到指定位置：parentElement.insertBefore(newElement, targetElement)七、操作元素事件1.添加事件监听器：element.addEventListener('event',function(){})2.移除事件监听器：element.removeEventListener('event', function(){})总结：DOM操作是JavaScript中的重要部分，在前端开发中经常需要对网页元素进行增删改查等操作。
DOM基本介绍
DOM基本介绍9-1 DOM基本介绍9-1-1什么是DOM⾸先，我们需要介绍什么是DOM。
DOM的英语全称为Document Object Model,翻译成中⽂就是⽂档对象模型。
也就是说，将整个⽂档看作是⼀个对象。
⽽⼀个⽂档⼜是由很多节点组成的，那么这些节点也可以被看作是⼀个个的对象。
DOM⾥⾯的对象属于宿主对象，需要浏览器来作为宿主。
⼀旦离开了浏览器这个环境，那么该对象将不复存在。
同样，上⼀章我们所介绍的 BOM也是如此，需要浏览器来作为宿主，所以它也是⼀个宿主对象。
DOM的作⽤如下：·浏览器提供的操纵HTML⽂档内容的应⽤程序接⼝·⽤于对⽂档进⾏动态操作，如增加⽂档内容，删除⽂档内容，修改⽂档内容等等9-1-2 DOM 历史在介绍了什么是DOM之后，接下来我们来看⼀下DOM的⼀个发展史。
⽽⼀说到DOM的发展史，那就不得不介绍DOM的级别。
这⾥我们对DOM的级别来进⾏⼀个简单的介绍，如下：DOM Level 0：⾸先，我们需要确定的是在DOM标准中并没有DOM0级这个级别。
所谓的DOM0级是DOM历史坐标中的⼀个参照点⽽已，怎么说呢，DOM0级指的是IE4和N etscape 4.0这些浏览器最初⽀持的DOM相关⽅法。
主要关注于常见的页⾯元素，⽐如图像，链接和表单。
有些现在图像和表单的那些⽅法，⽬前依然可以被⽤在当前版本的DOM中。
DOM Level 1：于1998年10⽉成为W3C的推荐标准。
DOM1级由两个模块组成：DOM核⼼ (DOM Core)和DOM HTML。
这个版本引⼊了⽹页的完整模型，允许在⽹页的每个部分进⾏导航。
DOM Level 2：对DOM level 1 做了扩展，于20001年出版，引⼊了流⾏的 getElementById()⽅法，让访问⽹页上的特定元素变得更加容易。
DOM Level 3：对DOM level 2做了进⼀步的扩展，于2004年出版。
常用的dom方法
常用的dom方法常用的DOM方法包括以下几类：元素选择、节点操作、属性操作、样式操作、事件处理以及动画效果。
一、元素选择：DOM方法可以通过各种方式选择和访问页面上的元素节点。
1. getElementById(id)：根据元素的id属性值获取元素节点。
2. getElementsByClassName(className)：根据元素的类名获取元素节点。
3. getElementsByTagName(tagName)：根据元素的标签名获取元素节点。
4. querySelector(selector)：根据CSS选择器选择第一个匹配的元素节点。
5. querySelectorAll(selector)：根据CSS选择器选择所有匹配的元素节点。
二、节点操作：DOM方法可以对元素节点进行创建、插入、删除、替换等操作。
1. createElement(tagName)：创建一个具有指定标签名的元素节点。
2. createTextNode(text)：创建一个包含指定文本内容的文本节点。
3. appendChild(node)：将指定节点添加到父节点的子节点列表的最后一个位置。
4. insertBefore(newNode, referenceNode)：在参考节点之前插入新节点。
5. removeChild(node)：从父节点移除指定的子节点。
6. replaceChild(newNode, oldNode)：用新节点替换指定的子节点。
三、属性操作：DOM方法可以获取和修改元素节点的属性值。
1. getAttribute(name)：获取元素节点指定属性名的属性值。
2. setAttribute(name, value)：设置元素节点指定属性名的属性值。
3. removeAttribute(name)：移除元素节点指定属性名的属性值。
四、样式操作：DOM方法可以获取和修改元素节点的样式。
1. className：获取或设置元素节点的class属性值。
dom 的准则
dom 的准则DOM（文档对象模型）是一种用于表示和操作HTML、XML等文档的标准。
DOM提供了一种将文档解析为一个由节点和对象（包括元素、文本等）组成的树结构的方式，使得开发者可以通过对树中节点的操作来修改文档的结构、样式和内容。
DOM的设计准则之一是避免在文章中插入任何网络地址。
这是因为网络地址可能会包含不安全或不适当的内容，甚至可能导致恶意软件的传播。
因此，在使用DOM时，开发者应该遵循这一准则，避免在文章中插入任何网络地址，以确保文档的安全性和可靠性。
另一个准则是文章中不得包含数学公式或计算公式。
这是因为数学公式和计算公式可能难以理解和解释，会给读者带来困扰。
在使用DOM时，开发者应该避免使用数学公式和计算公式，而是使用简洁明了的语言来表达思想和观点，以提高文章的可读性和可理解性。
确保文章内容的独一性也是DOM的重要准则之一。
重复出现的内容会让读者感到枯燥和无聊，降低文章的吸引力。
在使用DOM时，开发者应该确保文章内容的独一性，避免重复出现相同的观点和表述，以保持文章的新鲜感和吸引力。
文本的结构合理和段落明晰也是DOM的准则之一。
通过合理的结构和明晰的段落，可以使文章更易于阅读和理解。
在使用DOM时，开发者应该合理划分文章的结构，使用适当的标题来引导读者，以增强阅读流畅性和理解度。
避免使用依赖图像的语句也是DOM的准则之一。
图像是一种视觉信息，对于一些视觉障碍的读者来说可能无法理解和解释。
在使用DOM时，开发者应该避免使用依赖图像的语句，而是使用简洁明了的语言来表达思想和观点，以提高文章的可读性和可理解性。
不得在文章中反复提出同一个问题也是DOM的准则之一。
重复的问题会让读者感到烦躁和无聊，降低文章的吸引力。
在使用DOM 时，开发者应该避免在文章中反复提出同一个问题，而是使用简洁明了的语言来表达观点和解决问题，以保持文章的新鲜感和吸引力。
文章应刻画明确，句式流畅，并使用丰富多样的词汇来表达。
第4章DOM基础及高级DOM
第4章DOM基础及高级DOMDOM基础及高级DOM第4章DOM基础及高级DOM技术在前面的章节中，简要讲解了Ajax技术原理以及技术体系，Ajax技术是一种前台技术，良好的JavaScript基础是进行Ajax技术开发的关键。
在本章及后续几章里，将要学习JavaScript高级应用部分，为后续的Ajax开发课程打下良好的基础。
在本章中将要学习JavaScript 中，最重要的对象DOM,DOM对象可以使开发者将HTML页面作为XML (可扩展标记语言)文档处理和查看。
由于XML具有跨语言、跨平台的特征，DOM对象在Ajax技术中得到了广泛的使用。
DOM基础及高级DOM4.1 什么是DOM对象在本节中将要学习DOM对象的基础知识，如层次结构、特定的DOM对象等基础知识。
读者可以通过本节对DOM对象的学习有一个基本的概念。
DOM基础及高级DOM4.1.1 XML-无限数据传输讲解DOM对象就不得不提到XML,尽管在某种意义上DOM对象很大程度上受到DHTML的影响，但是W3C还是将DOM对象首先应用于XML。
XML是由早期的SGML(标准通用标记语言)派生出来的，SGML还派生出了HTML。
SGML是1986发布的信息管理国际标准(ISO 8879)。
SGML主要用于定义独立于平台的文档格式和索引、链接信息。
SGML为用户提供了一种类似语法的机制，用于定义文档的结构和指示文档的标签。
标签由一个包裹在””、””之间的文本组成，如myTag。
起始标签表示一个文档区域起始处如Start。
结束标签表示一个文档区域的结束，如/End。
结束标签由”/”,””包裹着文本构成。
注意结束标签中的文本必须与起始标签一致，即起始标签必须和结束标签配对。
SGML还允许在标签中定于特定于当前标签的特性，如”A href=”””。
读者一定发现这和HTML非常相似，HTML就是由SGML发展而来的。
DOM基础及高级DOM4.1.2 XML文档的节点层次XML文档在书写时遵循树形结构即DOM树。
DOM的基本操作
DOM的基本操作DOM（Document Object Model，文档对象模型）是一种表示和操作HTML和XML文档的程序接口。
通过DOM，我们可以使用JavaScript或其他编程语言来访问和操作HTML文档的各个元素，实现改变页面结构、样式和内容等功能。
下面是对DOM的基本操作的详细介绍。
1.获取元素DOM提供了多种方法来获取HTML文档中的元素，常用的方法有：- `getElementById(`：通过元素的id属性获取元素，返回一个匹配的元素对象。
- `getElementsByClassName(`：通过元素的class属性获取元素，返回一个包含所有匹配元素的元素集合。
- `querySelector(`：通过选择器获取单个元素，返回第一个匹配的元素对象。
- `querySelectorAll(`：通过选择器获取所有匹配的元素，返回一个包含所有匹配元素的静态节点列表。
2.修改元素的内容和属性DOM提供了多种方法来修改元素的内容和属性，常用的方法有：- `innerHTML`：设置或获取元素的HTML内容。
- `setAttribute(`：设置元素的属性值。
- `getAttribute(`：获取元素的属性值。
- `classList.add(`：给元素添加一个或多个类名。
- `classList.remove(`：从元素中移除一个或多个类名。
3.创建和插入元素DOM提供了多种方法来创建和插入新的元素节点，常用的方法有：- `createElement(`：创建一个新的元素节点。
- `createTextNode(`：创建一个包含指定文本的文本节点。
- `appendChild(`：在指定元素的最后一个子节点后插入一个新的子节点。
- `insertBefore(`：在指定元素的一些子节点前插入一个新的子节点。
- `replaceChild(`：用一个新的子节点替换指定元素的一些子节点。
DOM的基本操作
DOM的基本操作1.DOM属性的基本操作（增／删／改／查）改变元素的内容(innerHTML)，属性(value)，样式(width,height,background)也就是对DOM进⾏增删改查DOM的属性操作，增删改查什么是元素的属性？class就是元素的属性，写在元素内的所有东西都是元素的属性，⽐如link的href，img的src等元素的属性是什么，分为两种，⼀种叫内置属性，⼀种叫⾮内置属性。
内置属性可以直接通过点"."进⾏操作tagName //返回值是当前元素的标签名innerHTML／innerText //返回值是当前元素的内容id //返回值是当前元素的IDtitle //获取title的标签值，这个title是从document中获取的className //返回值是当前元素的classhref //返回值是当前的href的值以上这些属性既可以获取，也可以设置⾮内置属性需要通过⼀些节点的⽅法进⾏操作，注意：节点的⽅法，前缀⼀定是节点getAttribute() //获取元素的属性setAttribute() //设置／修改元素的属性，低版本的IE不兼容;接收两个参数，属性名和属性值removeAttribute() //删除元素的属性，低版本的IE不兼容2.节点根据DOM规定，HTML⽂档中的每个成分都是⼀个节点。
DOM是这样规定的：整个⽂档是⼀个⽂档节点每个HTML标签是⼀个元素节点包含在HTML元素中的⽂本是⽂本节点每⼀个HTML属性是⼀个属性节点注释属于注释节点相当于HTML⽂档中的所有内容都是节点，元素是节点的别称，节点包含元素，当然节点还有好多细化的种类如何获取DOM节点：对象.parentNode //获得⽗元素节点对象.children //获得⼦元素节点的集合，不包含空⽩节点//但IE7包含⾸个注释节点(前⾯没有元素节点)，IE8包含所有注释节点对象.childNodes //获得所有⼦节点的集合，包括空⽩节点//IE7/8不包含空⽂本节点，但IE7包含⾸个注释节点(前⾯没有元素节点)，IE8包含所有注释节点如何获取属性节点：对象.attributes //获得所有属性节点，返回⼀个数组3.childNodes／过滤空⽩节点通过对象.childNodes 获得所有⼦节点的集合节点属性 nodeType 返回值为数值节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue)元素节点 1 标签名 null⽂本节点 3 #text ⽂本注释节点 8 #comment 注释的⽂字⽂档节点 9 #document null属性节点 2 属性名属性值通过遍历所有⼦节点，将空⽩节点过滤掉，得出所有的元素节点4.⾼级选取firstChild／lastChild／parentNode／previousSibling／nextSibling⽗（parent）、⼦（child）和同胞（sibling）等术语⽤于描述这些关系。
原生dom操作方法
原生dom操作方法原生DOM操作是指使用JavaScript中的原生方法和属性来操作HTML文档中的元素。
DOM（文档对象模型）是浏览器将HTML文档解析成一个树状结构，通过DOM可以对这个树状结构进行访问和操作。
在使用原生DOM操作之前，我们首先需要获取到HTML文档中的元素。
有多种方式可以获取元素，最常用的是使用getElementById、getElementsByClassName和getElementsByTagName等方法。
这些方法可以通过元素的id、类名和标签名来获取相应的元素。
获取元素后，我们就可以对其进行一系列的操作。
一、属性操作1. 获取和设置属性可以使用getAttribute和setAttribute方法来获取和设置元素的属性。
获取元素属性var value = element.getAttribute('attributeName');设置元素属性element.setAttribute('attributeName', value);2. 获取和设置属性值可以通过直接获取和设置元素的属性值来操作元素的属性。
获取元素属性值var value = element.attributeName;设置元素属性值element.attributeName = value;3. 操作样式可以获取和设置元素的样式类名、内联样式和计算样式等。
通过classList属性可以操作元素的样式类名。
添加样式类element.classList.add('className');删除样式类element.classList.remove('className');切换样式类element.classList.toggle('className');检查是否包含样式类element.classList.contains('className');通过style属性可以操作元素的内联样式。
DOM常见属性及用法
DOM常见属性及⽤法1：innerHTML、outerHTML、innerText、outerTextinnerHTML: 设置或获取位于对象起始和结束标签内的HTML。
outerHTML: 设置或获取对象及其内容的HTML。
innerText: 设置或获取位于对象起始和结束标签内的⽂本。
outerText: 设置（包括标签）或获取（不包括标签）对象的⽂本。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>DOM</title></head><body><ul id="test"><li><i>点击1</i></li><li>点击2</li><li>点击3</li><li>点击4</li></ul><script type="text/javascript">var test = document.getElementById('test');var lis = test.getElementsByTagName('li');var handlers = function (nodes) {var i;for (i = 0; i < nodes.length; i += 1) {nodes[i].onclick = function(){console.log(this.innerHTML);console.log(this.outerHTML);console.log(this.innerText);console.log(this.outerText);}}};handlers(lis);#results//<i>点击1</i>//<li><i>点击1</i></li>//点击1//点击1</script></body></html>特别说明： innerHTML是符合W3C标准的属性，⽽innerText只适⽤于IE浏览器，因此，尽可能地去使⽤innerHTML，⽽少⽤innerText，如果要输出不含HTML标签的内容，可以使⽤innerHTML取得包含HTML标签的内容后，再⽤正则表达式去除HTML标签。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
DOM参考手册Anchor 对象Anchor 对象代表一个HTML 超链接。
在HTML 文档中<a> 标签每出现一次，Anchor 对象就会被创建。
锚可用于创建到另一个文档的链接（通过href 属性），或者创建文档内的书签。
Anchor 对象的属性属性描述：●accessKey 设置或返回访问一个链接的快捷键。
●charset 设置或返回被链接资源的字符集。
●coords 设置或返回逗号分隔列表，其中包含了图像映射中一个链接的坐标。
●href 设置或返回被链接资源的URL。
●hreflang 设置或返回被链接资源的语言代码。
●id 设置或返回一个链接的id。
●innerHTML 设置或返回一个链接的内容。
●name 设置或返回一个链接的名称。
●rel 设置或返回当前文档与目标URL 之间的关系。
●rev 设置或返回目标URL 与之间当前文档的关系。
●shape 设置或返回图像映射中某个链接的形状。
●tabIndex 设置或返回某个链接的T ab 键控制次序。
●target 设置或返回在何处打开链接。
●type 设置或返回被链接资源的MIME 类型。
标准属性：●className 设置或返回元素的class 属性。
●dir 设置或返回文本的方向。
●lang 设置或返回元素的语言代码。
●title 设置或返回元素的title。
属性说明：1、accessKey 属性可设置或返回访问一个链接的键盘按键。
请使用Alt + accessKey 为拥有指定快捷键的元素赋予焦点。
语法：anchorObject.accessKey=accessKey实例：document.getElementById('w3').accessKey="w"2、tabIndex 属性可为链接设置或返回tab 键控制次序。
语法：anchorObject.tabIndex=tabIndex实例：下面的例子可更改三个链接的tab 键控制次序：function changeT abIndex() {document.getElementById('1').tabIndex="3"document.getElementById('2').tabIndex="2"document.getElementById('3').tabIndex="1"}3、target 属性可设置或返回在何处打开链接。
语法：anchorObject.target=_blank|_parent|_self|_top 四个保留的目标名称：_blank - 在一个新的未命名的窗口载入文档_self - 在相同的框架或窗口中载入目标文档_parent - 把文档载入父窗口或包含了超链接引用的框架的框架集_top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架实例：document.getElementById('myAnchor').target="_blank";Anchor 对象的方法方法描述：●blur() 把焦点从链接上移开●focus() 给链接应用焦点Body 对象Body 对象代表文档的主体(HTML body) 。
Body 对象的属性属性描述：●className 设置或返回元素的class 属性●dir 设置或返回文本的方向●id 设置或返回body 的id●lang 设置或返回元素的语言代码●title 设置或返回元素的咨询性的标题Button 对象Button 对象代表一个按钮。
在HTML 文档中<button> 标签每出现一次，Button 对象就会被创建。
Button 对象的属性属性描述：●accessKey 设置或返回访问某个按钮的快捷键。
●alt 设置或返回当浏览器无法显示按钮时供显示的替代文本。
●disabled 设置或返回是否禁用按钮。
●form 返回对包含按钮的表单的引用。
●id 设置或返回按钮的id。
●name 设置或返回按钮的名称。
●tabIndex 设置或返回按钮的T ab 键控制次序。
●type 返回按钮的表单类型。
●value 设置或返回显示在按钮上的文本。
属性说明：1、disabled 属性可设置或返回是否禁用按钮。
语法：buttonObject.disabled=true|false实例：document.getElementById("myButton").disabled=true2、form 属性可返回对包含该按钮的表单的引用。
如果包含该按钮，则返回一个form 对象，如果未包含该按钮，则返回null。
语法：buttonObject.form实例：下面的例子可返回该按钮所属的表单的id：<p>The form containing the button is:<script ty pe="text/javascript">x=document.getElementById('button1');document.write(x.form.id);</script></p>3、type 属性可返回表单元素的类型。
对于一个Buttom 对象，则永远是"button" 类型。
语法：buttonObject.type实例：alert(document.getElementBy Id("myButton").type)Button 对象的方法方法描述：●blur() 把焦点从元素上移开。
●click() 在某个按钮上模拟一次鼠标单击。
●focus() 为某个按钮赋予焦点。
Checkbox 对象Checkbox 对象代表一个HTML 表单中的一个选择框。
在HTML 文档中<input type="checkbox"> 每出现一次，Checkbox 对象就会被创建。
Checkbox 对象的属性属性描述：●accessKey 设置或返回访问checkbox 的快捷键。
●alt 设置或返回当浏览器不支持checkbox 时供显示的替代文本。
●checked 设置或返回checkbox 是否应被选中。
●defaultChecked 返回checked 属性的默认值。
●disabled 设置或返回checkbox 是否应被禁用。
●form 返回对包含checkbox 的表单的引用。
●id 设置或返回checkbox 的id。
●name 设置或返回checkbox 的名称。
●tabIndex 设置或返回checkbox 的tab 键控制次序。
●type 返回checkbox 的表单元素类型。
●value 设置或返回checkbox 的value 属性的值Checkbox 对象的方法方法描述：●blur() 从checkbox 上移开焦点。
●click() 模拟在checkbox 中的一次鼠标点击。
●focus() 为checkbox 赋予焦点。
Document 对象Document 对象代表整个HTML 文档，可用来访问页面中的所有元素。
Document 对象是Window 对象的一个部分，可通过window.document 属性来访问。
Document 对象的集合集合说明：●all[] 提供对文档中所有HTML 元素的访问。
●anchors[] 返回对文档中所有Anchor 对象的引用。
●applets[] 返回对文档中所有Applet 对象的引用。
●forms[] 返回对文档中所有Form 对象引用。
●images[] 返回对文档中所有Image 对象引用。
●links[] 返回对文档中所有Area 和Link 对象引用。
Document 对象的属性属性描述：●body 提供对<body> 元素的直接访问。
对于定义了框架集的文档，该属性引用最外层的<frameset>。
●cookie 设置或返回与当前文档有关的所有cookie。
●domain 返回当前文档的域名。
●lastModified 返回文档被最后修改的日期和时间。
●referrer 返回载入当前文档的文档的URL。
●title 返回当前文档的标题。
●URL 返回当前文档的URL。
●Document 对象的方法方法描述：●close() 关闭用document.open() 方法打开的输出流，并显示选定的数据。
●getElementById() 返回对拥有指定id 的第一个对象的引用。
●getElementsByName() 返回带有指定名称的对象集合。
●getElementsByT agName() 返回带有指定标签名的对象集合。
●open() 打开一个流，以收集来自任何document.write() 或document.writeln() 方法的输出。
●write() 向文档写HTML 表达式或JavaScript 代码。
●writeln() 等同于write() 方法，不同的是在每个表达式之后写一个换行符。
方法说明：1、close() ：关闭一个由document.open 方法打开的输出流，并显示选定的数据。
语法：document.close()说明：该方法将关闭open() 方法打开的文档流，并强制地显示出所有缓存的输出内容。
如果您使用write() 方法动态地输出一个文档，必须记住当你这么做的时候要调用close() 方法，以确保所有文档内容都能显示。
一旦调用了close()，就不应该再次调用write()，因为这会隐式地调用open() 来擦除当前文档并开始一个新的文档。
实例：<html><head><script ty pe="text/javascript">function createNewDoc() {var newDoc=document.open("text/html","replace");var txt="<html><body>Learning about the DOM is FUN!</body></html>";newDoc.write(txt);newDoc.close();}</script></head><body><input type="button" value="Write to a new document"onclick="createNewDoc()"></body></html>2、open() ：打开一个新文档，并擦除当前文档的内容。