8-BOM和DOM

BOM

1. 什么BOM？

浏览器对象模型。

2. BOM中的顶级对象是什么？

window

3. 顶级对象下面有哪些子对象？

document location history navigator frames screen

4. window对象的方法有哪些？

alert() : 警告框
confirm() ：选择框
prompt() ：输入框
open() ：打开新窗口
close() ： 关闭当前窗口

5. location对象

跳转页面

1. window.location
2. location.href
3. location.assign()
   刷新
   location.reload() 默认为false，从浏览器的缓存中加载数据。true : 从远端服务器加载数据。

6. history对象

1. back() : 后退
2. forward() : 前进
3. go(n) : n < 0 后退 n > 0 前进 n == 0 刷新

7. navigator对象

navigator.useAgent : 获取浏览器的名称、版本、操作系统的信息。

8. 计时器

1. var timer = setInterval(函数,毫秒数) : 间歇性计时器（死循环）
   停止计时器： clearInterval(timer);
2. var timer = setTimeout(函数,毫秒数) : 一次性定时器
   停止定时器： clearTimeout(timer);

事件

1. onload ： 加载事件
2. onscroll : 滚动事件（滚动条）

//1. 滚动条到顶端的距离
function scrollTop(){
    return Math.floor(document.documentElement.scrollTop || document.body.scrollTop);
}
//2. 滚动条到左端的距离
function scrollLeft(){
    return Math.floor(document.documentElement.scrollLeft || document.body.scrollLeft);
}

DOM

1. 如何获取页面元素对象？

document.getElementById(‘id属性’) : 通过id属性获取指定的元素对象。
document.getElementsByTagName(‘标签名’) : 通过标签名获取元素对象的集合（伪数组、类数组）
document.getElementsByName(‘name属性’) : 通过name属性获取元素对象的集合（伪数组、类数组）
document.getElementsByClassName(‘class属性’) : 通过class属性获取元素对象的集合（伪数组、类数组） (兼容：IE9以下不支持)

            function byClassName(obj,className){
            if(obj.getElementsByClassName){ //支持
                return obj.getElementsByClassName(className);
            }else{ //不支持
                //获取所有的元素对象
                var eles = obj.getElementsByTagName('*');
                //空数组
                var arr = [];
                //遍历每一个对象
                for(var i = 0,len = eles.length;i < len;i ++){
                    //判断是否有className这个属性
                    if(eles[i].className === className){
                        arr.push(eles[i]);
                    }
                }
                return arr;
            }
        }

document.querySelector(‘选择器’) : 通过选择器获取指定的元素对象。
document.querySelectorAll(‘选择器’) : 通过选择器获取元素对象的集合（伪数组、类数组）

document.documentElement : 获取html
document.body : 获取body
document.head : 获取head

2. 如何创建节点对象？

创建元素节点 document.createElement(‘标签名’)
创建文本节点 document.createTextNode(‘文本内容’)
创建文档碎片 document.createDocumentFragment()

            var o_ul = document.querySelector("ul");
            var fragment = document.createDocumentFragment();//创建文档碎片
            var arr = ["男装","女装","童装","汉服","老年装"];
            arr.forEach(function(value,index,array){
                // 创建
                var o_li = document.createElement("li");
                var o_a = document.createElement("a");
                o_a.href = "http://www.baidu.com";
                var txt = document.createTextNode(value);
                // 追加
                o_a.appendChild(txt);
                o_li.appendChild(o_a);
                // o_ul.appendChild(o_li);
                fragment.appendChild(o_li);
            })
            // 只交互一次
            o_ul.appendChild(fragment);

3. 如何将节点对象添加到页面中？

父节点.appendChild(子节点) : 将子节点添加到父节点中子节点列表的末尾。

4. 如何修改节点对象

