DOM（文档对象模型）

具体细节参考：

https://www.runoob.com/jsref/dom-obj-document.html

（一）DOM节点

节点类型

在文档对象模型中，每一个元素都是节点。
1、文档节点（9）---文档是一个文档节点；
2、元素节点（1）---HTML元素都是元素节点；
3、属性节点（2）---HTML属性都是属性节点；
4、文本节点（3）---插入到HTML元素的文本都是文本节点；
5、注释节点（8）---注释是注释节点；

节点方法

document.createTextNode()	 创建文本节点
元素.appendChild()		   末尾添加新节点
元素.insertBefore(新，原)	 在已有节点前插入新节点
元素.removeChild()	       移除其子节点
元素.remove()		    	  移除自身
元素.replaceChild(新，旧)	替换子节点

节点属性

（如果没有子节点，则返回null）
element.childNodes		元素的所有子节点
element.parentNode		某节点的父节点
element.ownerDocument	某元素的根元素
element.firstChild		第一个子节点
element.lastChild		最后一个子节点
element.preiousSibling	元素的前一个兄弟节点
element.nextSibling		元素的后一个兄弟节点
// 节点元素查找
element.children			    所有子元素
element.firstElementChild		第一个子元素节点
element.lastElementChild 		最后一个子元素节点
element.previousElementSibling	前一个兄弟节点
element.nextElementSibling		后一个兄弟节点
// 拷贝
element.cloneNode(boolean) : 复制一个节点
	true：深复制，复制节点及其整个子节点树
	false : 浅复制，只复制节点本身。默认是false
	cloneNode() 方法 拷贝所有属性和值

（二）文档对象

获取DOM

document.body	返回body元素
// 获取一个
document.getElementById("id名");
document.querySelector("选择器");
// 获取多个
document.querySelectorAll("选择器");
document.getElementsByClassName("class名");
document.getElementsByTagName("标签名");
document.getElementsByName("name名");
---多个DOM返回是一个集合，HTMLCollection，是数组形式
  (用下标访问，如lis[i]，但不能用数组方法直接进行操作)

其他

document.write（）	// HTML表达式或JavaScript代码
document.writeIn（）// 同上，且多在末尾添加一个换行符
document.createElement() 	//创建元素节点
document.createTextNode()	// 创建文本节点
document.domain()			// 当前文档的域名
...

（三）元素对象

元素类名

element.classList()	// 返回元素类名；
element.className()	// 设置或者返回元素class属性
element.classList.add()	//添加一个或多个元素类名
element.classList.remove()	//移除一个或多个元素类名
element.classList.contains() //判断指定元素类名是否存在
element.classList.item() // 类名在元素中的索引值
element.classList.toggle(class, true|false) //切换类名	
----（第一个参数为要在元素中移除的类名，并返回 false。 
如果该类名不存在则会在元素中添加类名，并返回 true。 
第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管类名是否存在。）

元素属性

element.getAttribute("属性")	// 获取元素某属性
element.setAttribute("属性")	// 设置元素某属性
element.removeAttribute("属性")	// 删除元素某属性
element.hasAttribute("属性")  // 判断元素是否有某属性
element.hasAttributes()		// 判断元素是否有属性

元素内容

element.innerHTML:  设置或获取对象标签内的HTML (不包含自身)
element.value:      设置或获取表单元素内容
element.innerText:  设置或获取元素内容
element.outerHTML:  设置或获取元素内容的HTML形式

元素样式

element.style.属性 = "属性值"；
element.style.cssText = "属性：属性值；属性：属性值"

元素宽高度

//获取元素的宽高度(包含内边距,边框)
element.offsetWidth
element.offsetHeight
//获取元素的宽高度(不含边框)
element.clientWidth
element.clientHeight
//距离浏览器的实际距离
element.offsetTop	//距离浏览器顶端的实际距离
element.offsetLeft	//距离浏览器左边的实际距离

（四）事件对象

鼠标事件

onclick			用户点击某个对象时调用的事件句柄
ondblclick 		双击
onmousedown		鼠标按下
onmouseup		鼠标松开
onmouseenter	移入(不包括子元素)
onmouseleave	移出(不包括子元素)
onmouseover		移入(包括子元素)
onmouseout		移出(包括子元素)
onmousemove		移动
oncontextmenu	右击

键盘事件

---两个"按下"返回keycode是不同的
onkeydown	按下(识别功能键；不区分输入内容大小写)
onkeypress	按下(不识别功能键；区分输入内容大小写)
onkeyup		松开

表单事件

onfocus		获取焦点
onblur		失去焦点
onchange	内容改变时触发(input、select、textarea)
oninput		元素获取用户输入时触发
onselect	用户选取文本时触发(input和textarea)
onreset		表单重置时触发
onsubmit	提交时触发

事件对象的属性和方法

event.type 获取事件类型
event.clientX/clientY  获取窗口位置
event.target || event.srcElement 用于获取触发事件的元素
event.preventDefault() 取消默认行为、阻止默认事件
event.stopPropagation();   阻止冒泡

（五）Console对象

console.log()	//信息
console.info()	//信息
console.error()	//错误信息
console.warn()	//警告信息
console.group()	// 信息分组
console.groupEnd()// 信息分组结束
console.time()// 计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间。
console.timeEnd()