JavaScript DOM基金会

DOM(Document Object Model)是文档对象模型，是HTML和XML文档的API。

DOM描绘了一个分层的节点树，运行的开发人员可以添加/删除和修改页面的某个部分；

DOM简介

d(文档):可以理解为全网加载的网页文档；O (object) :可以理解为类似window对象的东西，它可以调用属性和方法，这里是一个document对象；M (model) :可以理解为网页文档的树形结构；

1 .节点

当加载一个HTML页面时，网络浏览器会生成一个树形结构来表示页面的内部结构。DOM将这种节点结构理解为由节点组成；Html元素是根节点；Head元素是html的子节点；元元素和标题元素是兄弟。

2.节点类型：元素节点/文本节点/属性节点div title='元素属性' Test Div/div元素节点=div属性节点=title='元素属性'文本节点=test Div 2。Finding element W3C提供了方便简单的方法和属性来定位节点，让我们可以快速操作节点；DOM(Document Object Model)是文档对象模型，是HTML和XML文档的API。

DOM描绘了一个分层的节点树，运行的开发人员可以添加/删除和修改页面的某个部分；

元素节点搜索方法方法描述getElementById()获取特定Id元素的节点；GetElementsByTagName()获取同一元素的节点列表；GetElementsByName()获取同名节点的列表；GetAttribute()获取特定元素的节点属性值；SetAttribute()设置特定元素的节点属性值；removeAttribute()移除特定的元素节点属性；

1.getElementById()

//方法接收参数：获取元素的ID；//如果找到对应的元素，则返回该元素的HTMLDivElement对象；如果不存在，则返回nulldocument . getelementbyid(' box ')；//[对象HTMlDivellement]；//当我们通过getElementById()获取特定元素的节点时，就获得了节点对象。//并且通过这个节点对象，我们可以访问它的一系列属性；(1).访问元素节点的属性描述标记名，获取元素节点的标记名；InnerHTML获取元素节点中的内容，这不是W3C DOM标准；document.getElementById('box ')。标记名；//=DIV；document.getElementById('box ')。innerHTML//=test Div；

(2).访问HTML通用属性属性描述id元素节点的id名称；标题元素节点的标题属性值；样式CSS内联样式属性值；className CSS元素的类；

document.getElementById('box ')。id；//=id；document.getElementById('box ')。标题；//获取标题；

document.getElementById('box ')。风格；//获取CSSStyleDeclaration对象；document . getelementbyid(' box '). style . color；//获取style对象中颜色的值；即元素行中设置的样式值；document . getelementbyid(' box '). style . color=' red '；//设置样式对象中颜色的值；

document.getElementById('box ')。className//获取类；document.getElementById('box ')。className=' pox//设置类；

document.getElementById('box ')。bbb//获取自定义属性的值，IE不支持；

2.2 . getelementsbytagname()///方法返回一个对象数组HTMLCollection(NodeList)数组，该数组保存所有相同元素名称的节点列表；document . getelementsbytagname(' * ')；//使用通配符获取所有元素；//PS:IE在使用通配符时，将文档开头html的规范声明作为第一个元素节点；

document . getelementsbytagname(' Li ')；//=[对象HTMlCollECTion]；获取所有li元素；document . getelementsbytagname(' Li ')。[0];//获取第一个li元素；

3.getElementsByName()

获取同名设置的元素，返回一个对象数组HTMlCollECTion(NodeList)；document . getelementsbyname(' add ')；//获取名称='add '的输入元素集合；//PS:对于HTML不合法的属性，JS获取的兼容性会有差异；//IE支持合法名称属性，但自定义属性会不兼容；

4.4.getAttribute()方法将在元素中获取属性值；但是，它不同于直接使用'的方法。获取属性值。document.getElementById('box ')。getAttribute(' my div ')；//获取自定义属性值；document.getElementById('box ')。mydiv//获取自定义属性值，只有IE支持；

