BOOM和DOOM操作
目录
BOM
BOM操作指的是浏览器对象模型，它可以是JavaScript可以于浏览器进行对话，在JavaScript中与浏览器交互就是对window对象进行操作
window对象
window对象是客户端JavaScript最高层对象之一，由于window对象是其他大部分对象的共同的祖先，在调用window对象的方法和属性是，可以省略window对象的引用，也就是说window.document.write()可以简写成document.write()
window对象常用的方法：
| 方法 | 作用 |
|---|---|
| window.innerHeight | 浏览器窗口内部的高度 |
| window.innerWidth | 浏览器窗口内部的宽度 |
| window.open | 打开窗口 |
| window.close | 关闭窗口 |
window的子对象
navigator
判断用户使用的浏览器
navigator.appName // 得到用户使用的浏览器全程
navigator.appVersion // 得到用户使用浏览器的版本和厂商
navigator.userAgent // 浏览器的大部分信息
navigator.platform // 浏览器所在的操作系统
screen对象
屏幕对象
screen.availWidth // 获得屏幕可用的宽度
screen.availHeight // 获得屏幕可用的高度
history
就是操纵浏览器的前一页和后一页的按钮
history.forward() //前进一页
history.back() // 后退一页
location对象
可以用于获得当前页面的地址，并把浏览器重定向到新的页面
location.href // 获取当前页面的地址
location.herf = '目标网页的url' // 跳转到目标界面
location.reload() // 重新加载当前页面
弹出框
在JavaScript中有三种消息弹出框：
-
警告框
用于确保用户可以得到某些信息，使用alert关键字
alert('警告信息'); -
确认框
用于使用户可以验证或接受某些信息，需要用户点击确认或者取消按钮才能继续操作，使用confirm关键字
confirm('确认信息') -
提示框
用于提示用户在进入页面前输入某一个值，需要用户输入信息点击确认或者取消才能继续操作，使用prompt关键字
prompt('提示信息')
计时相关
类似于python中的time.sleep，可以让代码在一定时间间隔之后来执行代码
setTimeout
var t = setTimeout('需要执行的语句'，时间（毫秒）)
使用setTimeout方法会返回一个返回值，如果需要取消这个方法，可以使用这个变量名取消，其他情况基本不会去使用
第一个参数是一个字符串，可以是需要执行的语句，也可以是调用一个函数，执行语句要加上引号，对函数的调用不要加引号
第二个参数的单位是毫秒
clearTimeout
clearTimeout(接收setTimeout返回值的变量名)
// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
setInterval
可以周期性的调用函数或者计算表达式，如果不被关闭就会一直被弹出，用法与setTimeout类似
var t = setInterval("JS语句",时间间隔)
clearInterval
取消setInterval，用法与clearTimeout相似
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
DOM
DOM操作指的是文档对象模型，它可以访问HTML文档的所有元素
每当页面被加载时，浏览器会创建页面的文档对象模型
HTML DOM树
DOM标准规定HTML文档中的每个成分都是一个节点
- 文档节点：document对象，代表整个文档
- 元素节点：element对象，代表一个标签
- 文本节点：text对象，代表标签中的文本
- 属性节点：attribute对象，代表标签中的属性
- 注释节点：comment对象
JavaScript中可以通过DOM创建动态的界面，有如下一些作用
- JavaScript能够改变也i面中所有的HTML元素
- JavaScript能够改变页面中所有HTML元素
- JavaScript能够改变页面所有的css样式
- JavaScript能够对页面所有事件作出反应
标签查找
直接查找
- 根据id查找
doucument.getElementById查找到的结果是是对象本身 - 根据class属性查找
doucument.getElementByClassName查找到的结果是数组，通过索引取值得到对象本身 - 根据标签名查找
document.gteElemenByTagName查找到的结果是数组，通过索引取值得到对象本身
间接查找
- 父节点查找
当前节点对象.parentElement - 子节点查找
当前节点对象.childrenElement - 第一个子节点
firstElementChild - 最后一个子节点
lastElementChild - 下一个兄弟标签
netxElementSibling - 上一个兄弟标签
previousElementSibling
节点操作
创建节点
var divEle = document.createElement('需要创建的标签')
这里定义的变量名最好使用标签名+Ele的形式定义，这样就可以一目了然的看到创建的标签类型
添加节点
-
追加节点
添加子节点
somenode.appendChild(需要添加的节点)var divEle = doucument.getElementsByClassName('c1')[0] // 通过类取标签取到的是一个数组，需要先索引取值 divEle.appendChlid(imgEle)添加节点到最下方
somenode.append(需要添加的节点)var divEle = document.getElementsByClassName('c1')[0] divEle.append(imgEle)append和appendChild 的区别：
append可以同时传入多个节点或字符串，且没有返回值
appendChild只能传入一个节点，不支持字符串
-
插入节点
somenode.insertBefor(需要添加的节点，某个节点)
var pEle = doucument.getElementByTagName('p');
var imgEle = doucment.createElement('img');
imgEle.setAttribute('src','https://www.baidu.com');
pEle.appendChild(imgEle)
删除节点
somenode.remove(需要删除的节点)
替换节点
somenode.replace(需要替换的节点，某个节点)
属性节点
文本节点
// 获取文本节点的值
// 获取节点
var divEle = doucument.getElementById('id')
// 获取文本
divEle.innerText
// 获取整个HTML代码
divEle.innerHTML
// 设置文本节点的值
divEle.innerText = '1231230';
// 添加HTML代码
divEle.innerHTML = '<p>2</p>'
// 通过innerText添加的值为文本，就算是HTML代码也只是以文本形式显示
// 没有赋值符号是获取文本，有赋值符号是设置文本
attribute操作
var divEle = document.getElementById("d1");
// 可以设置默认的属性，也可以设置自定义的属性
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性可以直接使用.属性名来获取和设置值
imgEle.src
imgEle.src="..."
input标签，select标签，textarea标签获取值
可以直接使用.value的型式elementNode.value
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);
class操作
- 获取所有样式类名（字符串）
className - 删除指定类
classList.remove() - 添加类
classList.add() - 判断类是否属于标签
classList.contains() - 存在删除，否则添加
classList.toggle()
指定css操作
obj.style.backgroundColor="red"
JS操作CSS属性的规律：
- 对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
- 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
事件指的是当符合某种条件下，自动触发的动作或者响应
事件的两种绑定方式
方式一
在标签内部写发生的事件，在script标签内写事件发生的代码
<div id="d1" onclick="changeColor(this);">
这是一个链接
</div> <!--这里写发生的事件，this是一个实参，类似于python中的self-->
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script> <!--这里写事件发生后的代码，ths是形参，接收this-->
方式二
全部写在body最下面的script标签中
<div id="d2">这是一个链接</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
alter(123);
}
</script> <!--这里不需要传入参数，需要的话可以直接this.-->
常用事件
| 事件 | 作用 |
|---|---|
| onclick | 点击某个对象时调用事件句柄 |
| ondblclick | 双击某个对象时调用事件句柄 |
| onfucus | 某个元素获得焦点时调用事件句柄 |
| onblur | 某个元素失去焦点时调用事件句柄 |
| onselect | 在文本框文本被选中时调用事件句柄 |
| onsubmit | 点击确认按钮时调用事件句柄，使用的对象时form |
事件练习
开关灯示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.c1 {
height: 400px;
width: 400px;
border-radius: 50%;
}
.bg_green {
background-color: green;
}
.bg_red {
background-color: red;
}
</style>
</head>
<body>
<div class="c1 bg_green bg_red"></div>
<button id='d1'>变色</button>
<script>
// 找到button标签
let btnEle = document.getElementById('d1')
// 点击触发事件
btnEle.onclick = function(){
// 找到div标签
var divEle = document.getElementsByClassName('c1')[0]
// 修改类属性值
divEle.classList.toggle('bg_red')
}
</script>
</body>
</html>
input获取焦点示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" value="go语言" id="d1">
<script>
// 获取input标签
var iEle = document.getElementById('d1');
// input标签聚焦事件
iEle.onfocus = function(){
iEle.value = ''
};
// input框失去焦点事件
iEle.onblur = function(){
iEle.value = 'pyton学习'
}
</script>
</body>
</html
展示当前时间示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">开始计时</button>
<button id="b2">结束计时</button>
<script>
// 定义一个全局变量用来存储定时器
var t = null;
// 获取input框标签
var iEle = document.getElementById('d1');
// 获取开始计时标签
var b1Ele = document.getElementById('b1');
// 获取结束计时标签
var b2Ele = document.getElementById('b2');
// 获取一个定时器
function showTime(){
// 调用js的date类获得当前时间
var currentTime = new Date();
var ctime = currentTime.toLocaleString();
// 给input标签添加当前时间的属性
iEle.value = ctime
}
// 点击开始时间按钮事件
b1Ele.onclick = function () {
if(!t){
// 让t每隔一秒就加1
t = setInterval(showTime,1000)
}
};
// 结束事件
b2Ele.onclick = function () {
clearInterval(t);
// 将t给清空，不然下次就不会开始
t = null
}
</script>
</body>
</html>
省市联动示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="d1">省:
</select>
<select name="" id="d2">市:</select>
<script>
var s1Ele = document.getElementById('d1');
var s2Ele = document.getElementById('d2');
var data = {
"河北省": ["廊坊", "邯郸",'石家庄'],
"北京": ["朝阳区", "海淀区",'昌平区'],
"山东": ["威海市", "烟台市",'青岛'],
"上海":["静安区",'黄浦区','徐汇区']
};
// 动态创建option标签 添加到第一个选择框中
for (let province in data){
// 创建一个个的option标签
var optEle = document.createElement('option');
// 给创建的option标签设置文本和属性
optEle.innerText = province;
optEle.value = province;
// 将创建好的option标签添加到select框中
s1Ele.appendChild(optEle)
}
s1Ele.onchange = function () {
// 获取用户选择的省 根据省 取到对应的市
var currentPro = this.value;
var cityList = data[currentPro];
// 先将第二个select框中的所有内容清空
s2Ele.innerHTML = '';
// 循环市的数组 创建option标签 操作属性 添加到第二个select框中
for (let i=0;i<cityList.length;i++){
var optEle = document.createElement('option');
optEle.innerText = cityList[i];
optEle.value = cityList[i];
s2Ele.appendChild(optEle)
}
}
</script>
</body>
</html>
