1. DOM
- DOM（Document Object Modle）：文本对象模型
1）document对象
- js会将整个网页转换成一个js对象叫document；如果想要通过js获取网页中的内容，必须通过document来获取（这个对象系统自动创建，程序员只需要使用）
2）document结构
- 是一个树结构，树下面就是各种节点（节点即Node，是js中Element对象，指向的是html中的标签）；Element对象有哪些属性，就看Element对应的标签有哪些html属性（节点相当于标签）
2. DOM节点操作
1）获取节点
1.1）直接获取
- 通过id值来获取节点：
document.getElementById(id属性值)：返回的是标签对应的节点对象 - 补充：HTML标签在js中全部都是对象，标签的属性就是对象的属性；双标签的内容对应是innerText和innerHTML属性：innerHTML指向的是内容的文本和标签； innerText只指向内容中的文本
我是段落
我是div
我是段落2
我是标题1
我是标题2
pNode = document.getElementById('p1')
console.log(pNode, typeof(pNode), pNode.id, pNode.innerHTML, pNode.innerText)
divNode = document.getElementById('div1')
console.log('html:',divNode.innerHTML, typeof(divNode.innerHTML))
console.log('text:', divNode.innerText)
- 通过class值获取节点：
document.getElementsByClassName(class属性值)：返回一个数组
c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray)
//根据下标获取元素
imgNode = c1NodeArray[1]
imgNode.title = '路飞'
- 通过标签名获取节点：
document.getElementsByTagName(标签名)：返回一个数组
pNodes = document.getElementsByTagName('p')
console.log(pNodes)
- 通过name属性获取节点
document.getElementsByName(name属性值)：已经被淘汰，不常用，与TagName相区分
1.2）获取父节点
- 节点.parentElement：获取指定节点对应的父节点
bodyNode = pNode.parentElement
console.log(bodyNode)
1.3）获取子节点
- 获取所有子节点：
节点.children：获取指定节点所有的子节点(不会获取孙子节点)
children1 = bodyNode.children
console.log(children1)
- 获取第一个子节点：
节点.firstElementChild
firstNode = bodyNode.firstElementChild
console.log(firstNode)
- 获取最后一个子节点：
节点.lastElementChild
lastNode = bodyNode.lastElementChild
console.log(lastNode)
2）创建节点
- document.createElement（标签名）：创建指定标签对象的节点对象
- 注意：创建的节点在没有添加在网页中的时候是不会显示的，并且只能使用一次，如果重复添加则只有最后一次有效
inputNode = document.createElement('input')
3）添加节点
- 节点1.appendChild（节点2）：在节点1的最后添加节点2
- 节点1.insertBefore（节点2，节点3）：在节点1中的节点3前插入节点2
div2Node = document.getElementById('div2')
// 节点1.appendChild(节点2) - 在节点1的最后添加节点2
div2Node.appendChild(inputNode)
// 节点1.insertBefore(节点2, 节点3) - 在节点1中的节点3前插入节点2
div2Node.insertBefore(inputNode, div2Node.firstElementChild)
4）拷贝节点
- 节点.cloneNode（）：复制指定节点，产生一个新的节点
inputNode2 = inputNode.cloneNode()
nputNode2.placeholder = '新节点'
div2Node.appendChild(inputNode2)
5）删除节点
- 节点1.removeChild（节点2）：删除节点1中的节点2
div2Node.removeChild(div2Node.firstElementChild)
- 节点.remove（）：删除指定节点
div2Node.remove()
3. BOM操作
1）什么是BOM
- BOM（Browser Object Modle）浏览器对象模型
- js自带一个window对象，指向当前浏览器；js中所有的全局变量都是绑定在window对象上的属性
- 在使用的时候，window可以省略
num = 10 // 相当于window.num = 10
console.log(window.num, num)
function func1(){
console.log('我是函数')
}
window.func1() // func1()
2）window基本操作
2.1）打开新的窗口
- open（url）：在新的窗口中打开新页面
new_window = window.open('https://www.baidu.com')
console.log(new_window)
- open（url，name属性，窗口大小）：打开新的窗口，同时设置窗口的宽度和高度，name默认空不用设置
new_window2 = open('https://www.baidu.com','','width=400,height=300')
2.2）关闭窗口
- 窗口对象.close（）
//关闭当前窗口
window.close() / close()
//关闭其他窗口
new_window2.close()
2.3）移动当前窗口
- 窗口对象.moveTo（）
new_window2.moveTo(100, 100)
2.4）获取窗口的宽度和高度
- innerWidth / innerHeight：获取浏览器能够显示内容的部分的宽高
console.log(new_window2.innerWidth, new_window2.innerHeight)
- outerWidth / outerHeight：获取整个浏览器的宽高
console.log(new_window2.outerWidth, new_window2.outerHeight)
3）弹框
- alert：只有确定按钮和提示信息的弹框
alert('提示信息!')
- confirm：一个提示信息、确定和取消按钮的弹框；根据返回值是true还是false来判断选择的是确定还是取消
result = confirm('是否删除?')
console.log(result)
- prompt：一个提示信息、一个输入框、确定和取消按钮的弹框；根据返回值是否是null来判断点击的是取消还是确定
result = prompt('提示信息','输入框中默认值')
console.log(result)
4）定时
4.1）开启定时
- setTimeout（函数，定时时间，实参列表）：指定时间后调用指定函数，并且传入指定的参数，返回一个定时器对象
- 函数：可以是匿名函数，也可以是普通函数的函数名
- 定时时间：单位是毫秒（1 毫秒 = 0.001 秒）
- 实参列表：给前面的函数提供参数（可以没有）
t1 = setTimeout(function(){
console.log('时间到！')
}, 1000)
t2 = setTimeout(function(name, age){
console.log(name, age)
}, 3000, '小明', 18)
//t1和t3的功能一样
function timeFunc(){
console.log('时间到了')
}
t3 = setTimeout(timeFunc, 1000)
- setInterval（函数，定时时间，参数列表）：每隔指定的时间调用一次函数
num = 1
t4 = setInterval(function(){
num ++
console.log('~~~~:',num)
if(num == 10){
clearInterval(t4)
}
}, 2000)
4.2）清除定时
- clearTimeout（定时对象）：clearTimeout(t2)
- clearInterval（定时对象）：clearInterval(t4)
- 练习：实现5s后自动跳转到百度页面
5秒后自动跳转
4. 事件
- js是事件驱动语言
1）事件三要素
- 事件源、事件、事件驱动程序
- 事件源发生某个事件就做什么事（事件驱动程序）
2）事件的绑定
- 选哪种方式就看后面需不需要对事件源进行操作
2.1）方式一：在标签内部给标签的事件属性赋值（不推荐使用）
- 注意：这种方式绑定的时候，this指向的是window
function btnClick(){
console.log(this)
result = confirm('是否删除?')
if(result){
document.getElementById('btn1').remove()
}
}
2.2）方式二：通过给节点对象的事件属性赋值来绑定（推荐使用）
- 注意：这种方式绑定的时候，this指向的是事件源
btnNode = document.getElementById('btn3')
// 给事件属性赋函数名
btnNode.onclick = btnClick
//获取所有class值是btn1的标签对应的节点
btn1Nodes = document.getElementsByClassName('btn1')
for(x=0;x2.3）方式三：通过addEventlistener方法进行绑定（推荐使用）
- 语法：
事件源节点.addEventListener(事件名称,事件驱动程序) - 说明：
事件名称 - 事件属性名去掉on
事件驱动程序 - 事件发生后需要调用的函数 - 注意：
this是事件源
可以给同一个节点的同一个事件绑定不同的事件驱动程序
btnNode4 = document.getElementById('btn4')
btnNode4.addEventListener('click', function(){
console.log(this)
alert('你好！')
})
btnNode4.addEventListener('click', function(){
this.style.color = 'red'
})
3）常见事件类型
3.1） onload事件
- 页面加载完成对应的事件（标签加载成功）
- window.onload = 函数（window.可以省略）
我是段落
3.2）鼠标事件
- onmousedown：鼠标按钮按下事件；onmouseup：鼠标按钮松开事件；onclick：鼠标点击事件
- onmouseover：鼠标悬停事件；onmouseout：鼠标离开事件
- onmouseenter：鼠标移动到元素上时触发；onmouseleave：鼠标移开事件（类似于 onmouseover 和 onmouseout ，区别是 onmouseenter 和 onmouseleave 不支持冒泡）
- onmousemove：鼠标在元素上移动（over （在上面）只触发一次，move （移动） 只要移动就不停触发）
pNode = document.getElementById('p1')
// 鼠标点击事件
pNode.onclick = function(evt){
alert('p标签被点击')
console.log(evt)
}
// 鼠标悬停事件
pNode.onmouseover = function(){
this.style = 'background-color:yellow'
}
// 鼠标离开事件
pNode.onmouseout = function(){
this.style = 'background-color:pink'
}
3.3）键盘事件
- 键盘事件一般绑定在输入框对应的标签上
- onkeypress：按下弹起
- onkeydown：按键按下
- onkeyup：按键弹起
// 按下弹起
inputNode = document.getElementById('input1')
inputNode.onkeypress = function(evt){
console.log('键盘按下弹起')
console.log(evt)
}
// 按键按下 、按键弹起
inputNode.onkeydown = function(){
console.log('键盘按下')
}
inputNode.onkeyup = function(){
console.log('键盘弹起')
}
3.4）输入框事件
- onchange：输入框中输入内容的时候按回车（补：onchange 属性可适用于 ,