JavaScript DOM对象

HTML DOM Document 对象（DOM，Document Object Model，文档对象模型）

参考：http://www.w3school.com.cn/jsref/dom_obj_document.asp

　　   https://developer.mozilla.org/zh-CN/docs/Glossary/DOM

DOM 是载入到浏览器中的文档模型，它用节点树的形式来表现文档，每个节点代表文档的构成部分（例如： element——页面元素、字符串或注释等等）。

DOM 是Web——万维网上使用最为广泛的API之一，因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。

和window对象的关系     

window.document    

window.document.body

 

window 浏览器窗口 document   把整个网页看做一个对象 ，通过操作整个对象，来控制改变网页的内容，document.write();

 

 

DOM 对象常用方法：

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

查询(获得Dom节点)---------
document.getElementById()    //通过ID号查找元素
document.getElementsByTagName()    //通过标签名称查找元素
document.getElementsByName()      //通过name属性来查找元素
document.querySelectorAll // 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)
document.querySelector //返回文档中与指定选择器或选择器组匹配的第一个 html元素Element。 如果找不到匹配项，则返回null。


IE8以下 不支持以下方法，
document.getElementsByClassName()   //通过class属性来查找元素、设置某元素的class时：某元素.className="active"
document.querySelector(selector)  //selector是一个字符串，包含一个或是多个 CSS 选择器 ，多个则以逗号分隔。 
document.querySelectorAll()

除getElementById()，其他的获取方法得到的都是伪数组（具有数组的一些特性，如：length属性，有索引值1.2.3...，但不能使用数组的方法），将伪数组转为数组：

http://www.cnblogs.com/fanlinqiang/p/7741236.html

getElementsByClassName()兼容性处理如下：

增加节点

document.createElement()  // 创建一个DOM元素        (document.createTextNode();//插入内容中的标签不会被解析)
_parentNode.appendChild(target)   // 将target元素追加到box元素的内部，此时浏览器才能正确加载并显示元素
_parentNode.insertBefore(newnode, oldnode)   //将newnode元素插入到parent元素的内部，同时放在oldnode元素的前面 
_node.cloneNode(deep)//克隆一个节点，deep设置为 true，如果您需要克隆节点及其属性，以及后代；设置为 false，如果您只需要克隆节点及其后代

删除节点

_parentNode.removeChild(child)    // 将child元素删除，parent是child元素的父亲
_node.remove(); // 非w3c标准，但大部分浏览器都支持

更改节点

_node.style.background = 'red'   
_node.style.backgroundColor = 'red'
_node.style.cssFloat = 'left'

 获取属性及自定义属性

获取一个自定义属性的值（在IE8中可box.index直接取）
box.getAttribute("index")
// 修改
box.index = 99;
box.setAttribute("index",99) //会在html中生成属性index

 tips:在js中 直接定义box.index=i   box.index   存取index值，但不会在html标签中生成index属性

在html5中提供了为dom元素提供了dataSet属性，可以轻松获得绑定在dom元素中data-*的属性值，如：

<img id="test" src="" data-url='http://www.cnblogs.com/fanlinqiang/icon' />

....
var img = document.getElementById('test')
img.setAttribute('src',img.dataset.url)

 若非行内样式 doc.style.height  为空,此时对于非行内样式的操作（可修改不可读取） ,获取非行间样式兼容性操作，如下：

function getStyle(obj, attr) {
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; // 火狐
}

节点类型

比较重要的节点类型有：

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

 

高级操作

parentNode   //获取父节点
childNodes    //获取所有子节点  IE7及以下自动过滤文本节点
children   //获取所有子标签(非W3C标准，但几乎所有浏览器都支持)

previousSibling  //前一个兄弟节点
nextSibling        //后一个兄弟节点
previousElementSibling    // 前一个兄弟元素（非W3C标准）
nextElementSibling          // 后一个兄弟元素（非W3C标准）

如何忽略空白节点？  

function getElementChildren(obj){
     var list = obj.childNodes;
      var res = [];
     for(var i=0; i<list.length; i++){
          if(list[i].nodeType == 1 ){
               res.push(list[i]);     
          }
     }
      return res;
}

 高级操作----位置、大小计算

offsetWidth  (（content+padding+border）)    // clientWidth (padding+width-滚动条）     //计算元素的可视宽度
offsetHeight （只读）// clientHeight     计算元素的可视高度

innerWidth  //内部可视宽度        
innerHeight // 在Google中 window.innerWidth=window.clientWidth，在火狐中window.clientWidth包括右边滚动条

ele.offsetLeft     //计算元素相对于参照物的位置(有定位的父元素) offsetLeft = left + marginLeft
ele.offsetTop     //计算元素相对于参照物的位置(有定位的父元素)

//获取参照物父元素
offsetParent       获取参照物父元素，获取有定位的父元素

获取页面元素相对于窗口的绝对位置：   

function offsetPage(obj){
    var _left=0;
    var _top=0;
    while(obj){
        _left+=obj.offsetWidth;
        _top+=obj.offsetHeight;
        obj=obj.offsetParent;
    }
    return {"left":_left,"top":_top};
}

 获取某个子节点相对于父元素的位置

function offsetParent (parentNode, currentNode) {
        let left = 0;
        let top = 0;
        while (currentNode) {
            left += currentNode.offsetWidth;
            top += currentNode.offsetHeight;
            if (currentNode === parentNode) {
                break;
            }
            currentNode = currentNode.offsetParent;
        }
        return {left, top};
    }

element.scrollIntoView( [Boolean | Options]); //让当前的元素滚动到浏览器窗口的可视区域内。https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

Boolean型参数 :如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。

Options型参数：

{
    behavior: "auto"  | "instant" | "smooth", // 定义动画,默认为 "auto"。
    block:    "start" | "center" | "end" | "nearest", // 与可视区域对齐的方式，默认为 "center"。
    inline: "start" | "center" | "end" | "nearest", // 默认为 "nearest"。
} 

 

innerHTML  和  innerText  区别？

box.innerHTML(".......")插入的标签会被浏览器编译       box.innerText(".........")插入的仅是文本，标签不会被浏览器解析

文本节点

 var txt = document.createTextNode("nihao");

document.body.appendChild(txt);

文档碎片

（与计算机的缓存的概念类似，减少IO次数，保护硬盘，每次使用dom操作时会使整个页面产生热reflow、repain,其中的开销是极大的）

 document.createDocumentFragment()

文档碎片测试

var t1 = new Date().getTime();
for(var i=0; i<10000; i++) {
    var oP = document.createElement("p")
    oP.innerHTML = "a";
    document.body.appendChild(oP);
}
var t2 = new Date().getTime();
console.log(t2-t1);
 
var t3 = new Date().getTime();
var frag = document.createDocumentFragment();
for(var i=0; i<10000; i++) {
    var oP = document.createElement("p")
    oP.innerHTML = "a";
    frag.appendChild(oP); //appendChild 是个异步方法
}
document.body.appendChild(frag);
var t4 = new Date().getTime();
console.log(t4-t3);