DOM是树状的数据结构
Document Object Model是一个js对象,数据结构为树型,是将HTML文件中的节点翻译成js对象,浏览器根据这个对象进行界面的渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
<style></style>
</head>
<body>
<h1>我是标题</h1>
<div class="test"></div>
<script src="xxx"></script>
</body>
</html>
节点类型
- 文档节点 例如(window.document) document对象
- 元素节点 element_node 例如
- 文本节点 就是上面的“我是标题”.
- 属性节点 class=“test” src="xxx"等
- document_fragment_node document.createDocumentFragment() 暂不要求
- document_type 可以用来区分html文档类型 暂不要求
在浏览器的控制台中执行以下代码
显示Node对象的属性
for(var key in window.Node){
console.log(key,' = '+Node[key]);
};
for(var p_key in Node.prototype)
{
console.log(key);//输入Node原型链上的公用方法
}
对象的继承关系如下(了解即可,完全不用记忆)
- Object < Node < Element < HTMLElement < (e.g., HTML*Element)
- Object < Node < Attr (this is deprecated in DOM4)
- Object < Node < CharacterData < Text
- Object < Node < Document < HTMLDocument
- Object < Node < DocumentFragment
var s=document.getElementsByTagName("html")[0];
console.log(s);
// 顺着s.__proto__ 属性,就可以找到它的继承链,以及对应对象上的属性和方法
// 返回一个数组,取第一个,就是<html></html>对应的DOM对象
详细的继承关系为 从上到下
-
Object js对象的相关操作
-
EventTarget(用于添加事件机制) 主要方法有 addEventListener() 添加事件监听 dispatchEvent() 分发事件 removeEventListener() 移除事件监听
-
Node (主要与节点在DOM树中的层级有关) 方法有 childNodes()子元素数组 contains() 包含关系 insertBefore() 在子元素的某一个元素前插入节点 firstChild() lastChild() parentNode() nodeName nodeType nodeValue 等等,详细属性用到时,直接查即可,不要求记忆
-
Element 元素的长宽高有(clientHeight clientWidth clientTop等等) getAttribute() 获取元素的属性 setAttribute() 设置元素的属性等等
-
HTMLElement 为offsetHeight等属性 onclick() onchange() ondrag()等大多数事件添加 set和get函数
-
HTMLHtmlElement click() blur() onclick() ondrag() focus() 等方法 id innerHTML innerText 等属性