DOM初识

web api概述

标准库：ECMAScript中的对象和函数

Web Api：浏览器宿主环境中的对象和函数

1. 知识繁杂
2. 成体系的知识
3. 程序思维：知识+程序思维 = 应用
4. 兼容性：了解，不记忆

Web Api：

• BOM：Browser Object Model，浏览器对象模型
• DOM：Document Object Model，文档对象模型

BOM：控制浏览器本身
DOM：控制HTML文档

ES 由 ECMAScript 规定的
WebApi 由 W3C（万维网联盟） 制定

关于DOM

• DOM 0
• DOM 1
• DOM 2
• DOM 3
• DOM 4 2015年

DOM是什么

DOM的核心理念，是将一个HTML或XML文档，用对象模型表示，每个对象称之为dom对象

dom对象又称之为节点Node

节点的类型：

• DocumentType，文档类型节点
• Document，文档节点，表示整个文档
• Comment，注释节点
• Element，元素节点
• Text，文本节点
• Attribute，属性节点
• DocumentFragment，文档片段节点

dom树：文档中不同的节点形成的树形结构。

获取dom节点

获取dom对象

全局对象 window 中有属性document，代表的是整个文档节点

旧的获取元素节点的方式

dom 0

• document.body：获取body元素节点
• document.head：获取head元素节点
• document.links：获取页面上所有的超链接元素节点，类数组
• document.anchors：获取页面上所有的锚链接(具有name属性)元素节点
• document.forms：获取页面中所有的form元素节点

新的获取元素节点的方式

通过方法获取

• document.getElementById：通过id获取对应id的元素
• document.getElementsByTagName: 通过元素名称获取元素
• document.getElementsByClassName：通过元素的类样式获取元素，IE9以下无效
• document.getElementsByName：通过元素的name属性值获取元素
• document.querySelector：通过CSS选择器获取元素，得到匹配的第一个，IE8以下无效
• document.querySelectorAll：通过CSS选择器获取元素，得到所有匹配的结果，IE8以下无效
• document.documentElement: 获取根元素

细节：

1. 在所有的得到类数组的方法中，除了querySelectorAll，其他的方法都是实时更新的。
2. getElementById 得到元素执行效率最高。
3. 书写了id的元素，会自动成为window对象的属性。它是一个实时的单对象。事实上的标准。不推荐使用。
4. getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll，可以作为其他元素节点对象的方法使用

根据节点关系获取节点

• parentNode：获取父节点（元素、文档）
• previousSibling：获取上一个兄弟节点
• nextSibling：获取下一个兄弟节点
• childNodes：获取所有的子节点
• firstChild：获取第一个子节点
• lastChild：获取最后一个子节点
• attributes: 获取某个元素的属性节点

获取元素节点

• parentElement：获取父元素
• previousElementSibling：获取上一个兄弟元素
• nextElementSibling：获取下一个兄弟元素
• children：获取子元素
• firstElementChild：获取第一个子元素
• lastElementChild：获取最后一个子元素

获取节点信息

• nodeName：获取节点名称
• nodeValue：获取节点的值
• nodeType：节点类型，是一个数字