1.1 根据ID来获取元素对象, document.getElementById()
a. 获取到, 返回元素对象
b. 获取不到, 返回 null
1.2 根据标签名获取对象
a. 从文档中获取, document.getElementsByTagName()
b. 从指定标签中获取 父元素对象.getElementsByTagName()
c. 返回值 获取时以伪数组方式的存储数据,
获取不到时返回空的伪数组
1.3 H5新增的方式[有兼容性问题]
a. 根据class来获取, getElementsByClassName()
b. 根据选择器来获取, querySelector(), 返回第一个对象
c. 根据选择器来获取, querySelectorAll(), 返回所有对象
d. 返回值 获取时以伪数组方式的存储数据
1.4 特殊元素对象的获取
a. 获取 body 元素, document.body
b. 获取 html 元素, document.documentElement
2.操作元素内容
2.1 获取内容
a. 元素对象.innerText [过滤html标签 \ 空格 \ 换行]
b. 元素对象.innerHTML[原封不动的获取标签中间的内容]
2.2修改内容
a. 元素对象.innerText = 新内容; [不识别html标签]
b. 元素对象.innerHTML= 新内容;[识别html标签]
3.操作元素属性
a. 获取属性
(1) 元素对象.属性名 (只能获取标签自带的属性)
(2)
b. 修改属性
元素对象.属性名 = 新值;
c. 表单元素的状态属性
例如 :
disabled \ checked , js中用 true 和 false 来设置其状态.
4.操作元素的样式
a. 元素对象.style.样式名 = 样式值;[样式少时用]
b. 通过修改class属性来设置 元素对象.className = 类名;[样式多时用]
生活中的事件 :
a. 时间
b. 人物
c. 事
网页中的事件 :
a. 标签(事件源对象)
b.用户对这个标签做了什么操作(事件类型)
c. 出现了什么特效(事件处理程序)
页面中的事件
1.当用户做了某个操作, 出现了相应的特效
2.事件三要素
a. 事件源对象(标签对象)
b. 事件类型(用户的操作)
c. 事件处理程序(函数, 特效代码)
3.常用的事件类型
a. 单机事件, onclick
b. 获得焦点事件, onfocus
c. 失去焦点事件, onblur
d. 鼠标移入事件, onmouseover
e. 鼠标移出事件, onmouseout
4.注册事件
元素对象.事件类型 = function() { // 特效代码;};
5.事件处理函数中的this
a. 事件处理函数中有一个关键字 this
b. this 代表事件源对象