DOM
1、DOM介绍
文档对象模型
像操作对象那样，去操作页面（结构、样式、内容）。
DOM树（文档树），把整个页面当做是一个文档对象document。
2、操作元素
1）获取元素对象
①根据ID来获取元素对象，document.getElementById(' ')，
获取到，返回元素对象；获取不到，返回null
②根据标签名来获取元素对象
⑴从文档中获取，document.getElementsByTagName(' ')，
⑵从指定标签中获取，父元素对象.getElementsByTagName(' ')
获取到，返回伪数组；获取不到，返回空的伪数组
③H5新增的方式 【有兼容性问题】
⑴根据class来获取，getElementsByClassName(' ')
获取到，返回伪数组；获取不到，返回空的伪数组
⑵根据选择器来获取，querySelector(' ')，返回第一个对象
获取到，返回元素对象；获取不到，返回null
⑶根据选择器来获取，querySelectorAll(' ')，返回所有的对象
获取到，返回伪数组；获取不到，返回空的伪数组
④特殊元素对象的获取
2）操作元素内容
①获取内容
⑴元素对象.innerText 【过滤html标签、空格、换行。】
⑵元素对象.innerHTML，【原封不动的获取标签中间的内容。】
②修改内容
⑴元素对象.innerText = 新内容; 【不识别html标签】
⑵元素对象.innerHTML = 新内容; 【识别html标签】
3）操作元素属性
①获取属性
元素对象.属性名
②修改属性
元素对象.属性名 = 新值；
③表单元素的状态属性【例如：disabled、checked】，js中用true和false来设置其状态。
4）操作元素的样式
①元素对象.style.样式名 = 样式值;【样式少时用】
②通过修改class属性来设置
元素对象.className = 类名;【样式多时用】
如果想要保留原先的类名，我们可以这么做 多类名选择器
如：this.className = 'first change';
3、事件：用户做了某个操作，出现了相应的特效
1）三要素：事件源对象（标签对象）
事件类型（用户的操作）
事件处理程序（函数，特效代码）
2）常用的事件类型
单击事件 onclick
获得焦点事件 onfocus
失去焦点事件 onblur
鼠标移入事件 onmouseover
鼠标移出事件 onmouseout
鼠标移动触发 onsmouseup
鼠标按下触发 onmousedown
3）注册事件
元素对象.事件类型 = function(){
// 特效代码
}
4）事件处理函数中的this
①事件处理函数中有1个关键字 this
②this代表事件源对象 |
|
收藏
淘帖
踩
