DOM启蒙——第一章
2016-04-07 15:15
148 查看
1.文档对象模型
HTML文档被浏览器解析并转换为一个由节点对象组成以体现当前文档的树状结构，DOM的目的是使用JavaScript操作为当前的文档提供一个编程接口。
2.节点对象类型
●DOCUMENT_NODE (如window.document)
●ELEMENT_NODE如(<body>、<a>、<script>...)
●ATTRIBUTE_NODE(如class="color")
●TEXT_NODE(如由换行符与空白符构成的文本字符)
●DOCUMENT_FRAGMENT_NODE(如document.createDocumentFragment())
●DOCUMENT_TYPE_NODE(如<!DOCTYPE html>)
这些Node属性都是常量，用于存储映射节点到某一特定节点对象类型的数值代号。
for(var key in Node){
console.log(key," = "+Node[key]);
};
●nodeType的值只是一个数值分类，用于描述从特定的JavaScript接口/构造函数构造出的特定节点的类型。
●ATTRIBUTE_NODE类似元素节点，但不参与实际的DOM树结构。
3.继承自节点对象的子节点对象
典型DOM树中的每个节点对象都从Node继承属性和方法，根据文档中节点的类型，还有从其他Node对象扩展出的子节点的对象/接口。
●Object<Node<Element<HTMLElement<(如HTML*Element)
●Object<Node<Attr(DOM4弃用)
●Object<Node<CharacterData<Text
●Object<Node<Document<HTMLDocument
●Object<Node<DocumentFragment
//输出元素全部可用属性
var nodeAnchor=document.querySelector("a");
for(var x in nodeAnchor){
document.write(x+"<br />");
4.节点有关的属性与方法
①节点属性
●childNodes
●firstChild
●lastChild
●nextSibling
●nodeName
●nodeType
●nodeValue
●parentNode
●previousSibling
②节点方法
●appendChild()
●cloneNode()
●compareDocumentPosition()
●contains()
●hasChildNodes()
●insertBefore()
●isEqualNode()
●removeChild()
●replaceChild()
③文档方法
●document.createElement()
●document.createTextNode()
④HTML*Element属性
●innerHTML
●outerHTML
●textContent
●innerText
●outerText
●firstElementChild
●lastElementChild
●nextElementChild
●previousElementChild
●children
⑤HTML元素方法
●insertAdjacentHTML()
5.节点类型与名称
●Node.DOCUMENT_TYPE_NODE===10 (document.doctype.nodeName===html)
●Node.DOCUMENT_NODE===9 (document.nodeType===9&&document.nodeName==="#document")
●Node.DOCUMENT_FRAGMENT_NODE===11(document.createDocumentFragment().nodeName=="#document-fragment")
●Node.ELEMENT_NODE===1(document.querySelector("a").nodeType===1)
●Node.TEXT_NODE===3(document.querySelector("a").firstChild.nodeType===3)
当一个节点的类型不明显时，可以检查其nodeType,如
document.querySelector("a").nodeType==1(true) document.querySelector("a").nodeType==Node.ELEMENT_NODE（true）
6.节点的值
●除了Text和Comment，其他节点类型的nodeValue属性都返回null,该属性作用是获取Text与Comment节点实际文本字符串。
●Text或者Comment节点值可以通过赋给nodeValue属性新的字符串来设定。
7.使用JavaScript方法来创建元素与文本节点
创建Element与Text节点用
●createElement()
●createTextNode()
createElement()接受一个致命要创建的元素类型的字符串为参数，如document.createElement("div");
8.创建并向DOM添加元素与文本节点
●//创建strong元素与文本节点并添加到DOM
document.getElementById('A').innerHTML="<strong>Hi</strong>";
●//创建一个div元素与文本节点替换span
document.getElementById("B").outerHTML=""+'<div id="B" class="new">whats this</div>';
●//创建文本节点并用其更新div#c
document.getElementById("C").textContent="dude";
●//创建文本节点并用它更新div#D (innerText与outerText是非标准扩展)
document.getElementById("D").innerText="keep it";
●//创建文本节点并用其替换div#E
document.getElementById("E").outerText="real";
●insertAdjacentHTML()方法仅在Element节点上有效，可以将节点插入到开标签之前，开标签之后、闭标签之前、闭标签之后。
var elm=document.getElementById("elm");
elm.insertAdjacentHTML('beforebegin','<span>你好</span>')； //插入elm元素的容器外部文本的前方
elm.insertAdjacentHTML("afterbegin","<span>最近</span>"); //插入elm元素的容器内部文本的前方
elm.insertAdjacentHTML("beforeend","<span>怎么</span>"); //插入elm元素的容器内部文本后方
elm.insertAdjacentHTML("afterend","<span>样啊</span>"); //插入elm元素的容器外部文本后方
document.write()也可以用来同步创建、添加节点到DOM，但该方法会在页面加载、解析时就将传给它的值输出到页面上，会阻塞正在加载的HTML文档的解析。
insertAdjacentHTML的选项beforebegin和afterend仅在节点在DOM树中并有父节点时有效。
9.提取DOM树中的部分作为JavaScript字符串
①也可以用添加节点的属性提取DOM的部分作为JS的字符串。
<div id="A"><i>你好</i></div>
<div id="B">年轻人<strong>!</strong></div>
●var A=document.getElementById("A").innerHTML; //斜体你好
●var B=document.getElementById("A").outerHTML; //斜体你好
●var C=document.getElementById("B").textContent; //年轻人！
●var D=document.getElementById("B").innerText; //年轻人！
●var E=document.getElementById("B").outerText; //年轻人！
textContent、innerText、outerText在读取时会返回选中节点内部的所有文本节点。
如document.body.textContent会获取body元素中所包含的所有文本节点。
10.使用appendChild()与insertBefore()向DOM中插入节点对象
●appendChild()会将参数节点附加到调用此方法的节点的子节点末尾
var strongA=document.createElement("strong");
var text=document.createTextNode("小伙子");
document.querySelector("strong").appendChild(text);
●insertBefore() 方法需要两个参数，一个要插入的节点，一个表示在哪个节点之前插入的该节点的引用表示位置。
11.使用removeChild()与replaceChild()来移除和替换节点
从DOM中移除一个节点时，首先需要选取要移除的节点，然后需要获取它的父元素，通常使用parentNode属性，在父节点上调用removeChild()方法给它传需要移除的节点引用。
①
//移除元素节点
var divA=document.getElementById("A");
divA.parentNode.removeChild(divA);
//移除文本节点
var txtB=document.getElementById("B").firstChild;
txtB.parentNode.removeChild(txtB);
console.log(document.body.innerHTML);
②
//替换元素节点
var divA=document.getElementById("A");
var newSpan=document.createElement("span");
newSpan.textContent="雷猴";
divA.parentNode.replaceChild(newSpan,divA);
//替换文本节点
var txtB=document.getElementById("B").firstChild;
var newText=document.createTextNode("扑街");
txtB.parentNode.replaceChild(newText,txtB)
console.log(document.body.innerHTML);
③
replaceChild()和removeChild()会返回覆盖或移除的相应节点，节点不会因为替换或者移除就消失，操作只会从当前文档树中移除节点，但内存中仍存在。
12.使用cloneNode()复制节点
●使用cloneNode()可以复制单个节点或者该节点以及它所有的子节点。
var cloneUl=document.querySelector("ul").cloneNode(false);
console.log(cloneUl.constructor);//HTMLUListElement()
console.log(cloneUl.innerHTML);//空字符串，当给cloneNode()传递的参数为false，只赋值一个节点而不复制其子节点
●要赋值节点和它的子节点，给cloneNode()传递true为参数即可。
var cloneUl2=document.querySelector("ul").cloneNode(true);
console.log(cloneUl2.innerHTML);//<li>你好</li><li>吃了么</li>
●复制Element节点时，它所有的属性和值(包括内联事件)都会被复制，任何通过addEventListener()或者node.onclick方式添加的都不会被复制。
cloneNode()可能导致文档中有重复的元素ID
13.节点集合(NodeList和HTMLCollection)
当从文档树中选取成组的节点或者使用预定义的节点集合时，这些节点都是放在一个NodeList或者一个HTMLCollection中，这些类数组的对象集合特征如下：
●集合可以实时或静态，即集合中包含的节点们或是实时文档树中的某一部分，或是某一实时文档的快照。
●缺省情况下，集合中的节点以所在树中的顺序排序，意味着这个顺序与从树到分支的线性路径吻合
●集合有一length属性，体现列表中的元素的个数。
14.获取直属子节点列表
使用childNodes属性会产生一个类数组的包含直属子节点的列表NodeList。
var list=document.querySelector("ul").childNodes;
●NodeList是类数组，但并不直接从Array继承方法。
Array.prototype.forEach.call(list,function(item){ console.log(item) });
●childNodes不仅包含Element节点，还有Text和Comment等节点。
15.将NodeList或HTMLCollection转换成JavaScript数组
●将节点列表与HTML集合转换成真正的JavaScript数组有很多好处，考虑到NodeList和HTMLCollection都是实时列表，这么做能使我们创建该列表的快照，不与实时DOM绑定，并且转换后可以使用数组方法。
●可以将类数组列表传给call()或者apply()。
//document.links返回文档中的链接集合
alert(Array.isArray(Array.prototype.slice.call(document.links)));//true
alert(Array.isArray(Array.prototype.slice.call(document.querySelectorAll('a'))));//true
16.遍历DOM中的节点
●parentNode
●firstChild
●lastChild
●nextSibling
●previousSibling
//缓存ul
var ul=document.querySelector("ul");
//ul的parentNode名
console.log(ul.parentNode.nodeName);
//ul的第一个子节点
console.log(ul.firstChild.nodeName);
//ul的最后一个子节点
console.log(ul.lastChild.nodeName);
//第一个li的后一个节点
console.log(ul.firstChild.nextSibling.nodeName);
//最后一个li的前一个节点
console.log(ul.lastChild.previousSibling.nodeName);
遍历DOM节点还会遍历文本与注释节点，可以使用以下方法遍历DOM，同时忽略文本与注释节点。
●firstElementChild
●lastElementChild
●nextElementChild
●previousElementChild
●children
●parentElement
childElementCount可以用来计算某个节点中的子元素节点数目。
//ul的第一个子元素节点
alert(ul.firstElementChild.nodeName);
//ul的最后一个子元素节点
alert(ul.lastElementChild.nodeName);
//第一个li的后一个元素节点
alert(ul.firstElementChild.nextSibling.nodeName);
//最后一个li的前一个元素节点
alert(ul.lastElementChild.previousSibling.nodeName);
//ul的所有子节点
alert(ul.children);
//第一个li的父元素节点
alert(ul.firstElementChild.parentElement);
17.使用contains()与compareDocumentPosition()验证节点在DOM树中的位置
①可以使用contains()节点方法得到一个节点是否被另一个节点包含。
alert(document.querySelector("html").contains(document.querySelector("body")));//true
②compareDocumentPosition()能够获取节点相对于传入节点的信息，返回一个数字。
●0 相同元素节点 相同元素节点
●1 选取的节点和传入的节点不在相同文档 DOCUMENT_POSITION_DISCONNECT
●2 传入节点在选取节点之前 DOCUMENT_POSITION_ PRECEDING
●4 传入节点在选取节点之后 DOCUMENT_POSITION_FOLLOWING
●8 传入节点包含选取节点 DOCUMENT_POSITION_CONTAINS
●10、16 传入节点被选取节点包含 DOCUMENT_POSITION_CONTAINS_BY
18.判断两个节点是否相同
isEqualNode()方法可以判断调用该方法的节点是否与传入的参数节点相同。当且仅当:
●两个节点类型相同
●节点的nodeName localName namespaceURI prefix nodeValue属性相同
●attributes NamedNodeMaps相等，不过索引不必相等
●childNodes NodeLists相等。
时两个节点相等。
HTML文档被浏览器解析并转换为一个由节点对象组成以体现当前文档的树状结构，DOM的目的是使用JavaScript操作为当前的文档提供一个编程接口。
2.节点对象类型
●DOCUMENT_NODE (如window.document)
●ELEMENT_NODE如(<body>、<a>、<script>...)
●ATTRIBUTE_NODE(如class="color")
●TEXT_NODE(如由换行符与空白符构成的文本字符)
●DOCUMENT_FRAGMENT_NODE(如document.createDocumentFragment())
●DOCUMENT_TYPE_NODE(如<!DOCTYPE html>)
这些Node属性都是常量，用于存储映射节点到某一特定节点对象类型的数值代号。
for(var key in Node){
console.log(key," = "+Node[key]);
};
●nodeType的值只是一个数值分类，用于描述从特定的JavaScript接口/构造函数构造出的特定节点的类型。
●ATTRIBUTE_NODE类似元素节点，但不参与实际的DOM树结构。
3.继承自节点对象的子节点对象
典型DOM树中的每个节点对象都从Node继承属性和方法，根据文档中节点的类型，还有从其他Node对象扩展出的子节点的对象/接口。
●Object<Node<Element<HTMLElement<(如HTML*Element)
●Object<Node<Attr(DOM4弃用)
●Object<Node<CharacterData<Text
●Object<Node<Document<HTMLDocument
●Object<Node<DocumentFragment
//输出元素全部可用属性
var nodeAnchor=document.querySelector("a");
for(var x in nodeAnchor){
document.write(x+"<br />");
4.节点有关的属性与方法
①节点属性
●childNodes
●firstChild
●lastChild
●nextSibling
●nodeName
●nodeType
●nodeValue
●parentNode
●previousSibling
②节点方法
●appendChild()
●cloneNode()
●compareDocumentPosition()
●contains()
●hasChildNodes()
●insertBefore()
●isEqualNode()
●removeChild()
●replaceChild()
③文档方法
●document.createElement()
●document.createTextNode()
④HTML*Element属性
●innerHTML
●outerHTML
●textContent
●innerText
●outerText
●firstElementChild
●lastElementChild
●nextElementChild
●previousElementChild
●children
⑤HTML元素方法
●insertAdjacentHTML()
5.节点类型与名称
●Node.DOCUMENT_TYPE_NODE===10 (document.doctype.nodeName===html)
●Node.DOCUMENT_NODE===9 (document.nodeType===9&&document.nodeName==="#document")
●Node.DOCUMENT_FRAGMENT_NODE===11(document.createDocumentFragment().nodeName=="#document-fragment")
●Node.ELEMENT_NODE===1(document.querySelector("a").nodeType===1)
●Node.TEXT_NODE===3(document.querySelector("a").firstChild.nodeType===3)
当一个节点的类型不明显时，可以检查其nodeType,如
document.querySelector("a").nodeType==1(true) document.querySelector("a").nodeType==Node.ELEMENT_NODE（true）
6.节点的值
●除了Text和Comment，其他节点类型的nodeValue属性都返回null,该属性作用是获取Text与Comment节点实际文本字符串。
●Text或者Comment节点值可以通过赋给nodeValue属性新的字符串来设定。
7.使用JavaScript方法来创建元素与文本节点
创建Element与Text节点用
●createElement()
●createTextNode()
createElement()接受一个致命要创建的元素类型的字符串为参数，如document.createElement("div");
8.创建并向DOM添加元素与文本节点
●//创建strong元素与文本节点并添加到DOM
document.getElementById('A').innerHTML="<strong>Hi</strong>";
●//创建一个div元素与文本节点替换span
document.getElementById("B").outerHTML=""+'<div id="B" class="new">whats this</div>';
●//创建文本节点并用其更新div#c
document.getElementById("C").textContent="dude";
●//创建文本节点并用它更新div#D (innerText与outerText是非标准扩展)
document.getElementById("D").innerText="keep it";
●//创建文本节点并用其替换div#E
document.getElementById("E").outerText="real";
●insertAdjacentHTML()方法仅在Element节点上有效，可以将节点插入到开标签之前，开标签之后、闭标签之前、闭标签之后。
var elm=document.getElementById("elm");
elm.insertAdjacentHTML('beforebegin','<span>你好</span>')； //插入elm元素的容器外部文本的前方
elm.insertAdjacentHTML("afterbegin","<span>最近</span>"); //插入elm元素的容器内部文本的前方
elm.insertAdjacentHTML("beforeend","<span>怎么</span>"); //插入elm元素的容器内部文本后方
elm.insertAdjacentHTML("afterend","<span>样啊</span>"); //插入elm元素的容器外部文本后方
document.write()也可以用来同步创建、添加节点到DOM，但该方法会在页面加载、解析时就将传给它的值输出到页面上，会阻塞正在加载的HTML文档的解析。
insertAdjacentHTML的选项beforebegin和afterend仅在节点在DOM树中并有父节点时有效。
9.提取DOM树中的部分作为JavaScript字符串
①也可以用添加节点的属性提取DOM的部分作为JS的字符串。
<div id="A"><i>你好</i></div>
<div id="B">年轻人<strong>!</strong></div>
●var A=document.getElementById("A").innerHTML; //斜体你好
●var B=document.getElementById("A").outerHTML; //斜体你好
●var C=document.getElementById("B").textContent; //年轻人！
●var D=document.getElementById("B").innerText; //年轻人！
●var E=document.getElementById("B").outerText; //年轻人！
textContent、innerText、outerText在读取时会返回选中节点内部的所有文本节点。
如document.body.textContent会获取body元素中所包含的所有文本节点。
10.使用appendChild()与insertBefore()向DOM中插入节点对象
●appendChild()会将参数节点附加到调用此方法的节点的子节点末尾
var strongA=document.createElement("strong");
var text=document.createTextNode("小伙子");
document.querySelector("strong").appendChild(text);
●insertBefore() 方法需要两个参数，一个要插入的节点，一个表示在哪个节点之前插入的该节点的引用表示位置。
11.使用removeChild()与replaceChild()来移除和替换节点
从DOM中移除一个节点时，首先需要选取要移除的节点，然后需要获取它的父元素，通常使用parentNode属性，在父节点上调用removeChild()方法给它传需要移除的节点引用。
①
//移除元素节点
var divA=document.getElementById("A");
divA.parentNode.removeChild(divA);
//移除文本节点
var txtB=document.getElementById("B").firstChild;
txtB.parentNode.removeChild(txtB);
console.log(document.body.innerHTML);
②
//替换元素节点
var divA=document.getElementById("A");
var newSpan=document.createElement("span");
newSpan.textContent="雷猴";
divA.parentNode.replaceChild(newSpan,divA);
//替换文本节点
var txtB=document.getElementById("B").firstChild;
var newText=document.createTextNode("扑街");
txtB.parentNode.replaceChild(newText,txtB)
console.log(document.body.innerHTML);
③
replaceChild()和removeChild()会返回覆盖或移除的相应节点，节点不会因为替换或者移除就消失，操作只会从当前文档树中移除节点，但内存中仍存在。
12.使用cloneNode()复制节点
●使用cloneNode()可以复制单个节点或者该节点以及它所有的子节点。
var cloneUl=document.querySelector("ul").cloneNode(false);
console.log(cloneUl.constructor);//HTMLUListElement()
console.log(cloneUl.innerHTML);//空字符串，当给cloneNode()传递的参数为false，只赋值一个节点而不复制其子节点
●要赋值节点和它的子节点，给cloneNode()传递true为参数即可。
var cloneUl2=document.querySelector("ul").cloneNode(true);
console.log(cloneUl2.innerHTML);//<li>你好</li><li>吃了么</li>
●复制Element节点时，它所有的属性和值(包括内联事件)都会被复制，任何通过addEventListener()或者node.onclick方式添加的都不会被复制。
cloneNode()可能导致文档中有重复的元素ID
13.节点集合(NodeList和HTMLCollection)
当从文档树中选取成组的节点或者使用预定义的节点集合时，这些节点都是放在一个NodeList或者一个HTMLCollection中，这些类数组的对象集合特征如下：
●集合可以实时或静态，即集合中包含的节点们或是实时文档树中的某一部分，或是某一实时文档的快照。
●缺省情况下，集合中的节点以所在树中的顺序排序，意味着这个顺序与从树到分支的线性路径吻合
●集合有一length属性，体现列表中的元素的个数。
14.获取直属子节点列表
使用childNodes属性会产生一个类数组的包含直属子节点的列表NodeList。
var list=document.querySelector("ul").childNodes;
●NodeList是类数组，但并不直接从Array继承方法。
Array.prototype.forEach.call(list,function(item){ console.log(item) });
●childNodes不仅包含Element节点，还有Text和Comment等节点。
15.将NodeList或HTMLCollection转换成JavaScript数组
●将节点列表与HTML集合转换成真正的JavaScript数组有很多好处，考虑到NodeList和HTMLCollection都是实时列表，这么做能使我们创建该列表的快照，不与实时DOM绑定，并且转换后可以使用数组方法。
●可以将类数组列表传给call()或者apply()。
//document.links返回文档中的链接集合
alert(Array.isArray(Array.prototype.slice.call(document.links)));//true
alert(Array.isArray(Array.prototype.slice.call(document.querySelectorAll('a'))));//true
16.遍历DOM中的节点
●parentNode
●firstChild
●lastChild
●nextSibling
●previousSibling
//缓存ul
var ul=document.querySelector("ul");
//ul的parentNode名
console.log(ul.parentNode.nodeName);
//ul的第一个子节点
console.log(ul.firstChild.nodeName);
//ul的最后一个子节点
console.log(ul.lastChild.nodeName);
//第一个li的后一个节点
console.log(ul.firstChild.nextSibling.nodeName);
//最后一个li的前一个节点
console.log(ul.lastChild.previousSibling.nodeName);
遍历DOM节点还会遍历文本与注释节点，可以使用以下方法遍历DOM，同时忽略文本与注释节点。
●firstElementChild
●lastElementChild
●nextElementChild
●previousElementChild
●children
●parentElement
childElementCount可以用来计算某个节点中的子元素节点数目。
//ul的第一个子元素节点
alert(ul.firstElementChild.nodeName);
//ul的最后一个子元素节点
alert(ul.lastElementChild.nodeName);
//第一个li的后一个元素节点
alert(ul.firstElementChild.nextSibling.nodeName);
//最后一个li的前一个元素节点
alert(ul.lastElementChild.previousSibling.nodeName);
//ul的所有子节点
alert(ul.children);
//第一个li的父元素节点
alert(ul.firstElementChild.parentElement);
17.使用contains()与compareDocumentPosition()验证节点在DOM树中的位置
①可以使用contains()节点方法得到一个节点是否被另一个节点包含。
alert(document.querySelector("html").contains(document.querySelector("body")));//true
②compareDocumentPosition()能够获取节点相对于传入节点的信息，返回一个数字。
●0 相同元素节点 相同元素节点
●1 选取的节点和传入的节点不在相同文档 DOCUMENT_POSITION_DISCONNECT
●2 传入节点在选取节点之前 DOCUMENT_POSITION_ PRECEDING
●4 传入节点在选取节点之后 DOCUMENT_POSITION_FOLLOWING
●8 传入节点包含选取节点 DOCUMENT_POSITION_CONTAINS
●10、16 传入节点被选取节点包含 DOCUMENT_POSITION_CONTAINS_BY
18.判断两个节点是否相同
isEqualNode()方法可以判断调用该方法的节点是否与传入的参数节点相同。当且仅当:
●两个节点类型相同
●节点的nodeName localName namespaceURI prefix nodeValue属性相同
●attributes NamedNodeMaps相等，不过索引不必相等
●childNodes NodeLists相等。
时两个节点相等。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 对Servlet容器的补充
- Spring3.0详解
- Swift快速给Cocoa库内置类添加便捷初始化器
- Swift快速给Cocoa库内置类添加便捷初始化器
- 使用mysqldump备份数据库时报Got error: 2013错误
- 性能检测工具
- react-native-闪屏页
- "algorithms 4th"---symbol table
- bzoj 3161: 孤舟蓑笠翁 bfs
- Ehcache（02）——ehcache.xml简介
- Hibernate 多对多双向关联
- 指针数组，指针指向const成员函数
- Linux下安装Monogodb-3.2.4
- 十六进制字符串转化成字符串输出HexToStr（Delphi版、C#版）
- 执行session.createSQLQuery(querySql).list()多次后，再次执行没有动静
- 从一个简单的实例来了解PE文件
- Oracle数据库 Null值 总结
- 剑指offer：二叉树的下一个结点
- 【程序猿人生】关爱程序猿 从此刻开始！
- System.load 和 System.loadLibrary详解