8-BOM和DOM – 小飞侠

BOM

什么BOM？

浏览器对象模型。

BOM中的顶级对象是什么？

window

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

document location history navigator frames screen

window对象的方法有哪些？

alert() : 警告框

confirm() ：选择框

prompt() ：输入框

open() ：打开新窗口

close() ：关闭当前窗口

location对象

跳转页面

window.location

location.href

location.assign()

刷新

location.reload() 默认为false，从浏览器的缓存中加载数据。true : 从远端服务器加载数据。

history对象

back() : 后退

forward() : 前进

go(n) : n < 0 后退 n > 0 前进 n == 0 刷新

navigator对象

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

计时器

var timer = setInterval(函数,毫秒数) : 间歇性计时器（死循环）

停止计时器： clearInterval(timer);

var timer = setTimeout(函数,毫秒数) : 一次性定时器

停止定时器： clearTimeout(timer);

事件

onload ：加载事件
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

如何获取页面元素对象？

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

如何创建节点对象？

创建元素节点 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);

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

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

如何修改节点对象

父节点.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);

如何删除节点对象

父节点.removeChild(子节点)

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

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

如何克隆节点对象

当前节点.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));
           }

常见子节点及节点属性

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

元素节点属性的操作

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

对象.getAttribute(属性名) : 获取属性值

对象.setAttribute(属性名,属性值) : 添加或修改属性。

对象.removeAttribute(属性名) : 删除属性

outerHTML innerText innerHTML的区别

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

获取所有的子节点

父节点.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 ：只获取元素子节点

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

parentNode : 父节点

firstChild : 第一个子节点

firstElementChild : 第一个元素子节点

lastChild : 最后一个子节点

lastElementChild : 最后一个元素子节点

previousSibling : 前一个兄弟节点

previousElementSibling : 前一个元素兄弟节点

nextSibling : 下一个兄弟节点

nextElementSibling : 下一个元素兄弟节点

offsetWidth/offsetHeight

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

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

获取非行内样式

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

节点对象.currentStyle // IE浏览器获取非行内样式

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

插入子节点

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

offsetLeft/offsetTop

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

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

原文链接：https://blog.csdn.net/weixin_44144457/article/details/124716483

BOM

事件

DOM

你可能也喜欢