文档对象模型DOM

文档对象模型（Document Object Model）
通过DOM可以动态改变文档内容

动态改变文档内容的原理

• 1、解析文档（如HTML）并生成DOM
• 2、通过DOM标准接口+编程语言改变文档内容

输出内容

• document.write() 向文档中写入 数据
• document.writeln() 向文档写入数据并换行

选择器

• document.getElementById(id) 根据元素ID选中DOM元素
• document.getElementsByTagName() 返回带有指定标签名的对象集合
• document.getElementsByName() 返回带有指定名称的对象集合
• document.getElementsByClassName() 返回文档中所有指定类名的元素集合
• document.querySelector() 根据CSS选择器获取第一个匹配的元素
• document.querySelectorAll() 根据CSS选择器获取所有匹配元素的列表
• document.activeElement 返回当前获取焦点的元素

元素对象常见属性/方法

• innerText / textContent 获取/设置标签体文本内容
• innerHTML 获取/设置标签体网页内容
• attributes 获取元素的所有属性
• setAttribute(key, val) 设置属性
• getAttribute(key) 获取属性
• removeAttribute(key) 移除属性
• previousSibling/previousElementSibling 上一个紧邻兄弟元素
• nextSibling/nextElementSibling 下一个紧邻兄弟元素
• parentNode/parentElement/offsetParent 获取父级元素
• children/childNodes 获取子元素（https://www.jianshu.com/p/f6ff5ebe45fd）
• classname 设置类样式
• dataset 数据集合

元素对象位置属性

• offsetLeft/offsetTop 返回当前元素相对于父元素的左、右偏移量（包含margin）
• offsetWidth/offsetHeight 元素宽/高 （包含 边框、不包含margin）

• clientLeft/clientTop 左/上 边框宽度
• clientWidth/clientHeight 可见内容宽/高 （不含边框和滚动）包含padding
  (offsetHeight = clientHeight + 滚动条 + 边框)

• scrollLeft/srollTop 滚动条左边卷去的宽度 滚动条上方卷去的高度
• scrollWidth/scrollHeight 元素的滚动宽度/高度（包含隐藏部分）没有滚动条时 和 clientWidth/clentHeight相同
  

元素样式读写

• element.style 行内样式的操作
• element.className 动态修改类名实现