JavaScript DOM权威指南

15.1 DOM概览

15.2 选取文档元素

• getElementById()

function getElementId(){
    var elements = {};
    for(var i=0;i<arguments.length;i++){
        var id = arguments[i];
        var elt = documemt.getElementById(id);
        if(elt == null){
            throw new Error('no elements with id:' + id);
        }
        elements[id] = elt;
    }
    return elements;
}

• getElementsByName()
• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()/querySelector()

15.3 文档结构和遍历

• 作为节点树的文档
  • parentNode
  • childNodes：只读的类数组对象

两种方法可以将类数组对象转化为数组 :

• 1. ES6中 Array .from()[需要编译]
• 2. Array.prototype.slice.call(someNode.childNodes,0);
  • firstChild / lastChild ：没有返回null
  • nextSibling / prevSibling：这两个属性将节点之间以双向链表的形式连接起来
  • nodeType
  • nodeValue : Text节点或者Comment节点的文本内容
  • nodeName：元素的标签名，以大写形式表示
• 作为元素树的文档
  • firstElementChild / lastElementChild
  • nextElementSibling / prevElementSibling
  • childElementCount：返回子元素的数量 == children.length

15.4 属性

• html属性：document.getElementById('myimg').src;
• 设置获取非标准html属性
  • getAttribute()
  • setAttribute()
  • hasAttribute()
  • removeAttribute()
• 数据值属性
  • HTML5中设置了"data-x" == dataset.x 例如：data-jquery-test == dataset.jqueryTest(驼峰表示法)
• Attr节点的属性：attributes属性，用法与childNode属性类似.

15.5 元素的内容

• 作为html元素的内容：
  • innerHTML浏览器擅长解析HTML，但是“+= 效率低下，因为既要序列化又要解析”
  • outerHTML:包含当前标签名的输出
• 作为纯文本的元素内容
  • textContent：将指定元素中的多有后代Text节点简单的串联在一起
  • innerText：不反悔<script>标签内的内容，并试图表留意表格形式，针对某些表格元素<table>等相关元素都是只读属性
• 作为Text节点的元素内容:nodeValue属性保存text节点的内容。
  textContent，innerHTML，innerText对比

15.6 创建插入删除节点

• createElement()
• cloneNode()[true深复制]-[false浅复制] / 除了IE浏览器，Document.importNode()方法也可以创建节点副本[第一个参数为要插入的节点，第二个参数如果是true则表示递归所有的后代节点]
• appendChild()
• insertBefore()[带插入的节点]-[已经存在的节点]
• removeChild()
• replaceChild()[新节点]-[需要代替的节点],是childNodes中的节点，包括文本节点注释节点

function embolden(n){
    if(typeof n == "string"){
        n = document.getElementById(n);
    }//如果参数为字符串而不是节点，将其当做元素的id
    var parent = n.parentNode;
    var b = document.createElement("b");
    parent.replaceChild(b,n);
    b.appendChild(n);
}//用一个新的<b>元素代替 n 节点。并使n节点成为该元素的子节点

15.8 文档和元素的几何形状和滚动

• 文档坐标（整个网页的大小）和视口坐标（看见的窗口，不包括工具条收藏夹什么的）
• 查询窗口滚动条的位置

//以一个对象的x 和y属性的方式返回滚动条的偏移量
function getScrollOffsets(w){
//使用指定的窗口，如果不带参数则使用当前窗口。
    w = w || window;
    //除了IE8及更早的版本，其他浏览器都可以使用
    if(w.pageXOffset != null) return {x:w.pageXOffset,y:w.pageYOffset};
    //对标准模式下的IE
    var d = w.documentl;
    if(document.compatMode == "CSS1Compat")
        return {x:d.documentElemet.scrollLeft,y:d.documentElemet.scrollTop};
    //对怪异模式下的浏览器
    return {x:d.body.scrollLeft,y:d.body.scrollTop};
}

• 查询窗口的视口尺寸

function getViewportSize(){
    //使用指定的窗口，如果不带参数则使用当前窗口。
    w = w || window;
    //除了IE8及更早的版本，其他浏览器都可以使用
    if(w.innerWidth != null) return {w:w.innerWidth,h:w.innerHeight};
    //对标准模式下的IE
    var d = w.documentl;
    if(document.compatMode == "CSS1Compat")
        return {    w:d.documentElemet.clientWidth,
                    h:d.documentElemet.clientHeight  };
    //对怪异模式下的浏览器
    return {x:d.body.clientWidth,y:d.body.clientHeight};
}

• 查询元素的几何尺寸：

  • getBoundingClientRect()不需要参数，返回一个具有left,right,top,bottom四个属性的对象,left,top表示钙元素左上角的X和Y的坐标，right和bottom表示元素右下角的X和Y的坐标,返回的包含padding,不包含margin.
  • 返回元素在视口中的位置

  var box = e.getBoundingClientRect();
  var offsets = getScrollOffsets();
  var x = box.left + offsets.x;
  var y = box.top + offsets.y;
  

  在原始的IE中实现

  var box = e.getBoundingClientRect();
  var w = box.width || (box.right - box.left);
  var h = box.height || (box.bottom - box.top);
  

• 滚动

  • scrollTop()接受一个X和Y的坐标（文档坐标作为滚动条的偏移量设置他们）
  • scrollIntoView()默认参数为将元素的上边缘或尽量接近视口的上边缘。false对应下边缘

var documentHeight = document.documentElement.offsetHeight;//获得文档高度
var viewportHeight = window.innerHeight;//或者 getViewportSize()//获取视口高度 
window.scrollTo(0,documentHeight - viewportHeight);//滚动让最后一页在视中可见