目录
BOM
- Browser Object Model 浏览器对象模型
window对象
window.innerHeight获取窗口高度window.innerWidth获取窗口宽度window.open()打开新窗口window.close()关闭当前窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.open("https://www.baidu.com")
window.close()
</script>
</body>
</html>
window子对象
location
location.href获取URLlocation.href="URL"跳转带指定页面location.reload()重新加载页面
弹出框
alert("警告框")confirm("确认框")prompt("提示框")
计时
var t = setTimeout(func, time)定时执行任务clearTimeout(t)清除计时对象
function func() {
alert("hahaha")
};
function show() {
var t = setTimeout(func, 3000) // 创建计时器对象并执行
function inner() {
clearTimeout(t) // 清除计时器对象
}
setTimeout(inner, 9000)
};
var i = setInterval(func, time)循环执行任务clearInterval(i)清除循环对象
function func() {
alert()
function show("这是一个警告弹窗") {
var i = setInterval(func, 3000)
function inner() {
clearInterval(i)
}
setTimeout(inner, 9000)
}
show()
history
history.forward()前进一页history.back()后退一页
navigator
-
navigator.userAgent客户端的大部分信息 -
navigator.appName浏览器全称 -
navigator.appVersion浏览器厂商和版本 -
navigator.platform运行浏览器的操作系统
DOM
- Document Object Model 文档对象模型
- 规定HTML文档中的每个成分都是一个节点 (node)
- JS可以通过DOM创建动态的HTML
查找节点
直接查找
- 标签名
document.getElemenByTagName()- 返回的一个数组 []
- 类名
document.GetELementByClassName()- 返回的是一个数组[]
- id
document.GetElementById()- 返回的是节点本身
间接查找
- 查找父标签
子标签对象.parentElement - 查找子标签
父标签对象.chidren - 第一个子标签
父标签对象.firstElementChild - 最后一个子标签
父标签对象.lastElementChild - 下一个兄弟标签
标签对象.nextElementSibling - 上一个兄弟标签
标签对象.previousElementSibling
节点操作
创建节点
- 创建节点:
var divEle = document.creatElement("div")
添加节点
- 追加节点:
parentEle.appendChild(childELe) - 插入节点:
parentEle.insertBefore(newELe, someELe)
删除节点
parentEle.removeChild(chileELe)
替换节点
parentELe.replaceChid(childEle)
属性节点
-
获取文本节点的值
divEle.innerText文本内容divEle.innerHTMLHTML代码
-
添加/替换文本
divEle.innerText="文本内容"divEle.innerHTMl="html代码"
-
节点属性操作
divEle.setAttribute(name, value)divEle.getAttribute(name)divELe.removeAttribute(name)
获取用户输入
- 获取用户输入内容 (input, select, textarea)
iEle.value- 多选不适用
- 上传文件不适用 (
iEle.file[0])
操作标签class属性
- 查看类属性
divEle.classListdivEle.className
- 删除类
divEle.classLIst.remove() - 添加类属性
divELe.classlist.add() - 判断是否有某个类
divEle.classList.contains() - 有就删除, 没有就添加
divELe.classList.toggle()
操作标签样式
pEle.style.样式名
事件
- 当符合某个条件, 自动触发的动作和响应
常用事件
onclick点击ondbclick双击onfocus获得焦点onblur失去焦点onkeydown某个按键被按下
绑定事件
- 直接在标签内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1" onclick="changeColor(this)">click me</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green"
}
</script>
</body>
</html>
- 通过
<script>标签内js代码绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">click me</div>
<script>
divEle1 = document.getElementById("d1");
divEle1.onclick=function () {
this.style.backgroundColor="green";
}
</script>
</body>
</html>