5.5.setAttribute()方法将在元素中设置属性和值；接收两个参数属性名称和值：如果属性本身已经存在，将被覆盖；document.getElementById('box ')。setAttribute('align '，' center ')；//设置属性和值；//PS:在IE7及以下版本中，用setAttribute()方法设置类和样式属性没有效果；

6.6.removeAttribute()方法可以移除HTML属性；document.getElementById('box ')。remove Attribute(' style ')；//移除样式样式属性；

三个DOM节点

1 .节点节点属性

//节点可以分为：个元素节点/属性节点和文本节点。//这些节点有三个属性：nodeName/nodeType和nodeValue

信息节点属性节点类型节点名称节点类型节点值元素元素名称1空属性属性名称2属性值文本#text 3文本内容文档。getelementbyid ('box ')。nodetype//=1;元素节点；

2.层次节点属性//层次节点可以分为：个父节点和子节点/兄弟节点；

//当我们获得其中一个元素节点时，可以使用层次节点属性来获得其相关的层次节点。

节点关系示意图

分层节点属性属性表示childNodes读取当前元素节点的所有子节点；FirstChild读取当前元素节点的第一个子节点；LastChild获取当前元素节点的最后一个子节点；OwnerDocument获取该节点的文档根节点，相当于document；ParentNode获取当前节点的父节点；PreviousSibling获取当前节点的前一个对等节点；NextSibling获取当前节点的下一个对等节点；Attributes获取当前元素节点的所有属性节点集；

(1).子节点属性

属性获取元素节点的所有子节点，这些子节点包含元素节点和文本节点；当PS:使用childNodes[n]返回子节点对象时，有可能返回元素子节点，如：HTMLElement也可以返回文本子节点，如：Text元素子节点可以使用nodeName或tagName来获取标记名；并且可以使用nodeValue获取文本子节点；var box=document . getelementbyid(' box ')；for(var I=0；ibox . child nodes . length；I ){判断为元素节点，输出元素标签名；If (box.childnodes [I]。nodetype===1){ console . log(' element node : ' box . child nodes[I]。nodename)；判断为文本节点，输出文本内容；} else if(方框。子节点[I]。nodetype===3){ console . log(' text node : '框。子节点[I]。node value)；}} PS1:在获取文本节点时无法使用innerHTML属性输出文本内容(关键是它不再是元素节点)；此非标准属性必须先获取元素节点，然后才能输出其中包含的文本；alert(box . innerhtml)；innerHTML和nodeValue的第一个区别；

当PS2:innerHTML和nodeValue赋值时，nodeValue会将文本中包含的HTML转义成特殊字符，从而达到形成纯文本的效果；而innerHTML会解析文本中的特殊字符；box.childNodes[0]。node value=' strong ABC/strong '；=strong ABC/strong；box . innerHTMl=' strong ABC/strong '；=abc(粗体)；

(2).firstChild和lastChild属性first child=child nodes[0]；获取当前元素的第一个子节点；last child=child nodes[box . child nodes . length-1]；获取当前元素的最后一个子节点；

(3)环境。ownerdocument属性返回该节点的document对象的根节点，返回的对象相当于document；alert(box . ownerdocument===document)；//=true；根节点；

(4).parent node/previoussibling/next sibling属性

ParentNode:返回该节点的父节点；PreviousSibling:返回该节点的前一个对等节点；NextSibling:返回该节点的下一个对等节点；alert(box . parentnode . nodename)；//获取父节点的标签名；alert(box . first child . next sibling)；//获取第二个节点；alert(box . LastChild . previousSignal)；//获取倒数第二个节点；

(5).attributes属性返回该节点的属性节点集；alert(document . getelementbyid(' box ')。属性)；//=NamedNodeMap；

(6).忽略空白文本节点

