【基础-6】DOM基础：文档对象模型

一、HTML DOM

========================================================================

1、简介

1.定义了访问和操作 HTML 文档的标准方法

2.W3C DOM 标准被分为3部分：
核心 DOM：针对任何结构化文档的标准模型
XML DOM：针对 XML 文档的标准模型
HTML DOM：针对 HTML 文档的标准模型

3.HTML DOM 是：
HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

2、节点分类：

父 parent
子 child
同胞 sibling
全部文档 document.documentElement
文档主体 document.body

3、节点属性：文本innerHTML、父parentNode、子childNodes、属性attributes

1.nodeType类型：1元素 2属性 3文本 8注释 9文档

2.nodeName属性：只读属性，取值
元素节点：标签名
属性节点：属性名
文本节点：#text
文档节点：#document

3.nodeValue属性：规定节点值，取值
元素节点：undefined、null
文本节点：文本
属性节点：属性值

4、节点方法

1.创建节点
元素：createElement()
文本：createTextNode()
属性：createAttribute()

2.插入新节点
头部：insertBefore()
尾部：appendChild()
替换：replaceChild()

3.删除节点：removeChild()

4.修改节点
HTML相关
输出流：write()
内容：innerHTML = 新的HTML
属性：attribute = 新属性

CSS相关：style.property = 新样式

5.查找节点
ID：getElementById()
标签名：getElementsByTagName()
类名：getElementsByClassName()
属性值：getAttribute()

6.属性值操作
返回：getAttribute()
修改：setAttribute()

5、事件

1.添加事件句柄
不要使用on前缀，事件类型、回调函数、冒泡还是捕获
addEventListener(type: DOMString, callback: EventListener, capture?: boolean)

移除：element.removeEventListener("mousemove", myFunction);

浏览器兼容

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

2.常用事件
进入：onload()
离开：onunload()
字段验证：onchange()
鼠标指针：onmouseover()、onmouseout()
鼠标点击：onmousedown()、onmouseup()、onclick()

6、集合 Collection对象

getElementsByTagName() ：返回 HTMLCollection 对象
length 属性：元素的数量
通过 name，id 或索引来获取

7、列表 NodeList对象

所有浏览器的 childNodes 属性返回的是 NodeList 对象
大部分浏览器的 querySelectorAll() 返回 NodeList 对象
只能通过索引来获取
length属性：元素的数量
包含属性节点和文本节点

二、HTML DOM 对象

========================================================================

1、Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象，Document是Window对象的一部分，
访问：window.document、详细

2、Element对象

HTML元素，NodeList 对象代表了节点列表，类似于 HTML元素的子节点集合，详细

3、Attribute对象

Attr对象
attr.isId：如果属性是 ID 类型，则 isId 属性返回 true，否则返回 false。
attr.name：返回属性名称
attr.value：设置或者返回属性值
attr.specified：如果属性被指定返回 true ，否则返回 false

NamedNodeMap对象
nodemap.getNamedItem()：从节点列表中返回的指定属性节点。
nodemap.item()：返回节点列表中处于指定索引号的节点。
nodemap.length：返回节点列表的节点数目。
nodemap.removeNamedItem()：删除指定属性节点
nodemap.setNamedItem()：设置指定属性节点(通过名称)

4、Event对象：事件的状态，参考

5、Console对象：访问浏览器调试模式的信息到控制台

assert()：false，输出错误信息
clear()：清除信息
count()：记录 count() 调用次数，一般用于计数
error()：输出错误信息
group()：信息分组一个完整的信息分组以 console.group() 开始，console.groupEnd() 结束
groupCollapsed()：在控制台创建一个信息分组类似 console.group() ，但它默认是折叠的
groupEnd()：设置当前信息分组结束
info()：输出一条信息
log()：输出一条信息
table()：以表格形式显示数据
time()：计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间
timeEnd()：计时结束
trace()：显示当前执行的代码在堆栈中的调用路径
warn()：输出警告信息，信息最前面加一个黄色三角，表示警告

6、CSSStyleDeclaration：样式声明对象

对象属性
cssText：声明文本，cssText 对应的是 HTML 元素的 style 属性
length：多少条声明
parentRule：当前规则的规则

对象方法
getPropertyPriority()：是否设置了 "important!"属性
getPropertyValue()：指定的CSS属性值
item()：索引返回CSS属性名
removeProperty()：移除CSS 属性
setProperty()：在CSS声明块中新建或者修改CSS属性

7、HTMLCollection：HTML元素的集合，类似包含HTML元素的数组列表

item()：指定索引的元素
length：元素的数量
namedItem()：指定ID或name属性的元素

三、HTML DOM 元素对象

========================================================================
平时常用的每个对象的属性和方法，参考