BOM和DOM操作

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 获取URL
location.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.innerHTML HTML代码
添加/替换文本
- 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.classList
- divEle.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>