寒假集训——九
寒假集训
- 八十四、DOM
-
- 1.获取一个元素
-
- （1）getElementByld
- （2）getElementsByClassName
- （3）getElementsByTagName
- （4）querySelector
- （5）querySelectorAll
- 2.操作元素文本内容
- 3.操作元素样式
- 4.操作元素类名
- 5.DOM节点
-
- （1）元素节点
- （2）属性节点
- （3）文本节点
- （4）注释节点
- （5）Document
- （6）html
- 6.获取节点
- 7.操作DOM节点
- 8.节点属性
- 9.获取元素尺寸
- 10.获取元素偏移量
- 11.初识事件
- 12.常见的事件
- 13.事件对象
-
- 鼠标事件
- 14.事件的传播
- 15.阻止事件传播
- 16.阻止默认行为
- 17.事件委托
八十四、DOM
- DOM (Document Object Model) :文档对象模型
- 其实就是操作html中的标签的一些能力
- 我们可以操作哪些内容
获取一个元素
移除一个元素
创建一个元素
向页面里面添加一个元素
给元素绑定一些事件
获取元素的属性
给元素添加一些css样式
… - DOM的核心对象就是document对象
- document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
- DOM: 页面中的标签,我们通过js获取到以后，就把这个对象叫做DOM对象
1.获取一个元素
- 通过js代码来获取页面中的标签
- 获取到以后我们就可以操作这些标签了
（1）getElementByld
- getElementById是通过标签的id名称来获取标签的
- 因为在一个页面中id是唯一的， 所以获取到的就是一个元素
获取到的就是页面中的那个id为box的div标签
<body>
<div id="box">div>
<script>
var box = document . getElementById('box')console. log(box) //
script>
body>
（2）getElementsByClassName
（3）getElementsByTagName
（4）querySelector
返回一个对象
（5）querySelectorAll
2.操作元素文本内容
innerHTML
innerText
value
3.操作元素样式
style
- 只能行内样式方法
- 读写
getComputedStyle
- 内部样式，外部样式，行内
- 获取，不能赋值写样式
- 标准
currentStyle
- ie 低版本
4.操作元素类名
.className
classList属性
toggle
- 切换
5.DOM节点
- DOM 的节点我们一般分为常用的三大类元素节点/文本节点/属性节点
- 什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点(标签节点)
- 比如我们标签里面写的文字，那么就是文本节点
- 写在每一个标签上的属性，就是属性节点
（1）元素节点
- 我们通过getElementBy…获取到的都是元素节点
- head / body / div / ul / …
我们都是普通的元素节点
只是所处的位置不一样
各自的功能不一样
我们都可能是父元素
也有可能是子元素
我们都叫元素节点
（2）属性节点
- 我们通过getAttribute获取的就是元素的属性节点
- 元素属性
我是一个元素身上的属性
我也是一个节点
用来描述和修饰这个元素
很多元素上都有我
我叫做属性节点
（3）文本节点
- 我们通过innerText获取到的就是元素的文本节点
- 文本内容
我是一段文本包含换行和空格
我也是一个节点
很多标签里面都包含我
我叫做文本节点
（4）注释节点
注释内容
我是一段注释
我也是一个节点
我是单独书写的，不会显示在页面
我叫做注释节点
（5）Document
我是一个页面最大的节点
但是我不是一个元素节点
我只是一个作为承载使用的节点
我叫做根节点
（6）html
我是一个页面最大的元素节点
我包含着页面所有的元素节点
我是最大的元素节点
我叫根元素节点
6.获取节点
- childNodes：获取某一个节点下所有的子一级节点
- children：所有元素
- firstChild
- firstElementChild
- lastChild
- lastElementChild
- previousSibling
- previousElementSibling
- nextSibling
- nextElementSibling
- parentNode
- parentElement
7.操作DOM节点
- 我们所说的操作无非就是增删改查(CRUD)
- 创建一个节点(因为向页面中增加之前，我们需要先创建一个节点出来)
- 向页面中增加一个节点
- 删除页面中的某一个节点
- 修改页面中的某一个节点
- 获取页面中的某一个节点
创建一个节点
- createElement: 用于创建一个元素节点
创建出来的就是一个可以使用的div元素
//创建一个div元素节点
var oDiv = document . createElement(' div')
console. log(oDiv) //
- createTextNode: 用于创建一个文本节点
插入节点
- appendChild
- insertBefore(要插入的节点,谁的节点)
删除节点(节点对象)
- remove：删除自己以及后代
替换节点
- replaceChild(新的节点,老的节点)
克隆节点
- cloneNode()
- false不克隆后代
true克隆后代
8.节点属性
- 我们已经知道节点会分成很多种，而且我们也能获取到各种不同的节点
- 接下来我们就来聊一些各种节点之间属性的区别
- 我们先准备一段代码
<body>
<ul test="我是 u1的一个属性">
<li>helloli>
ul>
<script>
//先获取ul
var oUl = document . querySelector('ul')
//获取到ul下的第一个子元素节点，是一个元素节点
var eleNode = oUl. firstElementchild
//获取到ul的属性节点组合，因为是个组合，我们要拿到节点的话要用索引
var attrNode = oUl. attributes[0]
//获取到ul下的第一个子节点，是一个文本节点
var textNode = oUl. firstChild
script>
body>
nodeType
- nodeType: 获取节点的节点类型，用数字表示
nodeType= 1就表示该节点是一个元素节点
nodeType= 2就表示该节点是一个属性节点
nodeType= 3就表示该节点是一个注释节点
console. log(eleNode. nodeType) // 1
console. log(attrNode . nodeType) // 2
console. log(textNode . nodeType) // 3
nodeName
- nodeName: 获取节点的节点名称
元素节点的nodeName就是大写标签名
属性节点的nodeName就是属性名
文本节点的nodeName 都是**#text**
console.log(eleNode . nodeName) // LI
console.log(attrNode . nodeName) // test
console.log(textNode. nodeName) // #text
nodeValue
- nodevalue: 获取节点的值
元素节点没有nodevalue
属性节点的nodevalue就是属性值
文本节点的nodevalue 就是文本内容
console. log(eleNode. nodevalue) // null
console. log(attrNode . nodevalue) //我是ul的一个属性
console. log(textNode . nodevaTue) //换行+空格
汇总
| - | nodeType | nodeName | nodeValue |
|---|---|---|---|
| 元素节点 | 1 | 大写标签名 | null |
| 属性节点 | 2 | 属性名 | 属性值 |
| 文本节点 | 3 | #text | 文本内容 |
9.获取元素尺寸
- 就是获取元素的"占地面积"
offsetWidth 和offsetHeight
- offsetwidth :获取的是元素 内容+ padding + border的宽度
- offsetHeight :获取的是元素内容+ padding + border的高度
clientWidth和clientHeight
- clientwidth :获取的是元素内容+ padding的宽度
- clientHeight :获取的是元素内容+ padding的高度
注意:
- 获取到的尺寸是没有单位的数字
- 当元素在页面中不占位置的时候，获取到的是0
- display: none;拿不到值
10.获取元素偏移量
offsetLeft和offsetTop
clientLeft和clientTop
- 注：
参考点：是定位父级
如果父级元素都没有定位，偏移量相对于body
11.初识事件
- 一个事件由什么东西组成
触发谁的事件:事件源
触发什么事件:事件类型
触发以后做什么:事件处理函数
var oDiv = document . queryselector('div')
oDiv. onclick = function () {}
//谁来触发事件=> oDiv =>这个事件的事件源就是oDiv
//触发什么事件=> onclick =>这个事件类型就是click
//触发之后做什么=> function () {} =>这个事件的处理函数
- 我们想要在点击div以后做什么事情，就把我们要做的事情写在事件处理函数里面
var oDiv = document. queryselector(' div')
oDiv. onclick = function () {
console. log('你点击了div')
}
- 当我们点击div的时候，就会执行事件处理函数内部的代码
- 每点击一次，就会执行一次事件处理函数
- dom0 类型–后面会覆盖前面的 dom节点.οnclick=function(){}
- dom2 绑定多个事件处理函数 按照顺序执行 dom节点.addEventListener
dom2兼容性 ie6、7、8 dom节点.attachEvent - 事件解绑-dom0 dom节点.οnclick=null
- 事件解绑dom2
dom节点.removeEventListener
dom节点.detachEvent
12.常见的事件
- 我们在写页面的时候经常用到的一些事件
- 大致分为几类,浏览器事件/鼠标事件/键盘事件/表单事件/触摸事件
- 不需要都记住，但是大概要知道
浏览器事件
- load :页面全部资源加载完毕
- scroll :浏览器滚动的时候触发
- …
鼠标事件
- click :点击事件
- dblclick :双击事件
- contextmenu :右键单击事件
- mousedown :鼠标左键按下事件
- mouseup :鼠标左键抬起事件
- mousemove :鼠标移动
- mouseover :鼠标移入事件
- mouseout :鼠标移出事件
- mouseenter :鼠标移入事件
- mouseleave :鼠标移出事件
- …
键盘事件
- keyup :键盘抬起事件
- keydown: 键盘按下事件
- keypress :键盘按下再抬起事件
- …
表单事件
- change :表单内容改变事件
- input :表单内容输入事件
- submit : 表单提交事件
- reset：表单重置事件
- focus：获取焦点事件
- blur：失去焦点事件
- …
触摸事件
- touchstart :触摸开始事件
- touchend :触摸结束事件
- touchmove :触摸移动事件
- touchcancel
- …
13.事件对象
- 什么是事件对象?
- 就是当你触发了一个事件以后，对该事件的一些描述信息
- 例如:
你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
你触发一个键盘事件的时候，你按的是哪个按钮
… - 每一个事件都会有一个对应的对象来描述这些信息， 我们就把这个对象叫做事件对象
- 浏览器给了我们一个黑盒子,叫做window. event,就是对事件信息的所有描述
比如点击事件
你点在了0， 0位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
你点在了10， 10位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
…
oDiv. onclick = function () {
console.log(window.event.X轴坐标点信息)
console.log(window.event.Y轴坐标点信息)
}
- 这个玩意很好用，但是一般来说，好用的东西就会有兼容性问题
- 在IE低版本里面这个东西好用，但是在高版本IE和Chrome里面不好使了
- 我们就得用另一种方式来获取事件对象
鼠标事件
clientX clientY 距离浏览器可视窗口的左上角的坐标值
pageX pageY 距离页面文档流的左上角的坐标值
offsetX offsetY 距离触发元素的左上角的坐标值
14.事件的传播
- 当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件
- 就像上面的图片一样
- 点击在红色盒子上的时候，会触发红色盒子的点击事件
- 也是点击在了粉色的盒子上,也会触发粉色盒子的点击事件
- 也是点击在了body上,也会触发body的点击事件
- 也是点击在了html上，也会触发html的点击事件
15.阻止事件传播
event.stopPropagation
ie event.cancleBubble=true
16.阻止默认行为
dom0 ：return false
dom2 ：event.preventDefault()
ie ：event.returnValue=false
17.事件委托
- 就是把我要做的事情委托给别人来做
- 因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
- 所以我们就可以把子元素的事件委托给父元素来做
事件触发
- 点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件,那么就可以触发父元素的点击事件
像下面一段代码，当你点击ul的时候肯定会触发
但是当你点击li的时候，其实也会触发
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
<script>
var oUl = docuemnt. querySelector('ul')
oUl. addEventListener('click', function (e) {console. log('我是ul的点击事件，我被触发了')
script>
body>
target
- target 这个属性是事件对象里面的属性,表示你点击的目标
- 当你触发点击事件的时候，你点击在哪个元素上, target 就是哪个元素
- 这个target也不兼容,在IE下要使用srcElement
下面的代码，当你点击ul的时候，target 就是ul
当你点击在li上面的时候，target就是li
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
<script>
var oUl = docuemnt. querySelector('ul')
oUl. addEventListener('click', function (e) {
e = e||window. event
var target = e. target || e. srcElement
console. log(target)
})
script>
body>