美文网首页
从浏览器架构认识BOM和DOM

从浏览器架构认识BOM和DOM

作者: 一颗冰淇淋 | 来源:发表于2022-01-29 21:20 被阅读0次

    浏览器架构

    JavaScript运行在浏览器,BOM就是连接JavaScript代码和浏览器的桥梁,而DOM就是用来操作各种标签元素的。

    BOM包括 window、history、location、document ...
    DOM包括 Document(整个文档)、Element(标签元素)、CharacterData(字符数据)、Attr(属性),这些元素又可以继续往下划分。

    1_BOM与DOM的关系.png

    其中DOM元素、window对象都继承自EventTarget,所以它们都有EventTarget上的实例方法,而document是HTMLDocument的实例对象

    console.log(window.__proto__);
    console.log(window.__proto__.__proto__);
    console.log(window.__proto__.__proto__.__proto__);
    
    console.log(document.__proto__);
    console.log(document.__proto__.__proto__);
    console.log(document.__proto__.__proto__.__proto__);
    console.log(document.__proto__.__proto__.__proto__.__proto__);
    
    2_继承自EventTarget.png

    EventTarget

    EventTarget有三个原型方法,在window和DOM元素上都可以使用

    • addEventListener 给元素绑定事件
    • removeEventListener 移除元素绑定的事件
    • dispatchEvent 派发事件

    给window对象绑定 "click" 点击事件

    window.addEventListener('click', (event)=>{
     console.log('屏幕被点击啦')
    })
    

    BOM

    BOM主要包括以下几个对象

    • window:包括全局、控制浏览器窗口相关的属性、方法
    • history:浏览器曾经的会话历史记录
    • location:访问的URL的信息
    • document:当前窗口操作的文档对象
    window

    window在浏览器端有两个作用

    一、作为全局对象

    作为全局对象时,它主要有两个用途

    • 通过var定义的变量将被挂载到window上
    • 提供了全局方法 setTimeout、Math、Date
    var user = "alice";
    console.log(window.user);
    
    window.setTimeout(() => {
      console.log(window.setTimeout);
    }, 0);
    
    3_window作为全局对象.png

    二、作为浏览器的窗口对象

    作为浏览器的窗口对象承担着非常多的功能

    • 包含大量的属性,localStorage、console、location、history、screenX、scrollX ...
    • 包含大量的方法,alert、close、scrollTo、open ...
    • 包含大量的事件,focus、blur、load、hashchange ...
    • 包含从EventTarget继承 addEventListener、removeEventListener、dispatchEvent方法

    window 的属性/方法/事件,可以省略window,直接使用其属性/方法/事件

    console.log(window.screenX);
    console.log(console);
    
    scrollTo(200, 200);
    window.onload = function () {
      console.log("onload事件");
    };
    
    4_window作为浏览器窗口.png
    location

    location中有大量关于url的信息,常用的是这些

    • hash:锚点,url上#号后面的内容,可以用于页面中定位
    • host:主机+端口号
    • hostname:主机
    • href:完整url链接
    • pathname:路径
    • port:端口号
    • protocol:协议

    在控制台上直接输入 location,可以获取到 location 对象的信息

    5_loaction.png

    location还有三个方法,也和url相关

    • assign:跳转一个新的url页面
    • replace:替代当前页面,不会被保存到历史记录中,表示不能通过后退按钮回到该页面
    • reload:重新加载当前url的资源
    history

    history用来保存浏览器会话记录,可以通过history的方法跳转上、下一个页面

    它有两个属性

    • length:history栈的长度,表示保存了几条数据
    • state:通过pushState/repleaceState 方法跳转保留的状态值

    还有五个方法

    • pushState:跳转某一地址,三个参数分别为保存的state,页面的title,跳转的url地址
    • replaceState:替换当前地址
    • go:前进/后退指定页,传入数字
    • back:后退一页,相当于 go(-1)
    • forward::前进一页,相当于go(1)
    window.addEventListener("click", () => {
      history.pushState({ name: "alice" }, null, "/home");
      console.log(history.length);
      console.log(history.state);
    });
    
    6_history.png

    用一张图来总结BOM的用法

    7_BOM.png

    DOM

    浏览器中有很多标签,DOM就是用来操作它们的。DOM元素都继承自EventTarget,所以它们都有实例上的属性方法,也继承自Node,同样具有Node的属性和方法。

    Node再往下划分,就是各个DOM元素,它们有各自的特征

    • Document:文档,包含HTMLDocument(html文档)、XMLDocument(xml文档)
    • Element:标签元素,包含HTMLElement,HTMLElement又包含HTMLDivElement(div元素),HTMLImageElement(img元素)
    • CharacterData:字符数据、文本,包含Text(标签中的内容)、Comment(注释)
    • Attr:属性,比如 name,class
    node

    node是其它元素的父类,它所拥有的属性,子元素都有,以下几个属性和方法比较常见

    • nodeName:节点名称
    • nodeType:节点类型
    • nodeValue:节点的值
    • childNodes:所有子节点
    • appendChild:方法,用于添加子元素
     <div class="box">我是一个盒子</div>
    
    const divEl = document.querySelector("div");
    console.log(divEl.nodeName);
    console.log(divEl.nodeType);
    console.log(divEl.nodeValue);
    console.log(divEl.childNodes);
    console.log(divEl.childNodes[0].nodeValue);
    
    console.log(document.nodeName);
    console.log(document.nodeType);
    console.log(document.nodeValue);
    console.log(document.childNodes);
    

    每一种元素类型有对应的nodeType,比如 element_node 对应type为1,text_node 对应type为3,comment_node对应type为8,document_node对应type为9;而nodeValue只有文本类型的数据有。

    8_node的属性.png
    document

    document 是Document的实例对象,代表整个html页面,当页面被浏览器解析完成,就会创建一个document对象。

    document 中有非常多的标签,当我们创建一个html页面时,至少会有以下内容。

    9_html初始化代码.png

    所以它的属性和方法都和标签元素有关

    • body:获取body标签
    • title:获取文档标题
    • head:获取head标签
    • children:获取所有子元素,HTMLCollection
    • location:和window.location一样,拿到的是url信息
    10_document的属性.png

    常用方法包括了创建、删除、获取元素

    • createElement:创建元素
    • removeElement:移除元素
    • appendChild:继承自Node的属性,添加子元素
    • querySelector:通过id/name/tagName获取单个元素
    • querySelectorAll:通过id/name/tagName获取多个元素
    • getElementById:通过Id获取元素
    • getElementsByName:通过Name获取元素
    • getElementsByTagName:通过TagName获取元素
    // html 代码
    <body>
        <p></p>
        <p></p>
    
    // js 代码
      <script type="text/javascript">
          const divEl = document.createElement("div");
          const pEl = document.getElementsByTagName("p")[0];
          const divTags = document.querySelectorAll("div");
    
          document.body.appendChild(divEl);
          document.body.removeChild(pEl);
    
          console.log(pEl);
          console.log(divTags);
        </script>
    </body>
    
    11_document的方法.png
    element

    element与单个标签元素有关,指的是具体的dom元素,它有这些常用属性和方法

    • chidren:子元素
    • childNodes:继承自Node的属性,子节点
    • tagName:标签名
    • id:id属性
    • className:类名
    • classList:由类名组成的数组
    • clientWidth:元素宽度
    • clientHeight:元素高度
    • clientLeft:边框宽度
    • clientTop:边框高度
    • offsetWidth:距离左侧边距
    • offsetTop:距离右侧边距
    • getAttribute:方法,用于获取元素的某个属性
    • setAttribute:方法,用于设置元素的某个属性
    // html代码
    <div id="element" class="box content"></div>
    
    // css代码
     .box {
        height: 200px;
        width: 200px;
        border: 10px solid #000;
    }
    
    // js代码
    const divEl = document.querySelector("div");
    console.log(divEl.children);
    console.log(divEl.childNodes);
    console.log(divEl.tagName);
    console.log(divEl.id);
    console.log(divEl.className);
    console.log(divEl.classList);
    console.log(divEl.clientWidth, divEl.clientHeight);
    console.log(divEl.clientLeft, divEl.clientTop);
    console.log(divEl.offsetLeft, divEl.offsetTop);
    console.log(divEl.getAttribute("id"));
    divEl.setAttribute("name", "alice");
    
    12_element的属性和方法.png

    用一张图来总结DOM的用法

    13_DOM.png

    从浏览器架构角度去了解BOM和DOM就能更好的掌握,从而自如使用,以上就是BOM和DOM相关内容,关于js高级,还有很多需要开发者掌握的地方,可以看看我写的其他博文,持续更新中~

    相关文章

      网友评论

          本文标题:从浏览器架构认识BOM和DOM

          本文链接:https://www.haomeiwen.com/subject/jcufkrtx.html