1.DOM节点操作
- 获取节点
1.1 直接获取
a）通过id值来获取节点：document.getElementById（id属性） - 返回的是标签对应的节点对象
补充：Html标签在js中全部都是对象，标签的属性就是对象的属性；双标签的内容对应是innerText和innerHTML属性innerHTML指向的是内容的文本和标签； innerText只指向内容中的文本
b) 通过class值获取节点: document.getElementsByClassName(class属性值) - 返回一个数组
c) 通过标签名获取节点: document.getElementsByTagName(标签名) - 返回一个数组
d)通过name属性获取节点(被淘汰)： document.getElementsByName(name属性值)
1.2 获取父节点
节点.parentElement - 获取指定节点对应的父节点
1.3 获取子节点
a)获取所有子节点: 节点.children - 获取自定节点所有的子节点(不会获取孙子节点)
b)获取第一个子节点: 节点.firstElementChild
c)获取最后一个子节点: 节点.lastElementChild - 创建节点
document.createElement(标签名) - 创建指定标签对象的节点对象
注意: 创建的节点在没有添加在网页中的时候是不会显示的
3.添加节点
节点1.appendChild(节点2) - 在节点1的最后添加节点2
节点1.insertBefore(节点2, 节点3) - 在节点1中的节点3前出入节点2 - 拷贝节点
节点.cloneNode() - 赋值指定节点，产生一个新的节点 - 删除节点
a)节点1.removeChild(节点2) - 删除节点1中的节点2
b)节点.remove() - 删除指定节点
2.DOM操作
- 什么是BOM
BOM(browser object model)浏览器对象模型
js自带一个window对象，指向当前浏览器；js中所有的全局变量都是绑定在window对象上的属性
在使用的时候，window可以省略 - window基本操作
open(url, name属性, 窗口大小 )
a）打开新的窗口: open(url) - 在新的窗口中打开新页面
b) 打开新的窗口, 同时设置窗口的宽度和高度
2)关闭窗口
窗口对象.close()
window.close() / close() - 关闭当前窗口
3)移动当前窗口
new_window2.moveTo(100, 100)
4)获取窗口的宽度和高度
innerWidth/innerHeight - 获取浏览器能够显示内容的部分的宽高
outerWidth/outerHeight - 整个浏览器的宽高 - 弹框
- 只有确定按钮再加提示信息的弹框
2)一个提示信息，再加确定和取消按钮；根据返回值是true还是false来判断选择是确定还是取消
3)一个提示信息，再加一个输入框和取消确定按钮；根据返回值是否是null来判断点击的是取消还是确定
3.定时事件
- 开启定时
1)setTimeout(函数, 定时时间, 实参列表) - 指定时间后调用指定函数，并且传入指定的参数; 返回一个定时器对象
函数 - 可以是匿名函数，也可以是普通函数的函数名
定时时间 - 单位是毫秒
实参列表 - 函数提供参数
2)setInterval(函数,定时时间，参数列表) - 每隔指定的时间调用一次函数
- 清除定时
clearTimeout(定时对象)
clearInterval(定时对象)
4.自动跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">5秒后自动跳转</p>
<script type="text/javascript">
time = 5
pNode = document.getElementById('p1')
t1 = setInterval(function(){
time--
if(time == 0){
open('https://www.baidu.com')
clearInterval(t1)
}
pNode.innerText = time+'秒后自动跳转'
}, 1000)
</script>
</body>
</html>
5.事件
js是事件驱动语言
- 事件三要素: 事件源、事件、事件驱动程序
事件源发送某个事件就做什么事情(事件驱动程序) - 事件的绑定
1） 在标签内部给标签的事件属性赋值
注意: 这种方式绑定的时候，this指向的是window
2）通过给节点对象的事件属性赋值来绑定
注意: 这种方式绑定的时候，this指向的是事件源
3）通过addEventListener方法进行绑定
a.语法
事件源节点.addEventListener(事件名称,事件驱动程序)
b.说明
事件名称 - 事件属性名去掉on
事件驱动程序 - 事件发生后需要调用的函数
c.注意
this是事件源
可以给同一个节点的同一个事件绑定不同的事件驱动程序
6.常见事件类型
- onload事件 - 页面加载完成对应的事件(标签加载成功)
- 鼠标事件
1）onclick - 鼠标点击事件
2）onmouseover - 鼠标悬停事件
3）onmouseout - 鼠标离开事件 - 键盘事件
键盘事件一般绑定在输入框对应的标签上
1）onkeypress - 按下弹起
2）onkeydown - 按键按下 、 onkeyup - 按键弹起 - 输入框事件
1）onchange - 输入框中的输入内容的时候按回车
2）oninput - 正在输入 - 事件对象
每个事件驱动程序中，都可以设置一个参数来表示当前事件对象。不同类型的事件对应事件类型和事件属性不同
1）鼠标事件对象
a）clientX/clientY - 鼠标的位置到浏览器左边和顶部的距离
b）offsetX/offsetY - 鼠标的位置到事件源标签左边和顶部的距离
2）键盘事件对象
key - 哪个按键被按下
