文档对象模型(DOM)
dom学习笔记
DOM一、基本概念1、DOM ：Document Object Model 缩写，文档对象模型。
2、元素：一个元素就是HTML 标签，包括其中的属性和内容。
二、元素对象1、浏览器本身、文档，以及HTML 元素都可以当作对象。
2、把元素声明成对象的三种方法：1）使用var test =document.getElementById(‘s’)test 就是id 为s 的元素的对象实例2）onclick=”show(this)”this 就代表这个元素的对象实例3）<script for=”s”event=”onclick”>xxx</script>三、事件源、事件、事件处理程序1、事件源：在哪里发生2、事件：发生什么事3、事件处理程序：处理发生事的程序四、元素对象1、公共属性：1）Object.属性：设置元素属性。
a.href =‘’;2）object.getAttribute(“元素名”)：获取元素属性值var i =a.getAttribute(‘href’);3）Object.innerText ：修改HTML 内容（只操作文本）。
4）Object.innerHTML ：修改HTML 内容（可以插入HTML 标签）。
a.innerHTML =“<img src=’xxx.jpg’/>”;5）Object.style ：返回对象的样式，是一个对象类型a.style.color =“red”;6）Object.className ：CSS 类名<style>.test{color:red;}</style>a.className =‘test’;7）Object.appendChild(‘s’)：向本元素中嵌入其它元素。
var img =document.createElement(‘img’);a.appendChild(‘img’);8）Object.removeChild(‘s’)：删除本元素中内嵌的元素。
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的冰山一角。
dofm高阶内容
dofm高阶内容DOM（Document Object Model）是指文档对象模型，它是由W3C（World Wide Web Consortium）组织定义的一种对 HTML 和 XML 文档的内容进行抽象和概念化的方法。
DOM 将 HTML 或 XML 文档解析成一个由节点和对象（包括元素、文本、属性等）组成的树状结构，以便开发人员可以更方便、更灵活地对文档内容进行操作。
在 JavaScript 中，我们可以使用 document 对象来访问 DOM 中的各种属性和方法，同时也可以使用一些高级的 DOM 操作来实现更加复杂的功能。
常见的 DOM 操作包括：1. 获取元素：使用 document.querySelector() 或 document.querySelectorAll() 方法获取指定选择器的元素，使用 document.getElementById() 方法获取指定 ID 的元素等。
2. 修改元素属性：使用 element.setAttribute() 方法来修改元素的属性，例如修改元素的 class 属性、style 属性等。
3. 修改元素内容：使用 innerHTML 或 textContent 属性来修改元素的文本内容。
4. 创建和添加元素：使用 document.createElement() 方法创建新的元素，使用 appendChild() 或 insertBefore() 方法添加元素到指定的父元素中。
5. 删除元素：使用 removeChild() 方法来删除指定的某个元素。
6. 事件处理：使用addEventListener() 或onXXX 属性来为元素添加事件处理函数，例如onclick、onmouseover、onkeydown 等。
以上只是 DOM 操作的一小部分，其中还有很多高级的 DOM 操作，例如对节点的遍历、复制、剪切等。
掌握高级的 DOM 操作可以极大地提升 JavaScript 在 Web 开发中的应用价值。
什么是DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。
它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。
我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。
脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。
每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“对象”，用白话说就是“东西”。
object这个词在台湾通常翻译成“物件”）。
网页上的标签是一层层嵌套的，最外面的一层是<HTML>，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。
树根是window或document对象，相当于最外层的标签的外围，也就是整个文档。
树根之下（这棵树的图通常是倒着画，就好像遗传谱系或者家谱那样。
树根就是唯一的共同祖先）是子一级的对象，子对象也有它自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。
在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中，每个网页元素都可以被确切地定位。
文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。
包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。
万维网协会（World Wide Web Consortium，W3C）已经给文档对象模型制定了一系列标准，并且正在制定更多的相关标准。
当代的浏览器除支持其中的一部分标准之外，还支持某些早在W3C标准制定以前就流行了的历史既成的编程接口。
也就是说现在浏览器使用的技术历史由来纷繁复杂，有些人们普遍使用的DOM技术并无标准可依。
我们将深入所有通用DOM的细节（包括IE浏览器中“与众不同”的某些技术），以全面掌握面向实践的技术。
DOM和JavaScript我经常在QQ、MSN和email中被大家问到的“有关JavaScript”的问题，95%其实是DOM的问题。
dom操作中几种获取文本内容的方法
dom操作中几种获取文本内容的方法在网页开发中，DOM（文档对象模型）操作是一种常用的技术，它允许开发者通过编程方式访问和修改HTML或XML文档的内容、结构和样式。
获取文本内容是DOM操作中的常见任务之一。
下面介绍几种获取文本内容的方法。
1. 使用 innerHTML 属性`innerHTML` 属性返回一个表示由开始到结束的整个文档内容的字符串表示。
这个属性包括了所有的标签和文本内容。
例如：```javascriptvar text = document.getElementById("myElement").innerHTML;```上述代码将获取ID为`myElement`的元素的HTML内容，并将其存储在变量`text`中。
2. 使用 textContent 属性`textContent` 属性返回一个表示元素的所有文本内容（包括所有标签内的文本）的字符串表示。
它不会获取标签之间的空白字符。
例如：```javascriptvar text =document.getElementById("myElement").textContent;```上述代码将获取ID为`myElement`的元素的文本内容，并将其存储在变量`text`中。
3. 使用 getElementById 或 querySelector 方法获取元素，再使用 innerText 或 textContent 属性如果你只想获取文本内容，而不包括任何标签或属性值，可以使用 `innerText` 或 `textContent` 属性。
但是，如果你想获取包括标签和属性值的完整内容，可以使用 `getElementById` 或`querySelector` 方法获取元素，然后再使用 `textContent` 或`innerText` 属性。
例如：```javascriptvar element = document.getElementById("myElement");var text = element.textContent || element.innerText;```上述代码将获取ID为`myElement`的元素，并使用`textContent` 或 `innerText` 属性获取其文本内容，并将其存储在变量`text`中。
DOM模型
使用DOM实现
实行添加一个图片、替换一个图片的功能
提示：使用document对象的创建结点的方法
删除一个DOM节点
删除一个DOM节点
删除一个元素节点、文本节点
通过父节点删除本节点： myParent.removeChild( mySelfNode ) 通过自己删除本节点： mySelfNode.parentNode.removeChild( mySelfNode )
node.firstChild、stChild
通过子节点获得父节点：node.parentNode
获得实例代码
重新做Demo4-5-1.html
使用DOM实现
分别通过id属性、<img />标签名取得图片元素 结点
把生成的节点作为某一个节点（node）的子节点
作为node节点的最后一个子节点： node.appendChild( newNode ) 插入到node节点中某一子节点之前： node.insertBefore( newNode, oldNode )
实例代码
动手做Demo4-5-2.html
DOM的应用十分广泛，各种网页特效均有DOM的 踪影
本节内容
DOM简介 DOM树和DOM节点 访问DOM节点 动态修改DOM节点 DOM节点的innerHTML属性
DOM树
DOM树
DOM将HTML文档抽象为树形结构，称这棵树为DOM树 HTML中的每一项内容都可以在DOM树中找到 DOM的核心就是对DOM树的操作，即增加、删除、修 改DOM树中的内容
删除一个属性节点：node.attrName
=
‘’;
修改一个DOM节点
DOM基础
文档对象
document 描述当前窗口或指定窗口对象的文 档。它包含了从<head>到</body>的内容。
松迪科技（北京）有限公司
文档对象
document属性 lastModified 文档最后修改日期，是一个 Date 对象。 referrer 如果文档通过点击连接打开，则 referrer 返回原来的 URL。 title <title>...</title>定义的文字。 fgColor <body>的 text 属性所表示的文本颜色。 bgColor <body>的 bgcolor 属性所表示的背景颜色。 linkColor <body>的 link 属性所表示的连接颜色。 alinkColor <body>的 alink 属性所表示的活动连接颜色。 vlinkColor <body>的 vlink 属性所表示的已访问连接颜色。
松迪科技（北京）有限公司
event对象
altKey 检索ALT键的当前状态 可能的值 true为关闭 false为不关闭 button 检索按下的鼠标键 可能的值： 0 没按键 1 按左键 2 按右键 3 按左右键 4 按中间键 5 按左键和中间键 6 按右键和中间键 7 按所有的键
松迪科技（北京）有限公司
松迪科技（北京）有限公司
窗口对象
close() 关闭一个已打开的窗口。 blur() 使窗口变为“非活动窗口”。 focus() 使窗口变为“活动窗口”。 scrollTo() [<窗口对象>.]scrollTo(x, y)；使窗 口从左上角数起的(x, y)点滚动到窗口的左上 角。 scrollBy() [<窗口对象>.]scrollBy(deltaX, deltaY)；使窗口向右滚动 deltaX 像素，向下 滚动 deltaY 像素。如果取负值，则向相反的 方向滚动。
dom名词解释
dom名词解释
DOM（Document Object Model）是指文档对象模型，它是一种用于表示和操作HTML、XML等文档的标准编程接口。
DOM可以将整个文档看作是一个树形结构，每个节点都是一个对象，通过操作这些节点对象可以实现对文档内容的修改和交互。
在DOM中，每个节点都有一个父节点和零个或多个子节点。
节点分为元素节点、属性节点、文本节点等不同类型。
元素节点是指HTML 中的标签，属性节点则是标签中的属性，而文本节点则是标签中的纯文本内容。
通过DOM提供的API，我们可以访问和修改文档中的任何元素、属性或者文本内容。
例如，我们可以使用getElementById方法获取页面中某个元素的引用，并对其进行样式或内容上的修改。
另外，DOM 还提供了事件处理机制，允许我们在用户与页面进行交互时执行相应的操作。
总之，DOM为开发者提供了一种方便而强大的方式来操纵网页内容。
无论是创建动态效果还是实现复杂交互逻辑，都需要使用到DOM这一重要工具。
什么是DOM
什么是DOM？？？DOM 是Document Object Model的缩写，即文档对象模型！理解为一套浏览器解读和显示的标准！dom提供了很多标签和页面样式标准，一定的接口（方法）规定浏览器需要完成一定的操作，单单javascript只能组成一些算法，实际上没法操作页面！只有通过DOM对HTML 和XML文档进行读取，搜索，修改，添加和删除等操作来间接操作页面样式。
DOM是独立于语言和平台的一套标准接口，定义了构成DOM的不同对象，比恩没有提供特定的实现，可以用任何编程语言实现。
利用DOM中的对象，开发人员可以对HTML和XML文档进行读取，搜索，修改，添加和删除等操作。
W3C DOM提供了一组描述HTML及XML文件的标准对象和一个用来访问和操作这类文件的标准界面。
从面向对象的角度看，可以把HTML文档和XML文档看成是一个对象。
一个XML文档对象可以包含其他的对象，如节点对象。
在DOM中有相应的对象来对应实际XML文档的对象。
DOM规范中提供了一组对象用来实现对文档结构的访问。
各种基于DOM规范的解析器必须按照DOM规范在内存中建立数据模型。
DOM规范的核心是树模型。
解析XML文件的解析器，通过读入XML文件在内存中建立一个树模型，（通过特定算法存储数据，也通过相应的算法操作数据）DOM是一组API接口，接口里面存放的不同类型的未实例化对象对应着XML文档中不同类型的节点和数据。
用编程语言实现这些接口，就可以通过对象来操作相应的XML文档。
DOM为一套规范（包括代码解析标准和代码组织标准）如：DOM文档：interface document{.//有很多方法，每个方法的实现文本也都给出来了}interface Node{}interface NodeList{}interfact NamedNodeMap{}interfact Element{}interfact Text{}通过每个接口的方法的实现来创建对象（这些对象也都已经定义好了）如通过document接口创建document对象，一个document对象其本质就是一个HMTL文档，即为一个htnl标记。
解析XML中的树形结构与DOM文档对象模型
解析XML中的树形结构与DOM⽂档对象模型树结构XML ⽂档始终是描述性的。
树状结构通常被称为 XML 树，它在描述 XML ⽂档的过程中扮演⼀个重要的⾓⾊。
这个树结构包含根（⽗）元素，⼦元素等等。
通过使⽤树状结构，我们可以了解源⾃根元素的所有后续分⽀和⼦分⽀。
解析从根元素开始，然后向下移动到指向某个元素的第⼀个分⽀，从这⾥开始处理第⼀个分⽀及其⼦节点。
⽰例下⾯的⽰例演⽰了简单的 XML 树结构：XML/HTML Code复制内容到剪贴板1. <?xml version="1.0"?>2. <Company>3. <Employee>4. <FirstName>Tanmay</FirstName>5. <LastName>Patil</LastName>6. <ContactNo>1234567890</ContactNo>7. <Email>tanmaypatil@</Email>8. <Address>9. <City>Bangalore</City>10. <State>Karnataka</State>11. <Zip>560212</Zip>12. </Address>13. </Employee>14. </Company>下⾯的树结构表⽰上⾯的 XML ⽂档：图中，有⼀个叫做 <company> 的根元素。
⾥⾯⼜有⼀个 <Employee> 元素。
在雇员元素⾥⾯，⼜有 5 个分⽀，分别是<FirstName>，<LastName>，<ContactNo>，<Email> 和 <Address>。
DOM,30分钟搞清楚
DOM课堂笔记一什么是DOMDom是document object model 文档对象模型是W3C组织制定的一套用于访问XML和HTML文档的标准。
允许脚本动态地访问和更新文档内容、结构和样式。
二 DOM有什么作用它的作用是将一个xml/html转化成文档对象。
从而可以用对象的属性或方法操作html/xml标签。
三 DOM的种类DOM CORE- 针对任何结构化文档的标准模型XML DOM- 针对 XML 文档的标准模型HTML DOM- 针对 HTML 文档的标准模型什么是 XML DOM？XML DOM 是：用于 XML 的标准对象模型和标准编程接口可跨平台和语言。
XML DOM定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。
换句话说：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。
什么是 HTML DOM？HTML DOM 是：HTML 的标准对象模型和标准编程接口。
HTML DOM 定义了所有 HTML元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
四 XML介绍XML：eXtensible Markup Language 可扩展标记语言它用来标记数据、定义数据类型，允许用户自己定义标签结构的源语言，非常适合万维网传输，提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。
五 DOM详解(HTML和XML)1 DOM树概念Dom是将一个文档(HTML/XML)解析成一个document对象，该document是一个倒置的树形结构。
2 DOM树节点分类元素节点=============1文本节点=============2属性节点=============3节点的信息：nodeName 标签名，属性名 #text # documentnodeType 节点类型nodeValue 属性值，文本值，元素不可用3 DOM树节点属性取当前节点的父节点：parentNode取所有子节点：childNodes取第一个子节点：firstChild取下一个子节点：nextSibling取上一个子节点：previousSibling取最后一个子节点：lastChild4 DOM树的CRUD操作1）添加节点//创建元素节点，并给元素节点添加属性Varele = document.createElement(“”);ele.setAttribute(“type”,”file”);//创建文本节点Vartextnode = document.createTextNode(“”);//为元素节点添加文本内容Ele.appendChild(textnode);2）更新节点oldNode.replaceNode(newNode);parentNode.replaceChild(newNode,oldNode);3）删除节点parentNode.removeChild(childNode);4）查找节点document.getElementById(“id”);-------返回的是对象document.getElementsByName(“name”);----------返回的是对象数组document.getElementsByTagName(“tagname”);-----------返回的是对象数组六 JavaScript扩展1私有属性用var声明，私有属性不能通过对象名来实现输出。
DOM常用操作
DOM常⽤操作 ⽂档对象模型( DOM, Document Object Model )主要⽤于对HTML和XML⽂档的内容进⾏操作。
DOM描绘了⼀个层次化的节点树，通过对节点进⾏操作，实现对⽂档内容的添加、删除、修改、查找等功能。
⼀、DOM树DOM树有两种，分别为节点树和元素树。
节点树：把⽂档中所有的内容都看成树上的节点；元素树：仅把⽂档中的所有标签看成树上的节点。
⼆、DOM常⽤操作2.1 查找节点document.getElementById('id属性值');返回拥有指定id的第⼀个对象的引⽤document/element.getElementsByClassName('class属性值');返回拥有指定class的对象集合document/element.getElementsByTagName('标签名');返回拥有指定标签名的对象集合document.getElementsByName('name属性值');返回拥有指定名称的对象结合document/element.querySelector('CSS选择器');仅返回第⼀个匹配的元素document/element.querySelectorAll('CSS选择器');返回所有匹配的元素document.documentElement获取页⾯中的HTML标签document.body获取页⾯中的BODY标签document.all['']获取页⾯中的所有元素节点的对象集合型2.2 新建节点document.createElement('元素名');创建新的元素节点document.createAttribute('属性名');创建新的属性节点document.createTextNode('⽂本内容');创建新的⽂本节点document.createComment('注释节点');创建新的注释节点document.createDocumentFragment( );创建⽂档⽚段节点2.3 添加新节点parent.appendChild( element/txt/comment/fragment );向⽗节点的最后⼀个⼦节点后追加新节点parent.insertBefore( newChild, existingChild );向⽗节点的某个特定⼦节点之前插⼊新节点element.setAttributeNode( attributeName );给元素增加属性节点element.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值添加⽂本节点，有两种常见⽅法：document.createTextNode('新增⽂本内容');1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Document</title>6 </head>7 <body>8 <h2>创建⽂本节点</h2>9 <button onclick="addText()">创建⽂本节点</button>10 <p></p>11 <script>12 function addText(){13 var element = document.getElementsByTagName('p')[0];14 var txt = document.createTextNode('新增⽂本内容'); //创建⽂本节点15 element.appendChild(txt); //添加⽂本节点16 }17 </script>18 </body>19 </html>element.innerHTML='新增⽂本内容';【推荐】1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Document</title>6 </head>7 <body>8 <h2>创建⽂本节点</h2>9 <button onclick="addText()">创建⽂本节点</button>10 <p></p>11 <script>12 function addText(){13 var element = document.getElementsByTagName('p')[0];14 element.innerHTML='新增⽂本内容'; //插⼊⽂本内容15 }16 </script>17 </body>18 </html>2.4 删除节点parentNode.removeChild( existingChild );删除已有的⼦节点，返回值为删除节点element.removeAttribute('属性名');删除具有指定属性名称的属性，⽆返回值element.removeAttributeNode( attrNode );删除指定属性，返回值为删除的属性2.5 修改节点parentNode.replaceChild( newChild, existingChild );⽤新节点替换⽗节点中已有的⼦节点element.setAttributeNode( attributeName );若原元素已有该节点，此操作能达到修改该属性值的⽬的element.setAttribute( attributeName, attributeValue );若原元素已有该节点，此操作能达到修改该属性值的⽬的添加属性节点，修改属性值：element.setAttributeNode( attributeName );1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Document</title>6 </head>7 <body>8 <h2>属性节点</h2>9 <p class="classValue">增添id属性，并修改class属性值</p>10 <script>11 var element = document.getElementsByTagName('p')[0];12 element.setAttribute('id','idValue'); //添加属性节点13 element.setAttribute('class','classNewValue');//修改属性值14 </script>15 </body>16 </html>element.setAttribute( attributeName, attributeValue );1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Document</title>6 </head>7 <body>8 <h2>属性节点</h2>9 <p class="classValue">增添id属性，并修改class属性值</p>10 <script>11 var element = document.getElementsByTagName('p')[0];12 // 添加属性节点13 var attr = document.createAttribute('id');14 attr.value = 'idValue';15 element.setAttributeNode(attr);1617 // 修改属性值18 var attr = document.createAttribute('class');19 attr.value = 'classNewValue';20 element.setAttributeNode(attr);2122 </script>23 </body>24 </html>。
DOM
DOM目录DOM 一种流行新词性DOM 文档对象模型DOM数字正射影像图DOM 溶解性有机质[编辑本段]DOM 一种流行新词性Dom缘于Tim，常用在感叹语句末尾，如God, Dom! Shit, Dom! 加强语气。
该词在最近在少数群体中极为流行。
[编辑本段]DOM 文档对象模型DOM(Document Object Model)DOM是Document Object Model文档对象模型的缩写。
根据W3C DOM规范（/DOM/），DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。
简单理解，DOM解决了Netscape的Javascript 和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
DOM是以层次结构组织的节点或信息片断的集合。
这个层次结构允许开发人员在树中导航寻找特定信息。
分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。
由于它是基于信息层次的，因而DOM 被认为是基于树或基于对象的。
对于特别大的文档，解析和加载整个文档可能很慢且很耗资源，因此使用其他手段来处理这样的数据会更好。
这些基于事件的模型，比如Simple API for XML（S AX），适用于处理数据流，即随着数据的流动而依次处理数据。
基于事件的API 消除了在内存中构造树的需要，但是却不允许开发人员实际更改原始文档中的数据。
SAX等模型会从头至尾的顺序解析整个XML文档，当遇到一个节点的开始或或者结束时，会产生一个时间，程序员可以注册事件处理函数以对各个节点进行处理。
另一方面，DOM 还提供了一个API，允许开发人员添加、编辑、移动或删除树中任意位置的节点，从而创建一个引用程序。
这个模型就是基于树型数据结构的，他在使用之前必须加载整个文档或者至少是结构良好的文档片段解析器是一个软件应用程序，设计用于分析文档（这里是指XML 文件），以及做一些特定于该信息的事情。
dom技术指标要求
dom技术指标要求
DOM（Document Object Model，文档对象模型）是一种用于表示和交互文档结构的接口模型，广泛应用于Web开发中。
DOM技术指标要求通常涉及以下几个方面：1.性能要求：DOM操作应当尽可能高效，避免引起页面卡顿或延迟。
例如，频繁
地访问和修改DOM可能会导致性能下降，因此需要对DOM操作进行优化。
2.兼容性要求：DOM作为Web标准的一部分，需要在不同的浏览器和平台上具
有良好的兼容性。
开发者需要确保他们的DOM操作在不同的浏览器上都能正常工作。
3.准确性要求：DOM操作需要准确地反映文档的结构和内容。
例如，当修改DOM
时，需要确保修改的内容与预期一致，并且不会对其他部分产生不良影响。
4.安全性要求：DOM操作可能涉及用户输入和敏感数据，因此需要确保DOM操
作的安全性。
例如，需要对用户输入进行验证和过滤，以防止跨站脚本攻击（XSS）等安全问题。
5.可维护性要求：DOM操作应当易于理解和维护。
开发者需要编写清晰、易懂的
代码，并遵循良好的编程实践，以便在未来对代码进行修改和扩展。
需要注意的是，这些技术要求并非固定不变的标准，而是根据具体的项目需求和开发环境而有所不同。
因此，在实际开发中，开发者需要根据具体情况来制定相应的DOM技术指标要求。
DOM对象介绍
一、DOM简述DOM—Document Object Model,它是W3C国际组织的一套Web标准。
它定义了访问HTML文档对象的一套习属性、方法和事件。
DOM是以层次结构组织的节点或信息片断的集合。
文档对象模型（Document Object Model）是给HTML与XML文件使用的一组API。
DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。
浏览器对象是一个分层结构，也称为文档对象模型，如下图所示：从上图可以看出：（1）打开网页后，首先看到的是浏览器窗口，即顶层的window对象。
（2）其次，看到的是网页文档的内容，即document文档。
（3）定位对象：window.document.myform.text1或document.myform.text1因为window窗口对象是所有页面的根对象，所以常常省略。
(4)地址对象location和历史对象history，它他对应IE浏览器中的地址栏和前进/后退按钮。
二、窗口window常用属性：1 window.clesed：指明窗口是否关闭。
2 window.defaultValue：窗口状态栏的默认信息。
3 window.docement：表示浏览器窗口中的HTML文档。
4 window.location：表示有关当前URL的信息。
5 window.history：表示有关当前访问过的RUL的信息。
6 ：设置或检索窗口或框架的名称。
7 window.screen：包含有关客户的屏幕和显示性能的信息。
8 window.screenX：窗口X坐标9 window.screenY：窗口Y坐标10 window.status：设置或检索窗口状态栏中的信息。
11 window.title：设置或检索窗口顶部标题栏中的信息。
12 window.self：当前窗口。
13 window.parent：当前窗口的最上层窗口。
14 window.top：当前显示的窗口的最上层窗口。
第04章 文档对象模型(DOM)
第4章 文档对象模型（DOM）
4.1 DOM基础
2．getElementsByName() document.getElementsByName(name)该方法与 getElementById() 方法相似，但是它查询元 素的 name 属性，而不是 id 属性。因为一 个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属 性），所以 getElementsByName() 方法返回 的是元素节点的数组，而不是一个元素节点。 然后，我们可以通过要获取节点的某个属性 来循环判断是否为需要的节点。
第4章 文档对象模型（DOM）
4.1 DOM基础
DOM中的节点有Document、Element、 Comment、Type等不同类型，其中每一 个DOM树必须有一个Document节点，并 且为节点树的根节点。它可以有子节点 如Text节点、Comment节点等。 具体来讲， DOM 节点树中的节点有元 素节点、文本节点和属性节点等三种不 同的类型，
第4章 文档对象模型（DOM）
4.1 DOM基础
【例4-4】getElementById() 方法的使用。 <html> <head> <title>4-4</title> <script type="text/javascript"> function getValue() { var x = document.getElementById("myHeader") alert(x.innerHTML) } </script> </head> <body> <h1 id="myHeader" onclick="getValue()">这是标题 </h1> <p>点击标题，会提示出它的值。</p> </body> </html>
DOM制作流程范文
DOM制作流程范文DOM（文档对象模型）是用于处理网页文档的编程接口，它使开发者能够通过JavaScript来访问和修改HTML和XML文档的内容、结构和样式。
DOM制作流程指的是使用DOM进行网页制作的一般步骤。
以下是一个常见的DOM制作流程，并详细说明每个步骤的内容。
1.确定需求和设计:在开始制作网页之前，首先需要明确需求，确定页面的结构、样式和交互效果等。
根据需求设计页面的布局和内容组织。
5. 操作DOM元素: 通过获取的DOM元素对象，使用JavaScript对元素进行操作。
可以修改元素的内容、样式、属性等。
常见的操作包括修改元素的文本内容、设置元素的样式、添加、删除或替换元素等。
6. 添加事件监听: 在需要对元素添加交互效果时，可以使用JavaScript添加事件监听。
通过给元素绑定事件处理函数，实现对元素的事件响应。
常见的事件包括点击事件、鼠标移入移出事件、键盘按下事件等。
7. 编写事件处理函数: 在添加了事件监听后，需要编写相应的事件处理函数来处理触发的事件。
事件处理函数可以使用JavaScript代码实现对事件的具体响应，可以修改元素的内容、样式、属性等，也可以进行数据的处理和传递。
8.页面优化与测试:在完成DOM操作后，需要对网页进行优化和测试。
可以通过对代码的合理组织和优化，提高网页的性能和加载速度。
同时还需要对网页进行兼容性测试，确保网页在不同的浏览器和设备上能够正常运行。
9.上线部署与维护:在完成了网页制作后，可以通过将网页部署到服务器上，让更多的用户访问和使用。
在网页上线后，还需要进行后续维护和更新，确保网页的功能和效果始终保持良好的状态。
上述流程是一个基本的DOM制作流程，可以根据具体的需求和实际情况进行调整和补充。
随着技术的不断发展和创新，DOM制作流程也在不断演进，可以结合其他技术和框架，如jQuery和React等，实现更复杂和高效的网页制作。
通俗易懂的来讲讲DOM——科普性质的DOM入门教程
通俗易懂的来讲讲DOM——科普性质的DOM⼊门教程==========转载需要分隔线==========DOM是所有前端开发每天打交道的东西，但是随着jQuery等库的出现，⼤⼤简化了DOM操作，导致⼤家慢慢的“遗忘”了它的本来⾯貌。
不过，要想深⼊学习前端知识，对DOM的了解是不可或缺的，所以本⽂⼒图系统的讲解下DOM的相关知识，如有遗漏或错误，还请⼤家指出⼀起讨论^ ^。
⼀、DOM是什么？DOM（⽂档对象模型）是针对HTML和XML⽂档的⼀个API，通过DOM可以去改变⽂档。
这个说法很官⽅，⼤家肯定还是不明⽩。
举个例⼦：我们有⼀段HTML，那么如何访问第⼆层第⼀个节点呢，如何把最后⼀个节点移动到第⼀个节点上⾯去呢？DOM就是定义了如果做类似操作，那么应该怎么做的标准。
⽐如⽤getElementById来访问节点，⽤insertBefore来插⼊节点。
当浏览器载⼊HTML时，会⽣成相应的DOM树。
简⽽⾔之，DOM可以理解为⼀个访问或操作HTML各种标签的实现标准。
对于⼀个HTML来说，⽂档节点Document（看不到的）是它的根节点，对应的对象便是document对象（严格讲是⼦类HTMLDocument对象，下⾯单独介绍Document类型时会指出）。
换句话说存在⼀个⽂档节点Document，然后它有⼦节点，⽐如通过document.getElementsByTagName("html")，得到类型为元素节点的Element html。
每⼀段HTML标记都可以⽤相应的节点表⽰，例如：HTML元素通过元素节点表⽰，注释通过注释节点表⽰，⽂档类型通过⽂档类型节点表⽰等。
⼀共定义了12种节点类型，⽽这些类型⼜都继承⾃Node类型。
所以我们⾸先讲Node类型，因为这个类型的⽅法是所有节点都会继承的。
⼆、Node类型（基类，所有节点都继承了它的⽅法）Node是所有节点的基类型，所有节点都继承⾃它，所以所有节点都有⼀些共同的⽅法和属性。
DOM 事件模型
DOM 事件模型事件HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要指元素事件的订阅者)发出各种事件,如click,onmouseover,onmouseout等等。
DOM事件流DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM 事件流。
主流浏览器的事件模型早在2004前在HTML元素事件的订阅，发送，传播，处理模型上各浏览器实现并不一致，直到DOM Level3中规定后，多数主流浏览器才陆陆续续支持DOM标准的事件处理模型—捕获型与冒泡型。
目前除IE浏览器外，其它主流的Firefox, Opera, Safari都支持标准的DOM事件处理模型。
IE仍然使用自己的模型，即冒泡型，它模型的一部份被DOM采用，这点对于开发者来说也是有好处的，只使用DOM标准，IE都共有的事件处理方式才能有效的跨浏览器。
冒泡型事件(Bubbling)这是IE浏览器对事件模型的实现，也是最容易理解的，至少笔者觉得比较符合实际的。
冒泡，顾名思义，事件像个水中的气泡一样一直往上冒，直到顶端。
从DOM树型结构上理解，就是事件由叶子结点沿祖先结点一直向上传递直到根结点；从浏览器界面视图HTML元素排列层次上理解就是事件由具有从属关系的最确定的目标元素一直传递到最不确定的目标元素.捕获型事件(Capturing)Netscape Navigator的实现，它与冒泡型刚好相反，由DOM树最顶层元素一直到最精确的元素，这个事件模型对于开发者来说（至少是我..）有点费解，因为直观上的理解应该如同冒泡型，事件传递应该由最确定的元素，即事件产生元素开始。
但这个模型在某些情况下也是很有用的，接下来会讲解到。
DOM标准事件模型因为两个不同的模型都有其优点和解释，DOM标准支持捕获型与冒泡型，可以说是它们两者的结合体。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
var childrens = node.childNodes; //获取node的全部子节点
for(var i=0;i<childrens.length;i++) {
total += countTotalElement(childrens[i]); //在每个子节点上进行递归操作
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
var elementName = ""; //全局变量，保存Element标记名，使用完毕要清空
接口 nodeType常量 nodeType值 备注
Element Node.ELEMENT_NODE 1 元素节点
Text Node.TEXT_NODE 3 文本节点
Document Node.DOCUMENT_NODE 9 document
Comment MENT_NODE 8 注释的文本
insertBefore() 给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置。
removeChild() 从文档树中删除并返回指定的子节点。
replaceChild() 从文档树中删除并返回指定的子节点，用另一个节点替换它。
接下来，让我们使用上述的DOM应用编程接口，来试着操作HTML文档。
childNodes 以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。
firstChild 以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。
lastChild 以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。
nextSibling 以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。
7.4.1、DOM眼中的HTML文档：
树在DOM眼中，HTML跟XML一样是一种树形结构的文档，<html>是根（root）节点，<head>、<title>、<body>是<html>的子（children）节点，互相之间是兄弟（sibling）节点；<body>下面才是子节点<table>、<span>、<p>等等。如下图：
}
return total; 在使用DOM的过程中，有时候需要定位到文档中的某个特定节点，或者具有特定类型的节点列表。这种情况下，可以调用Document对象的getElementsByTagName()和getElementById()方法来实现。
document.getElementsByTagName()返回文档中具有指定标记名的全部Element节点数组（也是NodeList类型）。Element出现在数组中的顺序就是他们在文档中出现的顺序。传递给getElementsByTagName()的参数忽略大小写。比如，想定位到第一个<table>标记，可以这样写：document.getElementsByTagName(“table”)[0]。例外的，可以使用document.body定位到<body>标记，因为它是唯一的。
需要指出的是，childNodes[]的值实际上是一个NodeList对象。因此，可以通过遍历childNodes[]数组的每个元素，来枚举一个给定节点的所有子节点；通过递归，可以枚举树中的所有节点。下表列出了Node对象的一些常用属性和方法：
Node对象常用属性：
属性 描述
attributes 如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。
A、遍历文档的节点
DOM把一个HTML文档视为树，因此，遍历整个树是应该是家常便饭。跟之前说过的一样，这里我们提供两个遍历树的例子。通过它，我们能够学会如何使用childNodes[]和firstChile、lastChild、nextSibling、previousSibling遍历整棵树。
文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。一般的，支持Javascript的所有浏览器都支持DOM。本文所涉及的DOM，是指W3C定义的标准的文档对象模型，它以树形结构表示HTML和XML文档，定义了遍历这个树和检查、修改树的节点的方法和属性。
属性 描述
tagName 元素的标记名称，比如<p>元素为P。HTML文档返回的tabName均为大写。
Element常用的方法：
方法 描述
getAttribute() 以字符串形式返回指定属性的值。
getAttributeNode() 以Attr节点的形式返回指定属性的值。
例子1-- sample3_1.htm：
这个例子使用了childNodes[]和递归方式来遍历整个文档，统计文档中出现的Element元素总数，并把Element标记名全部打印出来。需要特别注意的是，在使用DOM时，必须等文档被装载完毕再执行遍历等行为操作文档。sample3_1.htm具体代码如下：
}
return total;
}
</script>
</head>
<body>
<a href="javascript:void(0)"
onClick="alert('标记总数：' + countTotalElement(document) + '\r\n全部标记如下：\r\n' + elementName);elementName='';">开始统计</a>
function countTotalElement(node) { //参数node是一个Node对象
var total = 0;
if(node.nodeType == 1) { //检查node是否为Element对象
total++; //如果是，计数器加1
elementName = elementName + node.tagName + "\r\n"; //保存标记名
nodeName 节点的名字，Element节点则代表Element的标记名称。
nodeType 代表节点的类型。
parentNode 以Node的形式返回当前节点的父节点。如果没有父节点，则为null。
previousSibling 以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。
</body>
</html>
--
例子2 – sample3_2.htm：
接下来使用firstChile、lastChild、nextSibling、previousSibling遍历整个文档树。修改一下countTotalElement函数，其他跟sample3_1.htm一样：
}
var childrens = node.childNodes; //获取node的全部子节点
for(var m=node.firstChild; m!=null;m=m.nextSibling) {
total += countTotalElement(m); //在每个子节点上进行递归操作
DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片断
Attr Node.ATTRIBUTE_NODE 2 节点属性
DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象（对于HTML文档，这个就是<html>标记）。Javascript操作HTML文档的时候，document即指向整个文档，<body>、<table>等节点类型即为Element。Comment类型的节点则是指文档的注释。具体节点类型的含义，请参考《Javascript权威指南》，在此不赘述。
createTextNode() 用指定的文本创建新的TextNode节点。
getElementById() 返回文档中具有指定id属性的Element节点。
getElementsByTagName() 返回文档中具有指定标记名的所有Element节点。
对于Element节点，可以通过调用getAttribute()、setAttribute()、removeAttribute()方法来查询、设置或者删除一个Element节点的性质，比如<table>标记的border属性。下面列出Element常用的属性：
Document定义的方法大多数是生产型方法，主要用于创建可以插入文档中的各种类型的节点。常用的Document方法有：
方法 描述
createAttribute() 用指定的名字创建新的Attr节点。
createComment() 用指定的字符串创建新的Comment节点。
createElement() 用指定的标记名创建新的Element节点。