梳理一下脉络，重新认识一下JavaScript这门语言。
DOM 是Document、Object、Model（文档对象模型）
JavaScript通过ECMAScript编写程序让浏览器来解析，利用ECMAScript通过BOM(Browser Object Model)即浏览器对象模型，来操作浏览器窗口、浏览器导航对象、屏幕分辨率、浏览器历史、cookie等等。通过DOM操作HTML，赋予HTML行为。
是对HTML标签、属性、文本解析后存放在内存中的倒置的树
•树中的标签、属性、文本统称为节点（Node）
•标签称为元素节点（Element)
•属性称为属性节点(Atrribute)
•文本称为文本节点(Text)
•DOM的核心对象为document
节点的关系：父节点、子节点、兄弟节点、前兄弟节点、后兄弟节点、叶子节点、根节点
获取文档的根
document.getDocumentElement;//获取HTML元素
document.body;//获取body元素
•Document 对象是 Window 对象的一部分,每个载入浏览器的 HTML 文档都会成为 Document 对象
•Document 对象集合
| 集合 | 描述 |
| all[] | 提供对文档中所有HTML元素访问。 |
| anchors[] | 返回对文档中所有Anchor对象的引用。 |
| applets | 返回对文档对象所有Applet对象的引用。 |
| forms[] | 返回对文档中所有Form对象引用。 |
| images[] | 返回对文档中所有Image对象引用。 |
| links[] | 返回对文档中所有Area和Link对象引用。 |
document的常用属性
|
属性 |
描述 |
|
URL |
返回当前文档的 URL。 |
| body |
提供对 <body> 元素的直接访问。 对于定义了框架集的文档，该属性引用最外层的 <frameset>。 |
| documentElement | 返回html dom中的root 节点 即<html> |
| cookie | 设置或返回与当前文档有关的所有 cookie。 |
| domain | 返回当前文档的域名。 |
| lastModified | 返回文档被最后修改的日期和时间。 |
| referrer | 返回载入当前文档的文档的 URL。 |
| title | 返回当前文档的标题。 |
Document 对象方法
|
方法 |
描述 |
| close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 |
| getElementById() | 返回对拥有指定 id 的第一个元素的引用。 |
| getElementsByName() | 返回带有指定名称的元素集合。 |
| getElementsByTagName() | 返回带有指定标签名的元素集合。 |
| getElementsByClassName() | 返回带有指定类样式的元素集合。 |
| open() |
打开一个流，以收集来自任何 write() 或 writeln() 方法的输出。 新建文档，覆盖原来的文档内容 |
| write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
| writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 |
1、querySelector
根据选择器查找元素，返回单个元素，无论选择器找到的元素有多少，只会返回第一个匹配的元素，如果未找到匹配的元素，则返回null。
2、querySelectorAll
根据选择器查找元素，返回元素集合，无论选择器找到的元素有多少，都会返回元素集合（NodeList），如果未找到匹配的元素，则返回空集合。
Element对象
•Element代表页面中的标签元素，如<div><a>
•Element的尺寸属性
|
属性 |
描述 |
| element.offsetHeight | 返回元素的高度。 |
| element.offsetWidth | 返回元素的宽度。 |
| element.offsetLeft | 返回元素的水平偏移位置。 |
| element.offsetParent | 返回元素的偏移容器。 |
| element.offsetTop | 返回元素的垂直偏移位置。 |
| element.clientHeight | 返回元素的可见高度。 |
| element.clientWidth | 返回元素的可见宽度。 |
| element.scrollHeight | 返回元素的整体高度。 |
| element.scrollLeft | 返回元素左边缘与视图之间的距离。 |
| element.scrollTop | 返回元素上边缘与视图之间的距离。 |
| element.scrollWidth | 返回元素的整体宽度。 |
元素自身属性的操作
|
属性 / 方法 |
描述 |
| element.className | 设置或返回元素的 class 属性。 |
| element.cloneNode() | 克隆元素。 |
| element.id | 设置或返回元素的 id。 |
| element.innerHTML | 设置或返回元素的内容。 |
| element.nodeName | 返回元素的名称。可能是元素名，也可能是属性名 |
| element.nodeType | 返回元素的节点类型,1元素，2、属性，3、文本。 |
| element.nodeValue | 设置或返回元素值。元素节点没有此属性 |
| element.style | 设置或返回元素的 style 属性。 |
| element.tabIndex | 设置或返回元素的 tab 键控制次序。 |
| element.tagName | 返回元素的标签名。，只是元素 |
| element.textContent | 设置或返回节点及其后代的文本内容。 |
| element.title | 设置或返回元素的 title 属性。 |
Element对象
•属性的操作
|
属性 / 方法 |
描述 |
| element.attributes | 返回元素属性的 NamedNodeMap。 |
| element.getAttribute() | 返回元素节点的指定属性值。 |
| element.getAttributeNode() | 返回指定的属性节点。 |
| element.hasAttribute() | 如果元素拥有指定属性，则返回true，否则返回 false。 |
| element.hasAttributes() | 如果元素拥有属性，则返回 true，否则返回 false。 |
| element.setAttribute() | 把指定属性设置或更改为指定值。 |
| element.setAttributeNode() | 设置或更改指定属性节点。 |
•父及兄弟元素的操作
|
属性 |
描述 |
| element.nextSibling | 返回位于相同节点树层级的下一个节点。 |
| element.ownerDocument | 返回元素的根元素（文档对象）。 |
| element.parentNode | 返回元素的父节点。 |
| element.previousSibling | 返回位于相同节点树层级的前一个节点。 |
•子元素的操作
|
属性 |
描述 |
| element.childNodes | 返回元素子节点的 NodeList。 |
| element.firstChild | 返回元素的首个子节点 |
| element.getElementsByTagName() | 返回拥有指定标签名的所有子元素的集合。 |
| element.hasChildNodes() | 如果元素拥有子节点，则返回 true，否则 false。 |
| element.lastChild | 返回元素的最后一个子节点。 |
| element.appendChild() | 向元素添加新的子节点，作为最后一个子节点。 |
| element.insertBefore() | 在指定的已有的子节点之前插入新节点。 |
| element.removeChild() | 从元素中移除子节点。 |
| element.replaceChild() | 替换元素中的子节点。 |
| nodelist.item() | 返回 NodeList 中位于指定下标的节点。 |
| nodelist.length | 返回 NodeList 中的节点数。 |
创建新的元素
documet.createElement("div");
添加内容
innerHTML = ""
innerText = ""