分享人：杨雨辰
目录
1.什么是DOM
2.DOM节点
3.常见的DOM属性
4.访问元素的方法
5.修改元素的方法
6.DOM事件
7.参考文献
8.更多讨论
DOM 是 Document Object Model（文档对象模型）的缩写。
它代表着加载到浏览器窗口的当前网页，我们可以通过js去读取它的信息
DOM把一份文档表示为一棵树，或者说是一颗族谱树，每个元素之间复杂的关系都能简明的表示出来
在现实世界中事物都由原子组成，原子又由亚原子微粒组成，DOM也是同样的情况，文档是由节点构成的集合
整个文档是一个文档节点
每个HTML元素是元素节点
每个元素内的文本是文本节点
每个元素的属性是属性节点
注释是注释节点
nodeName 属性
nodeName 属性规定节点的名称
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
nodeValue 属性
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
nodeType属性
nodeType属性共有12种值可以取值，但其中仅有3种具有实用价值
元素节点：1
属性节点：2
文本节点：3
4.获取元素的方法
getElementById() 方法
getElementsByTagName() 方法
getElementsByClassName() 方法
object.getAtrribute('atr')
object.setAtrribute('atr','value')
改变 HTML 内容
document.getElementById("p1").innerHTML="New text!";
改变 CSS 样式
document.getElementById("p2").style.color="blue";
追加子元素的方法
appendChild()
删除 HTML 元素
removeChild()
替换 HTML 元素
replaceChild()
实例
允许 JavaScript 对 HTML 事件作出反应
onclick 事件——当用户点击时
oninput 事件在用户输入时触发。
onblur 事件失去焦点时触发
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起
《DOM编程艺术第二版》
在使用dom的时候可以一直采用document.getElementById("p1")这样的写法来写完代码
也可以把这个节点存到变量里，然后用变量代替上面那串，第二种写法相对第一种的优点
感谢大家观看
BY : 杨雨辰