获取文本对象的三种方式
- innerHTML
- innerText
- value 是专门给 输入框添加展示文本
- innerHTML/innerText
- innerHTML 认识字符串中的 标签, 能够将字符串中的标签转换成真正的标签进行渲染
- innerText 不认识字符串中的标签
- 推荐使用 innerText 能够防止用户注入恶意代码
事件冒泡
- 事件冒泡就是当给一个元素添加事件以后,在触发事件的时候,他的父元素有相同的事件也会触发
- 冒泡会从 点击的元素开始, 一直到页面最顶层的元素
- 哪怕你的元素没有绑定点击事件, 也会触发事件冒泡 冒泡是向上传导
事件委托
- 事件委托就是利用事件冒泡的原理
- 将所有子元素的一个事件(点击事件), 委托给共同的父级
DOM 尺寸
- offsetParent 获取元素相对于参考的父级
- offsetLeft / offsetTop 获取元素相对于参考父级的偏移量
- offsetWidth/ offsetHeight 获取元素可见框的宽高 (内容 + padding + border 的宽度)
- clientWidth 和 clientHeight 获取元素内容区宽高(内容 + padding 的宽度-)
- document.documentElement.clientWidth 浏览器视口的宽度
- document.documentElement.clientHeight 浏览器视口的高度
- document.documentElement.scrollLeft 滚动的宽度
- document.documentElement.scrollTop 滚动的高度
事件
- click 鼠标单击(左键)
- dblclick 鼠标双击
- contextmenu 右键单击
- mousedown 鼠标按下
- nouseup 鼠标抬起
- mousemove 鼠标移动
- mouseover 鼠标移入
- mouseout 鼠标移出
onscroll 滚动事件 onchange 切换事件