乐趣区

关于前端:从浏览器架构认识BOM和DOM

jiezi

浏览器架构

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

BOM 包含 window、history、location、document …
DOM 包含 Document（整个文档）、Element（标签元素）、CharacterData（字符数据）、Attr（属性），这些元素又能够持续往下划分。

其中 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__);

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);

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

作为浏览器的窗口对象承当着十分多的性能

  • 蕴含大量的属性，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 事件");
};

location

location 中有大量对于 url 的信息，罕用的是这些

  • hash：锚点，url 上 #号前面的内容，能够用于页面中定位
  • host：主机 + 端口号
  • hostname：主机
  • href：残缺 url 链接
  • pathname：门路
  • port：端口号
  • protocol：协定

在管制台上间接输出 location，能够获取到 location 对象的信息

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);
});

用一张图来总结 BOM 的用法

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 只有文本类型的数据有。

document

document 是 Document 的实例对象，代表整个 html 页面，当页面被浏览器解析实现，就会创立一个 document 对象。

document 中有十分多的标签，当咱们创立一个 html 页面时，至多会有以下内容。

所以它的属性和办法都和标签元素无关

  • body：获取 body 标签
  • title：获取文档题目
  • head：获取 head 标签
  • children：获取所有子元素，HTMLCollection
  • location：和 window.location 一样，拿到的是 url 信息

罕用办法包含了创立、删除、获取元素

  • 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>

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");

用一张图来总结 DOM 的用法

从浏览器架构角度去理解 BOM 和 DOM 就能更好的把握，从而自若应用，以上就是 BOM 和 DOM 相干内容，对于 js 高级，还有很多须要开发者把握的中央，能够看看我写的其余博文，继续更新中~

退出移动版