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)