DOM（文档对象模型）
2017-06-28 本文已影响0人
闪电西兰花
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）
-
在DOM中，每个节点都是一个对象；DOM节点有3个重要的属性：
nodeName节点名称、nodeValue节点值、nodeType节点类型- 每个节点都有一个
nodeType属性，用于表明节点的类型，该属性是只读的
元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9//判断某个节点的类型 if(someNode.nodeType == 1){ //兼容所有浏览器 console.log("Node is an Element"); }-
nodeName只读属性，表示节点的名称
1.元素节点的 nodeName 与标签名相同 2.属性节点的 nodeName 是属性的名称 3.文本节点的 nodeName 永远是text 4.文档节点的 nodeName 永远是document-
nodeValue属性，表示属性的值
1.元素节点的 nodeValue 是 undefined 或 null 2.文本节点的 nodeValue 是文本自身 3.属性节点的 nodeValue 是属性的值 - 每个节点都有一个
-
节点之间的关系，就像一个家谱
-
childNodes属性，该属性保存着一个NodeList对象，是个类数组对象，用于保存一组有序的节点，可以通过位置访问的节点，并且该对象还有length属性；NodeList对象的独特之处在于它是基于DOM结构动态执行查询的结果，DOM结构的变化能够自动反映在NodeList对象中
-
var firstChild = someNode.childNodes[0];
var count = someNode.childNodes.length; //length属性表示访问NodeList那一刻时包含的节点数量
-
parentNode属性，指向文档树中的父节点，childNodes列表中的所有节点都拥有相同的父节点，并且这些节点相互之间都是兄弟节点 -
previousSibling属性，返回某个节点之前紧跟的节点（处于同一树层级中）；nextSibling属性，返回某个节点之后紧跟的节点（处于同一树层级中）；2者相同点是，如果无此节点则返回null；因此，列表中第一个节点的previousSibling属性和最后一个节点的nextSibling属性都返回null
if(someNode.nextSibling == null){
console.log("Last node");
}else if(someNode.previousSibling == null){
console.log("First node");
}
//如果列表中只有一个节点，那么这2个属性都为null
-
firstChild属性和lastChild属性分别返回childNodes列表的第一个子节点和最后一个子节点，如果没有则返回null
someNode.firstChild == someNode.childNodes[0];
someNode.lastChild == someNode.childNodes[someNode.childNodes.length-1];
//只有一个子节点的情况下，2者指向同一个节点
-
操作节点
-
appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点，返回新增节点
var returnNode = someNode.appendChild(newNode); console.log(returnNode == newNode); //true console.log(newNode == someNode.lastChild); //true //如果传入的节点已经存在于节点树中，则将该节点从原来的位置转移到新位置 var returnNode = someNode.appendChild(someNode.firstChild); console.log(returnNode == someNode.firstChild); //false console.log(returnNode == someNode.lastChild); //true-
insertBefore()在已有的子节点前插入一个新的子节点，接收2个参数，分别表示要插入的新节点和参照节点，新节点将成为参照节点的前一个兄弟节点（previousSibling）；如果参照节点是null，则相当于执行appendChild()
-
someNode.insertBefore(newNode,null); //添加成为最后一个子节点
someNode.insertBefore(newNode,someNode.firstChild); //添加成为第一个子节点
-
replaceChild()实现子节点(对象)的替换，返回被替换对象的引用；接收2个参数，分别表示要插入的节点和被替换节点；被替换的节点仍然在文档中，只是没有位置了
someNode.replaceChild(newNode,someNode.firstChild); //替换第一个子节点
-
removeChild()从子节点列表中移除节点，返回被移除节点；移除失败，返回null；同replaceChild()被移除的节点仍在文档中
someNode.removeChild(someNode.lastChild); //移除最后一个子节点
-
cloneNode()用于创建调用这个方法的节点的完全相同的副本，接收一个布尔值参数，true表示深复制，也就是复制节点及其整个子节点树，false表示浅复制，只复制节点本身
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
//假设myList保存了<ul>的引用
var deepList = myList.cloneNode(true);
var shallowList = myList.cloneNode(false);
console.log(deepList .childNodes.length); //3（非IE）
console.log(shallowList .childNodes.length); //0
-
Document类型
Document类型表示文档；在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面，而且document对象是window对象的一个属性
1.文档的子节点
documentElement属性：始终指向页面中<html>元素
var html = document.documentElement;
html === document.firstChild; //true
body属性：指向<body>元素
var body = document.body;
2.文档信息
title属性：包含<title>元素中的文本，这个属性可以获取也可以修改当前页面的标题并显示在浏览器标题栏中
var title = document.title;
document.title = " this is new title ";
URL属性：包含页面完整的URL，也就是地址栏中的URL
domain属性：只包含页面的域名，该属性是可以设置的，具体可以参考跨域相关内容
referrer属性：保存着链接到当前页的那个页面的URL，没有来源的情况下可能保存着空字符串
3.查找内容
getElementById()：接收一个参数，即要获取的元素的ID，必须严格匹配，区分大小写，如找到元素则返回该元素，如没有找到则返回null
getElementsByTagName()：接收一个参数，即要获取元素的标签名，返回包含零个或多个元素的NodeList；在HTML中返回一个集合对象，该集合拥有length属性，还可以用下标获取对象中的项
getElementsByName()：返回带有给定name特性的元素；多用在单选按钮中，同样返回一个集合
4.文档写入
write()：接收一个字符串参数
document.write("<strong>" + (new Date()).toString() + "</strong>")
-
Element类型
1.HTML元素
所有HTML元素都由HTMLElement类型表示，具有以下属性：
var div = document.getElementById("mydiv");
console.log( div.id ); //mydiv
div.className = "text";
console.log( div.className ); //text；因为class是保留字，因此该属性用className命名
2.取得特性
操作特性的3个方法：getAttribute()、setAttribute()、removeAttribute()
<div id="mydiv" class="bgColor"></div>
var div = document.getElementById("mydiv");
var divId = div.getAttribute('id');
var divClass = div.getAttribute('class'); //注意这里传的参数是class不是className，className只在通过对象属性访问特性时才使用
var divTitle = div.getAttribute('title');
console.log( divId ); //mydiv
console.log( divClass ); //bgColor
console.log( divTitle ); //特性不存在时返回null
var div = document.getElementById("mydiv");
div.setAttribute('id','newDiv'); //接收2个参数，分别是要设置的特性名和值
div.setAttribute('class','newClass');
div.setAttribute('title','text'); //如果特性不存在，则创建属性并设置相应的值
var divId = div.getAttribute('id');
var divClass = div.getAttribute('class');
var divTitle = div.getAttribute('title');
console.log( divId ); //newDiv
console.log( divClass ); //newClass
console.log( divTitle ); //text
3.创建元素
var div = document.creatElement('div'); //接收1个参数，即要创建元素的标签名
div.id = "mydiv";
div.className = "bgColor";
4.元素的子节点
元素的childNodes属性包含了元素的所有子节点，这些子节点可能是元素、文本节点、注释等；需要注意的是浏览器在解析时的差别：
<ul id="myList">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
//IE8及以下版本解析这段代码时，会显示ul有3个子节点，分别是3个<li>
//其他浏览器解析时则显示7个元素，除了3个<li>之外还有4个文本节点，包括空白符
var ul = document.getElementById('myList');
for(var i=0;i<ul.childNodes.length;i++){
if(ul.childNodes[i].nodeType == 1){ //更好的兼容浏览器，先提前检查下节点类型，确定是元素节点之后再执行相应操作
console.log(ul.childNodes[i].innerHTML);
}
}
