查元素
查一个元素用"document.querySelector(选择器')" 查数组元素用document.querySelectorALL(选择器')
两者区别
- document.querySelector得到dom对象,直接用dom语法
- document.querySelectorALL得到数组不能直接用dom语法,一定要通过下标取出里面的dom元素对象,才可以使用dom语法 查元素属性元素
-
innerText:获取文本
-
innerHTML:获取文本+标签 HTML属性
-
元素:属性名
-
改图片:img,src
-
改链接:a,herf
css属性
- 单个修改: 元素.style.样式名='样式值'
- 多个修改: 元素.ClassName='类名'
ClassList语法
- 新增元素 ClasList.add('类名')
- 移出元素 ClassList.remove('类名')
- 切换元素 ClassList.toggle('类名')
注意:css中很多'-'样式如 text- font- margin-...这个时候需要转小驼峰,去掉'-'然后'-'后面的首字母大写 表单属性
- 表单值(输入文本框)---元素:value
- 表单状态(布尔): 1.是否禁用:元素:disabled 1.是否选中:(radio和checkbox),元素:checked
- 是否选中(option),元素:selected
事件交互
事件交互三要素
- 事件源:什么元素
- 事件类型:什么时刻
- 事件处理函数 注册函数
- 事件源.事件类型=事件函数 例如: box.onclick=function(){}
- 事件源.addEventListener('事件类型 ,事件处理函数') 事件注意点 1.事件注册的时候不会执行(函数声明的时候也不会执行)
- 用户触发事件,浏览器捕捉交互,自动帮我们调用事件处理函数 鼠标事件
- 鼠标单击:onclick
- 鼠标双击:ondblclick
- 鼠标移入:onmouseenter
- 鼠标移出:onmouseleave
- 鼠标移动:onmousemove
