版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Uncle_nly/article/details/79595031
javascript DOM
DOM
- a)定义
Document Object Model（文档对象模型） - b)Document
文档，当前html整个页面的内容 - c)Object
对象，把当前文档中的一些标签转化为js对象来进行操作
i.对象都是从文档中来的,Document中有对象转换方法
(1)getElementById：根据标签ID来获取指定元素对象（单数对象）
(2)getElementsByName：根据标签name属性来获取指定元素对象集合（复数对象）
(3)getElementsByTagName：根据标签名来获取指定元素对象集合（复数对象）
(4)getElementsByClassName：根据类名class来获取指定元素对象集合（复数对象）HTML5推出
(5)querySelector：根据选择器来获取指定的元素对象（单数对象）HTML5推出
(6)querySelectorAll：根据选择器来获取指定元素对象集合（复数对象）HTML5推出 - c)Model
模型，当前文档结构的节点关系元素节点 属性节点 文本节点 注释节点 文档节点 节点名称：nodeName 标签名称 属性名称 #Text #comment #document 节点值：nodeValue 不可用 属性值 文本内容 注释内容 不可用 节点类型：nodeType 1 2 3 8 9
DOM能够改变页面中的所有 HTML 元素和属性
- a)创建元素节点对象：document.createElement
i.追加子节点：对象.appendChild(插入的节点对象), 插到字节点的最后
ii.删除子节点：父对象.removeChild(删除的节点对象);
iii.(找要删除的子元素，然后使用其 parentNode 属性来找到父元素) - b)插入内容的时候
i.innerText: 插入内容的时候，如果有标签，则会当做文本插入
ii.innerHTML:插入内容的时候，会解析插入内容中带有标签 - c)获取内容的时候：
i.innerText: 只获取当前对象内容的文本值
ii.innerHTML:获取当前对象内容的所有（标签+格式） - d)改变页面中的所有 HTML的属性
i.格式：dom.属性名
DOM能够改变页面中的所有 CSS 样式
- a)格式：dom.style.样式名
- b)注意：css中所有的中横线全部取出，后面单词首字母大写
- c)通过增加和删除class选择类的方式实现样式操作
DOM能够对页面中的所有事件做出反应
- a)定义：对于当前某些元素，相应响应操作（页面加载关闭、鼠标事件、键盘事件）
- b)js中所有的事件属性都是以on开头
- c)事件如何绑定
i.直接在标签元素内部，写上事件名称，并附上函数即可ii.通过js对象属性赋值方式，给事件赋值函数，进行事件绑定iii.通过script标签for属性和event属性方式来进行事件绑定
- d)页面加载事件
i.onload：页面加载完毕后执行的事件（当前文档内容、当前所有的外部素材）
ii.onunload:关闭页面之后进行执行（进入下一个页面之前：下一个页面数据请求完毕）
iii.onbeforeunload:关闭页面之前执行（当前页面消失之前，下一个页面请求数据之前） - e)鼠标事件
i.onclick 鼠标点击
ii.鼠标就进入和退出(1)带冒泡效果：onmouseover/ onmouseout
iii.onmousedown(鼠标按下)、 onmouseup(鼠标释放)、 onmousemove(鼠标移动)
(2)不带冒泡效果：onmouseenter/ onmouseleave
iv.onforce(焦点获取)、onblur(焦点失去)、onchange(内容改变)、onsubmit(表单提交) - f)Event事件对象
i.EvsrcElement属性：获取事件源对象
ii.几个坐标属性(1)clientX、clientY：相对于浏览器边界鼠标xy偏移量
(2)screenX、screenY：相对于屏幕鼠标xy偏移量
(3)pageX、pageY：相对于当前页面鼠标xy偏移量（涉及页面滚动）
(4)offsetX、offsetY：相对于当前事件容器组件内部(content)的xy偏移量(不包括border，包括padding)