父节点.replaceChild(新节点,旧节点) : 替换节点

            // 创建一个p标签
            var p = document.createElement("p");
            // 创建一个文本节点
            var o_txt = document.createTextNode("哈哈");
            var txt = document.createTextNode("呵呵");
            // p后面追加文本节点
            p.appendChild(o_txt);
            document.body.appendChild(p);
            //             新   旧
            p.replaceChild(txt,o_txt);

5. 如何删除节点对象

父节点.removeChild(子节点)

            // 获取p节点
            var o_p = document.querySelector("p");
            //创建一个文本节点
            var o_txt = document.createTextNode("哈哈");
            o_p.appendChild(o_txt);
            o_p.removeChild(o_txt);

当前节点.remove() (有兼容)

6. 如何克隆节点对象

当前节点.cloneNode([true]);
false(默认) : 只克隆当前节点，不包含内容
true : 克隆当前节点，包含内容

           // 创建
           var o_p = document.createElement("p");
           var o_li = document.createElement("li");
           var txt = document.createTextNode("哈");
           // 追加
           document.body.appendChild(o_p);
           o_p.appendChild(o_li);
           o_li.appendChild(txt);
           // 添加
           var o_body = document.body;
           o_li.onclick = function(){
               // 参数如果是true的话克隆当前节点和内容
         o_body.appendChild(this.cloneNode(true));
           }

7. 常见子节点及节点属性

	nodeName	nodeType	nodeValue
元素节点	元素名(大写)	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

8. 元素节点属性的操作

• 元素支持的属性，可以使用 对象.属性 来实现操作（增、删、改、查）
• 元素不支持的属性（自定义属性）

对象.getAttribute(属性名) : 获取属性值
对象.setAttribute(属性名,属性值) : 添加或修改属性。
对象.removeAttribute(属性名) : 删除属性

9. outerHTML innerText innerHTML的区别

• outerHTML : 获取当前标签及所有内容
• innerText ：设置或获取当前标签内部的所有文本内容（不可以解析超文本）
• innerHTML ：设置或获取当前标签内容的所有文本及超文本内容（可以解析超文本的含义）

10. 获取所有的子节点

• 父节点.childNodes (元素子节点和文本子节点)

//删除空白文本子节点
function removeSpaceTextNode(node){
    //获取所有子节点
    var childs = node.childNodes;
    //遍历所有子节点
    for(var i = 0;i < childs.length;i ++){
        //  找到文本节点              且         是空白的文本
        if(childs[i].nodeType === 3 && /^\s+$/.test(childs[i].nodeValue)){
            //删除节点
            node.removeChild(childs[i]);
        }
    }
    return node;
}

• 父节点.children ： 只获取元素子节点

11. 高级选取(带有element的是有兼容)

parentNode : 父节点
firstChild : 第一个子节点
firstElementChild : 第一个元素子节点
lastChild : 最后一个子节点
lastElementChild : 最后一个元素子节点
previousSibling : 前一个兄弟节点
previousElementSibling : 前一个元素兄弟节点
nextSibling : 下一个兄弟节点
nextElementSibling : 下一个元素兄弟节点

12. offsetWidth/offsetHeight

元素节点.offsetWidth : 获取当前节点的相对宽度（width + border + padding)
元素节点.offsetHeight : 获取当前节点的相对高度（height + border + padding)

13. 获取非行内样式

getComputedStyle(节点对象,true) //标准浏览器获取非行内样式
节点对象.currentStyle // IE浏览器获取非行内样式

    function getStyle(obj,attr){//obj：节点对象  attr：样式属性
        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
    }

14. 插入子节点

• 父节点.insertBefore(新节点，旧节点) ： 在指定位置插入新节点

15. offsetLeft/offsetTop

节点对象.offsetLeft : 如果没有定位，那么当前节点相对于页面（body)的left值。如果有定位，则当前节点相对于父节点的left值。
节点对象.offsetTop : 如果没有定位，那么当前节点相对于页面（body)的top值。如果有定位，则当前节点相对于父节点的top值。