概念（Document Object Model）

DOM 文档对象模型

DOM是用来与任意HTML或者XML交互的API文档

DOM用节点树的形式来表现文档，每个节点表示构成元素

DOM是WEB上使用最为广泛的API之一

简单来说，HTML DOM的作用就是定义了所有 HTML 元素的对象和属性，以及访问它们的方法。HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML DOM 节点

元素节点：标签节点

文本节点：标签之间的文本或者空文本或者注释节点

属性节点：标签里面的属性节点

HTML DOM Document 对象

document对象属性和方法

document.activeElement//返回当前获取焦点元素

document.addEventListener()//向文档添加句柄：事件监听

document.removeEventListener()//移除文档中的事件句柄：事件监听

document.body//返回当前文档的body元素

document.cookie//设置或者返回与当前文档有关的cookie 或 设置或返回当前域的cookie。

document.createAttribute()//创建一个属性节点

document.createElement()//创建一个元素节点

document.createTextNoode()//创建一个文本节点

document.createComment()//创建一个注释节点

document.documentElement//返回当前文档根节点

document.documentURI//设置或返回当前文档的位置

document.domain//返回当前的域名

document.forms//返回当前文档所有的form对象

document.getElementById()//通过id查找文档内元素节点 ，id唯一

document.getElementByClassName()//通过classname查找所有拥有该类名的元素，返回节点列表；

document.getElementByTagName()//通过标签名查找所有标签

document.getElementByName()//通过name查找含有该name的所有元素，返回节点列表

document.images//返回文档所有的image节点列表

document.querySelector()//返回文档中指定的css选择器的第一个元素括号可以放任何css选择器

document.querySelectorAll()//html5引入的新方法，返回文档中匹配css选择器的所有元素的节点列表

document.scripts//返回当前文档所有的脚本节点列表

document.title//返回当前文档的title

document.URL // 返回当前文档的完整URL

document.write()//向当前文档写html表达式或javascript代码

document.writeln()//向当前文档写表达式或javascript代码，在每个表达式之后写一个换行符

HTML DOM元素对象

元素的属性和方法（element）

element.addEventListener()//向指定元素添加事件句柄：监听事件

element.appendChild()//向指定元素末尾添加子元素    element指定元素

element.attributes//返回一个元素的属性数组

element.childNodes//返回元素的所有子节点元素（nodelist）

element.classList//返回元素的类名，作为DOMTokenList对象

element.className//返回元素的所有类名，类型是字符串 string

element.clientHeight  // 在页面上返回内容的可视高度（不包括边框，边距或滚动条）

element.clientWidth //在页面上返回内容的可视宽度（不包括边框，边距或滚动条）

element.cloneNode()//克隆element  参数为false的时候只克隆该元素，为true的时候连子元素一起克隆

element.focus() // 设置文档或元素获取焦点

element.getAttribute() // 返回指定元素的属性值

element.getAttributeNode() //返回指定元素的指定属性节点（exp：form action ----- action）

element.hasAttribute() // 如果元素中存在指定的属性返回 true，否则返回false。

element.nextSibling // 返回该元素后面的一个兄弟节点

element.nodeName // 返回元素的标签名（大写）

element.offsetHeight // 返回任何一个元素的高度包括边框和填充，但不是边距

element.offsetWidth // 返回元素的宽度，包括边框和填充，但不是边距 

element.parentNode // 返回元素的父节点

element.previousSibling // 返回该元素前面的一个兄弟节点 

element.querySelector()  //  返回匹配指定 CSS 选择器元素的第一个子元素

document.querySelectorAll() // 返回匹配指定 CSS 选择器元素的所有子元素节点列表

element.removeAttribute() // 从元素中删除指定的属性