var body=document . getelementsbytagname(' body ')[0]；//获取body元素节点；alert(body . childnodes . length)；//非IE=7；IE=3；//PS:在非IE中，标准DOM有识别空白文本节点的功能，但IE自动忽略；函数filterspacenode1 (nodes) {//new数组；var ret=[]；for(var I=0；索引节点长度；I ){ //如果识别到空白文本节点，则不会将其添加到数组中；if(节点[i]。nodeType===3 /^\s $/。测试(节点[i]。nodeValue))继续；//将每个元素节点添加到数组中；ret . push(nodes[I])；}返回ret} //PS:上述方法采用忽略空文件节点的方法，将得到的元素节点累加到数组中返回；函数filterspacenode 2(nodes){ for(var I=0；索引节点长度；I) {if (nodes [I]。nodetype===3/\ s $/。测试(节点[I]。node value)){//得到空节点后，删除父节点上的子节点；nodes[I]. parent node . remove child(nodes[I])；} }返回节点；} //PS:firstChild等方法在获取节点时遇到空白节点，如何处理；函数removeWhileNode(nodes){ for(var I=0；inodes . childnodes . length；i ){ if(nodes.childNodes[i]。nodeType===3 /^\s $/。测试(nodes.childNodes[i])。node value)){ nodes . child nodes[I]. parent node . remove child(nodes . child nodes[I])；} }返回节点；}四节点操作//DOM不仅可以查找节点，还可以创建/复制/插入/删除和替换节点。

节点操作方法方法描述write()该方法可以在文档中插入任意字符串；CreateElement()创建一个元素节点；AppendChild()将新节点追加到子节点列表的末尾；CreateTextNode()创建一个文件节点；InsertBefore()在前面插入新节点；ReplaceChild()用新节点替换旧节点；克隆代码()复制节点；RemoveChild()移除节点；

(1).write()方法//write()方法可以将任意字符串插入到文档中；这是一个段落！/p ')；//解析的文本；(2).createElement()方法createElement()方法可以创建一个元素节点；document . create element(' p ')；//[对象HTMlParagraphElement]；

(3).appendChild()方法appendChild()方法将新节点添加到节点的子节点列表的末尾；var box=document . getelementbyid(' box ')；var p=document . create element(' p ')；//新建一个元素节点P；box . appendchild(p)；//将新的元素节点p添加到子节点的末尾；

(4).createTextNode()方法此方法创建文本节点；Vartext=文档。createtextnode('段落')；p.appendChild(文本)；//在子节点的末尾添加文本节点；

(5).insertBefore()方法

//这个方法可以在指定节点的前面添加一个节点；box.parentNode.insertBefore(p，box)；//在div前加p；box.insertBefore(newNode，null)；//将newNode添加到框自列表的最后一个节点；//PS:insertBefore()方法可以在当前元素之前创建节点，但不提供在当前元素之后创建节点；函数insertafter (newelement，target element){//获取父节点；var parent=TargetElement . parent node；//如果最后一个子节点是当前元素，直接添加。if(parent . LastChild===TargetElement){ parent . appendchild(NewElement)；}else{ //否则，将其添加到当前节点的下一个节点之前；满足在当前节点后添加节点的要求；parent node . insert before(new element，target element . next sibling)；} }

(6).replaceChild()方法此方法可以用指定的节点替换节点；box.parentNode.replaceChild(p，box)；//用p替换div

(7).cloneNode()方法

//此方法可以复制子节点；复制后返回的节点副本属于文档，但没有为其指定父节点；//参数为true:执行深度复制，即复制节点及其整个子节点树；//参数为false:进行浅拷贝，只拷贝节点本身；var box=document . getelementbyid(' box ')；var clone=box . first child . clone node(true)；//获取第一个子节点。true表示复制内容；box.appendChild(克隆)；//添加到子节点列表的末尾；

(8).removeChild()方法此方法删除指定的节点；box.parentNode.removeChild(框)；

总结：就在下一章~