JavaScript篇.day08-DOM,节点,事件,定时器,位置及坐标
目录
1.DOM
2.DOM相关操作
(1)获取元素
(2)操作元素
(3)操作元素属性
(4)操作元素类名
(5)操作元素样式
3.节点操作
4.事件
5.事件传播
6.定时器
7.位置及坐标
1.DOM
- Document Object Model 文档对象模型
- 一整套操作文档流相关内容的属性和方法
- 可以做的操作: 修改样式 修改属性 改变位置 添加事件
2.DOM相关操作
(1)获取元素
- 通过id获取 document.getElementById('id名')
- 通过类名获取: document.getElementsByClassName('类名') 获取到是一个数组
- 通过标签类型获取: document.getElementsByTagName('标签名)
- 通过选择器获取: 一个: document.querySelector('选择器') 多个:querySelectorAll (获取到是一个数组)
(2)操作元素
- 文本内容(标签中的内容): innerText
- 超文本内容(包含标签): innerHTML
(3)操作元素属性
- 获取原生属性: e.g:可直接获取 id, 但name和class不可(保留字)
- 获取自定义属性: getAttribute('属性名')
- 设置自定义属性: setAttribute('属性名', '属性值')
- 移除自定义属性: removeAttribute('属性名')
- H5自定义属性(data-属性名)获取: dataset.属性名/ dataset['属性名'] 多个-连接使用小驼峰式命名规则取
(4)操作元素类名
- 修改: ele.className = '修改后类名'
- 移除: ele.className = ""
(5)操作元素样式
- 获取行内样式: ele.style.样式名 (小驼峰)
- 修改行内样式: ele.style.样式名 (小驼峰) = '修改后的值' (行内样式优先级最高)
- 获取非行内样式: window.getComputedStyle(ele).样式名(小驼峰)
<ul>
<li id="apple" class="qqqq">apple</li>
<li class="orange">orange1</li>
<li class="orange">orange2</li>
<li>pear</li>
<li id="peach" class="peach">peach</li>
</ul>
<ol >
<li class="oli">ollll</li>
</ol>
<div class="div1" style="background-color: antiquewhite;">div1</div>
<div id="divId2" class="divCls2" style="background-color: antiquewhite;">div2</div>
<div id="divId3" data-index="index3" data-list-name="divList" class="" style="background-color: antiquewhite;">div2</div>
<script>
/* DOM Document Object Model 文档对象模型
一整套操作文档流相关内容的属性和方法
可以做的操作: 修改样式 修改属性 改变位置 添加事件
*/
// DOM操作步骤
// 1. 获取元素
// (1)通过id获取, id唯一 document.getElementById('ID名')
var eleApple = document.getElementById('apple')
console.log(eleApple); //<li id="apple">...</li>
// (2)通过class类名获取, 可获取一类 document.getElementsByClassName('类名') 返回数组
var elesOrange = document.getElementsByClassName('orange')
console.log(elesOrange); //HTMLCollection(2) [li.orange, li.orange]zi
// (3)通过标签名获取 document.getElementsByTagName('标签') 返回数组
var elesLi = document.getElementsByTagName('li')
console.log(elesLi); //HTMLCollection(5) [li#apple, li.orange, li.orange, li, li, apple: li#apple]
// (4)通过选择器获取 获取到第一个document.querySelector('选择器') 获取到所有该选择元素document.querySelectorAll('选择器')
var elesSel = document.querySelector('li.orange')
console.log(elesSel);
var elesSelAll = document.querySelectorAll('ul li')
console.log(elesSelAll);
// 2. 操作元素
// (1) 操作文本内容(标签中文本内容) innerText
eleApple.innerText = '苹果'
// (2) 操作超文本内容(标签及文本内容)
var div1 = document.getElementsByClassName('div1')
div1[0].innerHTML = "<a href='#'>111div111</a>" //类名获取元素, 返回数组, 故div1[0]
// 3. 操作元素属性
// (1) 获取原生属性 可直接获取 id 但name和class不可
var div2 = document.getElementById('divId2')
console.log(div2.id); // divId2
// (2) 获取自定义属性 getAttribute('属性名')
console.log(div2.getAttribute('class')); //divCls2
// (3) 设置自定义属性 setAttribute('属性名', '属性值')
div2.setAttribute('class','div2222');
console.log(div2.className); //div2222
// (4) 移除自定义属性 removeAttribute('属性名')
div2.removeAttribute('class')
console.log(div2.className); // <empty string> 空字符串
// (5) H5新增 自定义属性 data-开头的属性名 dataset. / dataset[' '] ie11才开始支持
var div3 = document.getElementById('divId3')
console.log(div3.dataset.index); // index3
console.log(div3.dataset['index']); // index3
console.log(div3.dataset.listName); // divList 多个-连接的属性名, 获取时采用小驼峰式命名规则
// 4. 操作元素类名 className
var peach = document.getElementById('peach')
// (1) 修改元素类名
peach.className = 'peach_className'
// (2) 移除元素类名
peach.className = "" // 标签显示 class=""
// 5. 操作元素样式
// (1) 操作行内样式
// 获取样式
console.log(div2.style.backgroundColor); //antiquewhite
// 修改样式
console.log(div2.style.backgroundColor = 'blue'); //blue
// (2) 获取非行内样式
console.log(window.getComputedStyle(div2).fontSize); //20px
</script>3.节点操作
- 创建节点: createElement(' ')
- 追加节点: appendChild(ele)
- 添加至指定节点之前: 父.insertBefore('子')
- 移除子节点: removeChild(ele)
- 移除本节点: remove()
- 克隆节点: cloneNode() 默认false(只克隆该节点), true包含所有子节点
<ul>
<li>我是原生第1个li</li>
<li class="pre">我是原生第2个li------className:pre </li>
</ul>
<script>
var ulEle = document.querySelector('ul')
var preLi = document.getElementsByClassName('pre')[0]
// 操作节点
// 1. 创建节点 createElement
var li1 = document.createElement('li')
// 设置属性
li1.setAttribute('id','myLi')
li1.innerText = '我是创建的节点------myLi1---追加的'
// 2. 追加节点 appendChild()
ulEle.appendChild(li1)
// 3. 在某个节点的子节点前添加 insertBefore() 将一个节点添加到父节点的指定子节点前面
var li2 = document.createElement('li')
li2.innerText = '我是创建的节点------myLi2---添加到指定节点之前的'
ulEle.insertBefore(li2,ulEle.children[0])
// 5. 移除子节点 removeChild() remove()移除节点本身
ulEle.removeChild(li1)
li2.remove()
// 6. 克隆节点 cloneNode(true) true:所有子节点都克隆, false只克隆该节点本身,不可隆子节点
var ulEle2 = ulEle.cloneNode(true)
console.log(ulEle2);
</script>4.事件
事件: 用户触发指定行为(代码与页面内容的一个约定)
事件绑定三要素:
- 事件源(谁): 和谁绑定,
- 事件类型: 约定一个行为
- 事件处理函数: 触发行为时,执行的代码
语法:
- 方式1: 事件源上添加事件类型 <button οnclick="事件处理函数"></button>
- 方式2: 获取事件源后,再绑定事件 btn.on事件名 = function(){ }
- 方式3: 获取事件源后,再事件监听 btn.addEventLister('事件名', function(){ }, )
事件对象(e/event): 浏览器记录 , 当事件触发时, 一个描述该事件信息的对象数据类型
var btn = document.querySelector('button')
btn.addEventListener('click',clickMe(e))
function clickMe(e){
console.log(e);
}5.事件传播
三个阶段:
- 捕获阶段: 沿DOM树从上往下 e.g:window ->document-> html -> body -> div.father -> div.son -> btn
- 目标阶段: 目标盒子
- 冒泡阶段: 沿DOM树从下往上 e.g: btn -> div.son -> div.father -> body -> html -> document-> window
阻止冒泡: e.stopPropagation()
事件委托: e.target对象, 自身不做事件处理,交给父级来做
<div class="father">
<div class="son">
<button class="btn">点点点</button>
</div>
</div>
<script>
var father = document.querySelector('.father')
var son = document.querySelector('.son')
var btn = document.querySelector('.btn')
// 事件委托 将btn的工作委托给父级son
son.onclick = function(e){
e.stopPropagation() // 阻止冒泡, 否则点击btn会弹出father
if(e.target.className === 'btn'){
alert('btn1')
}
}
father.onclick = function(e){
alert('father')
}
</script>6.定时器
- setInterval(函数, 毫秒数) 每隔多少毫秒执行一次(重复执行)
- setTimeout(函数, 毫秒数) 隔多少秒后执行一次 (只执行一次)
- clearInterval(定时器) 清除定时器
window.setInterval(function(){
console.log('1');
},1000)
var time2 = window.setTimeout(function(){
console.log('2');
},2000)
// 清除定时器
window.clearInterval(time2)7.位置及坐标
<!-- div { margin: 400px; padding: 20px; width: 100px; height: 100px; border: 20px solid rgb(250, 131, 131); background-color: rgb(246, 186, 186); } -->
<div></div>
<script>
var div = document.querySelector('div')
// BOM中
// 获取可视区域宽/高 window.innerWidth / window.innerHeight
console.log(window.innerWidth)
console.log(window.innerHeight)
// 获取卷去的宽/高 document.documentElement.scrollTop || document.body.scrollTop
// DOM中
// 获取元素尺寸
// offsetHeight / offsetWidth (元素内容 + padding + border)相当于IE模型
console.log(div.offsetHeight) // 180
console.log(div.offsetWidth) // 180
// clientHeight / clientWidth (元素内容 + padding)
console.log(div.clientHeight) // 140
console.log(div.clientWidth) // 140
console.log(div.clientLeft) // 20 内容距离左边的尺寸
console.log(div.clientTop) // 20 内容距离上边的尺寸
// 事件对象内部信息
// 鼠标事件 e事件对象
div.onclick = function (e) {
// offsetX / offsetY 鼠标相对于触发事件元素的偏移量
console.log(e.offsetX)
// clientX / clientY 鼠标相对于浏览器可视窗口的偏移量 即使有滚动条,也是相对于可视窗口
console.log(e.clientX)
// pageX / pageY 鼠标相对于文档流的偏移量
console.log(e.pageX)
// screenX / screenY 鼠标相对于电脑屏幕的偏移量
console.log(e.screenX)
}PreviousNotes:
JS.2-DOM,事件高级_Mteee.的博客-CSDN博客