DOM对象结构图
一、Document 对象
理解： Document 对象是 HTML 文档的根节点，使我们可以对 HTML 页面中的所有元素进行访问。
😊 使用Document对象查找对象
| 属性/方法 | 作用 |
|---|---|
| getElementById ( ) | 通过节点的id属性，查找拥有指定 id 的第一个节点 |
| getElementsByName ( ) | 返回带有指定名称的对象集合 |
| getElementsByTagName ( ) | 返回带有指定标签名的对象集合 |
| getElementsByClassName ( ) | 返回文档中所有指定类名的元素集合，作为 NodeList 对象 |
| querySelector ( ) | 返回文档中匹配指定的CSS选择器的第一元素 |
| querySelectorAll ( ) | HTML5新特性，返回文档中匹配的CSS选择器的所有元素节点列表 |
😄 使用Document对象的方法创建节点
| 属性/方法 | 参数 | 作用 |
|---|---|---|
| createElement (nodename) | 元素的名称 | 创建元素节点 |
| createTextNode (text) | 文本节点的文本内容 | 创建文本节点 |
| createAttribute (attributeName) | 属性名称 | 创建一个属性节点 |
😀 其他常用
| 属性/方法 | 作用 |
|---|---|
| addEventListener ( ) | 事件监听 |
| removeEventListener ( ) | 移除事件监听 |
| cookie | 设置或返回与当前文档有关的所有 cookie |
| domain | 返回当前文档的域名 |
| referrer | 返回跳转进当前文档的文档的 URL（通常用来统计网站访客来源） |
| title | 返回当前文档的标题 |
| URL | 返回文档完整的URL |
补充知识：
document.body.scrollTop
作用： 获取滚动条高度（Chrome）
document.documentElement.scrollTop
作用： 获取滚动条高度（IE）
二、元素对象Element
理解： Element元素对象代表着一个 HTML 元素。
| 属性/方法 | 作用 |
|---|---|
| parentNode | 返回元素的父节点 |
| childNodes | 批量获取所有子节点（包括文本节点） |
| children | 批量获取所有元素节点（不包括文本节点） |
| firstElementChild | 返回元素的第一个子节点 |
| lastElementChild | 返回元素的最后一个子节点 |
| nextElementSibling | 返回指定元素之后的下一个兄弟节点 |
| previousElementSibling | 返回指定元素之前的上一个兄弟节点 |
| nodeType | 返回元素的节点类型（元素节点：1，属性节点：2，文本节点：3） |
| appendChild( 新节点 ) | 为元素添加一个新的子节点（ 在子节点最末端添加 ） |
| insertBefore( 新节点，参照节点 ) | 将新节点插入到参照节点之前 |
| removeChild( node ) | 删除指定的子节点 |
| remove( ) | 删除当前节点 |
| replaceChild( 新节点，旧节点 ) | 替换节点 |
| innerHTML | 返回元素的所有内容（ 包括HTML标签但是不包括自身标签 ） |
| innerText | 返回元素的内容（ 不包括HTML标签 ） |
| outerHTML | 返回元素的所有内容（ 包括HTML标签和自身标签 ） |
| offsetWidth | 返回元素的宽度，包括border和padding，不包含margin |
| offsetHeight | 返回元素的高度，包括border和padding，不包含margin |
| offsetLeft | 返回当前元素的相对水平偏移位置（不同浏览器有差别） |
| offsetTop | 返回当前元素的相对垂直偏移位置（不同浏览器有差别） |
| getAttribute( 属性名称 ) | 返回元素指定属性名称的属性值 |
| setAttribute( 属性名称，属性值) | 设置或者改变指定属性并指定值（可以通过此API设置自定义属性） |
| style | 设置或返回元素的样式属性 |
补充知识：
getComputedStyle( 类名 , false )[ 属性名 ]
作用： 读取非行内样式
类名 . style . 属性名 = 属性值
作用： 写非行内样式
三、属性对象Attr
理解： Attr 对象 代表一个 HTML 属性。
| 属性/方法 | 作用 |
|---|---|
| attr.isId | 如果属性是 ID 类型，则 isId 属性返回 true，否则返回 false |
| attr.name | 返回属性名称 |
| attr.value | 设置或者返回属性值 |
| attr.specified | 如果属性被指定返回 true ，否则返回 false |
| nodemap.getNamedItem() | 从节点列表中返回的指定属性节点 |
| nodemap.item() | 返回节点列表中处于指定索引号的节点 |
| nodemap.length | 返回节点列表的节点数目 |
| nodemap.removeNamedItem() | 删除指定属性节点 |
| nodemap.setNamedItem() | 设置指定属性节点(通过名称) |
四、事件对象
理解： 事件对象允许Javascript在HTML文档元素中注册不同事件处理程序。
😉 鼠标事件
| 属性 | 作用 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
| ondblclick | 当用户双击某个对象时调用的事件句柄 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseenter | 当鼠标指针移动到元素上时触发（内部已经阻止事件冒泡，不会触发父元素事件） |
| onmouseleave | 当鼠标指针移出元素时触发（内部已经阻止事件冒泡，不会触发父元素事件） |
| onmousemove | 鼠标被移动 |
| onmouseover | 鼠标移到某元素之上（会通过事件冒泡触发父元素事件） |
| onmouseout | 鼠标从某元素移开（会通过事件冒泡触发父元素事件） |
| onmouseup | 鼠标按键被松开 |
😋 键盘事件
| 属性 | 作用 |
|---|---|
| onkeydown | 某个键盘按键被按下 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup | 某个键盘按键被松开 |
😏 表单事件
| 属性 | 作用 |
|---|---|
| onblur | 元素失去焦点时触发 |
| onchange | 该事件在表单元素的内容改变时触发 |
| onfocus | 元素获取焦点时触发 |
| onfocusin | 元素即将获取焦点时触发 |
| onfocusout | 元素即将失去焦点时触发 |
| oninput | 元素获取用户输入时触发 |
| onreset | 表单重置时触发 |
| onsearch | 用户向搜索域输入文本时触发 ( <input="search">) |
| onselect | 用户选取文本时触发) |
| onsubmit | 表单提交时触发 |
五、Console对象
理解： Console 对象提供了访问浏览器调试模式的信息到控制台
注意： Console对象详解请查看：你不知道的Console
