下载文档原格式
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的冰山一角。
HTMLDOM对象的属性和⽅法介绍HTML DOM对象的属性和⽅法介绍DOM 是 Document Object Model（⽂档对象模型）的缩写。
DOM（⽂档对象模型）是针对HTML和XML⽂档的⼀个API（应⽤程序编程接⼝），它允许程序和脚本动态地访问和更新⽂档的内容，结构和样式。
W3C DOM 标准被分为 3 个不同的部分：核⼼ DOM - 针对任何结构化⽂档的标准模型XML DOM - 针对 XML ⽂档的标准模型HTML DOM - 针对 HTML ⽂档的标准模型HTML DOM 定义了所有 HTML 元素对象的属性，以及访问它们的⽅法，我们可以通过 Javascript 获取，修改，添加和删除 HTML 元素。
HTML DOM 对象有⼏种类型：1.Document 类型在浏览器中，Document 对象表⽰整个 HTML ⽂档。
1.1属性引⽤⽂档的⼦节点documentElementvar html = document.documentElement; //取得对<html>元素的引⽤bodyvar body = document.body; //取得对<body>元素的引⽤获取⽂档信息title通过 title 属性可以访问当前⽂档的标题，也可以修改当前⽂档的标题。
var originalTitle = document.title; //返回当前⽂档的标题document.title = "New title"; //修改当前⽂档的标题URL该属性返回当前页⾯完整的 URL，也就是浏览器地址栏中的全部地址信息。
⽐如我打开了⼀个页⾯，浏览器地址栏中的信息显⽰如下：/cqhaibin/p/6291640.html这些信息就是当前⽂档完整的 URL。
var url = document.URL;//返回当前⽂档完整的URLdomain该属性返回当前⽂档的服务器域名。
W3C DOM模型用法详解W3C DOMDOM=DocumentObjectModel，文档对象模型，DOM模型可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
换句话说，这是表示和处理一个HTML或XML文档的常用方法。
有一点很重要，DOM模型的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。
最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM模型的应用已经远远超出这个范围。
DOM模型实际上是以面向对象方式描述的对象模型。
DOM模型定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
可以把DOM模型认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。
DOM模型根据W3C DOM模型规范，DOM模型是HTML与XML的应用编程接口（API），DOM模型将整个页面映射为一个由层次节点组成的文件。
有1级、2级、3级共3个级别。
1级DOM模型在1998年10月份成为W3C的提议，由DOM模型核心与DOM 模型HTML两个模块组成。
DOM模型核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。
DOM模型HTML通过添加HTML专用的对象与函数对DOM模型核心进行了扩展。
鉴于1级DOM模型仅以映射文档结构为目标，DOM模型2级面向更为宽广。
通过对原有DOM模型的扩展，2级DOM模型通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM模型文档）和层叠样式表（CSS）的支持。
同时也对DOM模型1的核心进行了扩展，从而可支持XML命名空间。
2级DOM模型引进了几个新DOM模型模块来处理新的接口类型：DOM视图：描述跟踪一个文档的各种视图（使用CSS样式设计文档前后）的接口；DOM事件：描述事件接口；DOM样式：描述处理基于CSS样式的接口；DOM遍历与范围：描述遍历和操作文档树的接口；3级DOM模型通过引入统一方式载入和保存文档和文档验证方法对DOM模型进行进一步扩展，DOM模型3包含一个名为“DOM模型载入与保存”的新模块，DOM模型核心扩展后可支持XML1.0的所有内容，包扩XMLInfoset、XPath、和XMLBase。
什么是DOM及DOM操作？什么是 DOM ?DOM(⽂档对象模型)是针对于xml但是扩展⽤于html的应⽤程序编程接⼝，定义了访问和操作html的⽂档的标准。
W3C⽂档对象模型是中⽴于平台和语⾔之间的接⼝，它允许程序和脚本动态的访问和更新⽂档的内容、结构、样式。
总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。
DOM 分层节点DOM的分层节点⼀般被称作是DOM树，树中的所有节点都可以通过脚本语⾔例如js进⾏访问，所有HTMlL元素节点都可以被创建、添加或者删除。
在DOM分层节点中，页⾯就是⽤分层节点图表⽰的。
整个⽂档是⼀个⽂档节点，就想是树的根⼀样。
每个HTML元素都是元素节点。
HTML元素内的⽂本就是⽂本节点。
每个HTML属性时属性节点。
当咱们访问⼀个web页⾯时，浏览器会解析每个HTML元素，创建了HTML⽂档的虚拟结构，并将其保存在内存中。
接着，HTML页⾯被转换成树状结构，每个HTML元素成为⼀个叶⼦节点，连接到⽗分⽀。
考虑以下 Html 结构：<!DOCTYPE html><html lang="en"><head><title>A super simple title!</title></head><body><h1>A super simple web page!</h1></body></html>在这个结构的顶部有⼀个document，也称为根元素，它包含另⼀个元素：html。
html元素包含⼀个head，⽽ head ⼜有⼀个title。
然后body 包含⼀个h1。
每个HTML元素都由特定类型（也称为接⼝）表⽰，并且可能包含⽂本或其他嵌套元素：document (HTMLDocument)|| --> html (HTMLHtmlElement)|| --> head (HtmlHeadElement)| || | --> title (HtmlTitleElement)| | --> text: "A super simple title!"|| --> body (HtmlBodyElement)| || | --> h1 (HTMLHeadingElement)| | --> text: "A super simple web page!"每个HTML元素都来⾃Element，但其中很⼤⼀部分都是专⽤的。
12种节点类型DOM（文档对象模型）的12种节点类型包括：元素节点（ElementType）：元素节点对应网页的HTML标签元素，元素节点的节点类型值是1，节点名称值是大写的标签名。
属性节点（AttributeType）：属性节点表示元素的属性，节点类型值为2，节点名称值是属性的名称，nodeValue的值是属性对应的值。
文本节点（TextType）：文本节点表示元素的内容，节点类型值为3，节点名称值是null，nodeValue的值是文本内容。
注释节点（CommentType）：注释节点表示注释内容，节点类型值为8，节点名称值是null，nodeValue的值是注释内容。
文档节点（DocumentType）：文档节点表示HTML文档，也称为根节点，指向document对象。
文档片段节点（DocumentFragmentType）：文档片段节点表示文档片段，节点类型值为15，节点名称值是null，nodeValue的值是片段内容。
域节点（DomainType）：域节点表示域，节点类型值为16，节点名称值是域的名称，nodeValue的值是域的值。
属性节点（ProprietaryType）：属性节点表示专有属性，节点类型值为17，节点名称值是属性的名称，nodeValue的值是属性对应的值。
命名空间节点（NamespaceType）：命名空间节点表示命名空间，节点类型值为18，节点名称值是命名空间的名称，nodeValue的值是命名空间的URL。
CDATA节点（CharacterDataType）：CDATA节点表示字符数据，节点类型值为4，节点名称值是null，nodeValue的值是数据内容。
程序代码节点（ProcessingInstructionType）：程序代码节点表示处理指令，节点类型值为7，节点名称值是处理指令的名称，nodeValue 的值是处理指令的内容。
这种节点类型主要用于XML文档中，表示特定的程序指令。
DOM简介及相关API⼀、什么是 DOM⽂档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语⾔（HTML或者XML）的标准编程接⼝。
W3C 已经定义了⼀系列的 DOM 接⼝，通过这些 DOM 接⼝可以改变⽹页的内容、结构和样式。
⼆、DOM 树⽂档：⼀个页⾯就是⼀个⽂档，DOM 中使⽤ document 表⽰元素：页⾯中的所有标签都是元素，DOM 中使⽤ element 表⽰节点：⽹页中的所有内容都是节点（标签、属性、⽂本、注释等），DOM 中使⽤ node 表⽰DOM 把以上内容都看做是对象三、获取页⾯元素DOM在我们实际开发中主要⽤来操作元素。
获取页⾯中的元素可以使⽤以下⼏种⽅式:1、根据 ID 获取使⽤ getElementById() ⽅法可以获取带有 ID 的元素对象。
document.getElementById('id');使⽤ console.dir() 可以打印我们获取的元素对象，更好的查看对象⾥⾯的属性和⽅法。
2、根据标签名获取使⽤ getElementsByTagName() ⽅法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName('标签名');注意：(1)因为得到的是⼀个对象的集合，所以我们想要操作⾥⾯的元素就需要遍历。
(2)得到元素对象是动态的(3)如果获取不到元素,则返回为空的伪数组(因为获取不到对象)还可以使⽤getElementsByTagName获取某个元素(⽗元素)内部所有指定标签名的⼦元素,但⽗元素必须是单个对象(必须指明是哪⼀个元素对象).获取的时候不包括⽗元素⾃⼰。
<div id="demo"><ul><li>hello</li></ul><ol><li>你好</li></ol></div>例如获取以上ul中的li，我们可以这样var ul=document.geElementById("demo");//获取到⽗元素var li=ul.getElementsByTagName("li");//再获取⽗元素下⾯所有的li3、通过 HTML5 新增的⽅法获取1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合2. document.querySelector('选择器'); // 根据指定选择器返回第⼀个元素对象3. document.querySelectorAll('选择器'); // 根据指定选择器返回所有元素对象集合⽰例：<body><div class="box">盒⼦1</div><div class="box">盒⼦2</div><div id="nav"><ul><li>⾸页</li><li>产品</li></ul></div><script>// 1. getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');// 2. querySelector 返回指定选择器的第⼀个元素对象切记⾥⾯的选择器需要加符号 .box #navvar firstBox = document.querySelector('.box');// 3. 获取id为nav的第⼀个元素var nav = document.querySelector('#nav');// 4. querySelectorAll()返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box');// 5. 获取第⼀个li标签var li = document.querySelector('li');// 6. 获取所有li标签var lis = document.querySelectorAll('li');</script></body>注意：querySelector 和 querySelectorAll⾥⾯的选择器需要加符号,⽐如: document.querySelector('#nav');4、特殊元素获取（body，html）// 1.获取body元素对象var bodyEle = doucumnet.body// 2.获取html元素对象var htmlEle = document.documentElement。
JSP DOM介绍DOM是Document Object Model的缩写，即文档对象模型，是W3C组件推荐的处理XML的标准接口，定义了所有文档元素的对象和属性，以及访问它们的方法（接口）。
W3C文档对象模型（DOM）定义了访问诸如XML和XHTML文档的标准，是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。
W3C DOM被分为3个不同的部分：●核心DOM 用于任何结构化文档的标准模型。
●XML DOM 用于XML文档的标准模型。
●HTML DOM 用于HTML文档的标准模型。
XML DOM定义了访问和处理XML文档的标准方法。
XML DOM是XML D ocument Object Model的缩写，即XML文档对象模型，是用于获取、更改、添加或删除XML元素的标准。
HTML DOM定义所有HTML元素的对象和属性，以及访问它们的方法（接口）。
W3C文件对象模型（DOM）可以看作是一个平台或语言中立的（language-neu tral）界面，它允许程序和脚本动态的访问以及更新文档的内容、结构、脚本程序。
在这里DOM仅仅只是一种对某种功能和结构的声明，告诉别的对象，具有什么样的概念定义。
简单来看，DOM可以看作是一组API（Application Program Interface 即应用程序接口），它把HTML文档，XML文档等看成一个文档对象，在里面存放的是对这些文档操作的属性和方法的定义。
DOM技术并不是首先用于XML文档，对于HTML文档来说，早就可以使用DOM来读取里面的数据了。
W3C DOM提供了一组描述HTML及XML文件的标准对象和一个用来访问和操作这类文件的标准界面。
若以面向对象的思维来看，可以把HTML文档或XML 文档看成是一个对象，一个XML文档对象可以包含其它的对象，如节点对象。
对XML文档对象的操作实际是对该对象的节点对象的操作，可以对对象进行修改等操作。
DOM获取节点的三种常用方法在前端开发中，DOM（文档对象模型）是非常重要的一部分。
通过DOM，我们可以操作网页上的元素节点，实现动态的页面效果。
而获取节点则是在DOM中常见的操作之一、本文将介绍DOM获取节点的三种常用方法，分别是getElementById、getElementsByClassName和getElementsByTagName。
一、getElementById：getElementById是DOM中最简单，也是最常用的获取元素的方法。
它通过指定元素的id属性来获取对应的元素节点。
id属性在HTML文档中是唯一的，所以该方法可以准确定位到对应的元素。
getElementById的语法如下：```javascriptdocument.getElementById(id)```其中，id代表要获取的元素的id属性值。
如果找到对应id的元素，则返回该元素节点；如果找不到，则返回null。
例如，以下代码将会获取文档中id为"myElement"的元素节点：```javascriptvar myElement = document.getElementById("myElement");```二、getElementsByClassName：getElementsByClassName是通过元素的类名来获取元素的方法。
它会返回一个元素节点的集合，这些元素节点的类名与指定的类名相同。
getElementsByClassName的语法如下：```javascriptdocument.getElementsByClassName(className)```其中，className是要获取元素的类名。
可以指定一个或多个类名，多个类名之间用空格分隔。
这样，返回的集合中会包含具有这些类名中至少有一个的元素节点。
例如，以下代码将会获取文档中所有类名为"myClass"的元素节点：```javascriptvar elements = document.getElementsByClassName("myClass");```需要注意的是，getElementsByClassName是在HTML5中引入的方法，旧版本的浏览器可能不支持。
jsdom 用法关于[jsdom](jsdom是一个Node.js模块，它允许开发者在服务器端使用和操作DOM。
DOM（文档对象模型）是浏览器创建的一个树状结构，表示HTML或XML 文档的结构，jsdom使得在服务器端模拟这种结构成为可能。
jsdom的安装非常简单，只需在终端运行以下命令：npm install jsdom安装完成后，我们可以在代码中引入jsdom模块：JavaScriptconst jsdom = require("jsdom");const { JSDOM } = jsdom;接下来，让我们一步一步回答关于jsdom的用法。
1. 使用jsdom创建DOM对象可以使用jsdom提供的JSDOM类来创建一个虚拟的DOM对象。
你可以指定HTML、XML或一个URL来加载DOM。
下面的代码展示了如何使用jsdom创建一个DOM对象：JavaScriptconst { JSDOM } = jsdom;const dom = new JSDOM(`<!DOCTYPE html><p>Helloworld</p>`);const document = dom.window.document;这样，我们就创建了一个包含一个段落元素的DOM对象，并将其赋值给了`document`变量，我们可以使用这个变量进行后续操作。
2. 操作DOM一旦我们创建了DOM对象，我们就可以使用标准的DOM API来操作它。
可以像在浏览器中一样使用JavaScript来操作DOM，例如添加、删除、修改元素等。
下面的代码演示了如何在DOM中添加新元素，并将其插入到文档中：JavaScriptconst paragraph = document.createElement("p");paragraph.textContent = "This is a new paragraph"; document.body.appendChild(paragraph);这段代码创建了一个新的段落元素，并将文本内容设为"This is a new paragraph"，最后通过`appendChild`方法将段落元素插入到文档的body中。
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声明，私有属性不能通过对象名来实现输出。
