共计 4779 个字符,预计需要花费 12 分钟才能阅读完成。
浏览器架构
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 高级,还有很多须要开发者把握的中央,能够看看我写的其余博文,继续更新中~