JavaScript DOM 基础

DOM 的含义

1. DOM 即 document object model，文档对象模型

2. JavaScript 中有三类对象

   本地对象 Native Object

   Object Function String Number Boolean
   Error EvalError SyntaxError TypeError RageError ReferenceError URIError
   Date RegExp
   复制代码

   内置对象 Built-in Object

   Global: 一类对象的统称，是虚拟的，代表全局
   任何方法和属性都在对象之下
   如 isNaN()、parseInt、Number()、decodeURL() 等都是 Global 下的方法
   如 Math、Infinity、NaN、undefined 等都是 Global 下的属性
   本地对象、内置对象是 ECMAScript 的内部对象
   复制代码

   宿主对象 Host Object

   执行 JS 的环境提供的对象，即浏览器对象
   window 对象 -> BOM，不同浏览器间没有固定规范
   document 对象 -> DOM，遵从 w3c 规范
   document 是 window 下的对象，即 BOM 包含 DOM
   复制代码

3. DOM 是通过浏览器提供的一套方法来操作 HTML 和 XML 文档

元素和节点

1. 节点包含元素，元素是节点的一部分，即元素节点

2. 节点分类

   元素节点、属性节点、文本节点、注释节点、文档节点等

3. 元素即元素对象，有 HTMLDivElement、HTMLInputElement、HTMLHtmlElement，继承自构造方法 HTMLElement，HTMLElement 继承自 Node，Node 即节点对象

4. document 继承自构造方法 HTMLDocument 的原型，HTMLDocument 继承自 Document 的原型

   document.__proto__ -> HTMLDocument.prototype 
   HTMLDocument.prototype.__proto__ -> Document.prototype
   复制代码

获取元素

1. 通过 id 获取元素

   document.getElementById(); // 返回对应的 HTMLElement 
   // 对于 getElementById()，IE8 及以下不区分大小写并且可以匹配 name
   复制代码

2. 通过类名获取元素集合

   兼容 IE9 及以上

   document.getElementsByClassName(); // 返回元素集合 HTMLCollection
   复制代码

3. 通过标签名获取元素集合

   document.getElementsByTagName(); // 返回元素集合 HTMLCollection
   复制代码

4. 通过 name 获取元素

   document.getElementsByName(); // 返回元素集合 HTMLCollection
   // 常用于表单元素
   复制代码

5. 通过选择器获取对象

   兼容 IE8 及以上，是 HTML5 新加入的 web api

   document.querySelector(); // 返回选择器选中的第一个节点对象 Node
   document.querySelectorAll(); // 返回选择器选中的节点列表 NodeList
   // querySelector、querySelectorAll 比 getElementById 等系列方法性能低
   复制代码

   querySelectorAll 方法返回 NodeList，getElements 系列方法返回 HTMLCollection

   前者是静态的，获取集合后，增加或删除内容，集合不改变，不具有实时性

   而 HTMLCollection 是动态的，随文档操作而改变

遍历节点树

1. parentNode

   获取父节点

   document.getElementsByTagName("html")[0].parentNode -> document
   // html 标签元素的 parentNode 是 document
   // 最高级节点是 document，document 的父节点是 null
   复制代码

2. childNodes

   获取子节点集合

   document.getElementById("box").childNodes 
   // 包括元素节点、文本节点、注释节点在内
   复制代码

3. firstChild、lastChild

   获取第一个或最后一个子节点

   document.getElementById("box").firstChild // 第一个子节点
   document.getElementById("box").lastChild // 第二个子节点
   复制代码

4. nextSibling、previousSibling

   获取上一个或下一个兄弟节点

   document.getElementById("box").nextSibling // 上一个兄弟节点
   document.getElementById("box").previousSibling // 下一个兄弟节点
   复制代码

5. getAttributeNode()

   获取属性节点

   document.getElementById("box").getAttributeNode("id") // 获取属性节点 id
   复制代码

遍历元素节点

1. parentElement

   获取父元素节点，兼容 IE9 及以上

   document.getElementsByTagName("html")[0].parentElement -> null
   // html 标签元素的 parentElement 是 null
   复制代码

2. children

   获取子元素集合，IE6-8 还包含注释节点，IE9 及以上只包含元素节点

   document.getElementById("box").children // 只包含元素节点
   document.getElementById("box").chilElementCount // children.length
   复制代码

3. firstElementChild、lastElementChild

   获取第或最后一个子元素节点，兼容 IE9 及以上

   document.getElementById("box").firstElementChild // 第一个子元素节点
   document.getElementById("box").lastElementChild // 第二个子元素节点
   复制代码

4. nextElementSibling、previousElementSibling

   获取下一个或上一个兄弟元素节点，兼容 IE9 及以上

   document.getElementById("box").nextElementSibling // 上一个兄弟元素节点
   document.getElementById("box").previousElementSibling // 下一个兄弟元素节点
   复制代码

节点的属性

1. nodeName

   返回节点名称、只读
   元素节点，元素名称大写

   document.getElementById("box").nodeName // DIV// 文本节点 -> #text// 注释节点 -> #commentdocument.nodeName // #document// 文档节点 -> #document
   复制代码

2. nodeValue

   返回节点内容，可读写
   属性节点、文本节点、注释节点可用

   document.getElementById("box").getAttributeNode('id').nodeValue // boxdocument.getElementById("box").getAttributeNode('id').value // 效果相同
   复制代码

3. nodeType

   返回节点类型对应数字，只读

   元素节点 1属性节点 2文本节点 3注释节点 8document 9DocumentFragment 11
   复制代码

   通过 nodeType 封装 childNodes，筛选出元素节点

   function childElementArray(node) {    var arr = [],        nodes = node.childNodes;    for (var i = 0; i < nodes.length; i++) {        var item = nodes[i];        if (item.nodeType === 1) {            arr.push(item);        }    }    return arr;}
   复制代码

4. attibutes

   返回元素节点的属性节点组成的类数组

   document.getElementById("box").attributes[0].nodeValue // 获取第一个属性节点的 nodeValue
   复制代码

5. hasChildNodes

   返回是否有子节点的布尔值

DOM 结构树