bom
bowser object model
将整个浏览器抽象成若干个js对象，目的是为了通过js对象的方式
操作浏览器
window
是否所有的属性和方法在访问时都需要前缀?
对
所有的属性和方法都必须有前缀
如果前缀是window则可以省略
var arr = [1, 2, 3];
window.arr.push(8);
console.log(window.arr);
window.document.write("heihei");
三个弹出框
弹出框必须下载body体内
所有弹出框都具备阻塞行为
alert
alert("我是一个弹出框")
console.log("heihei")
prompt([提示信息],[默认值]):返回字符串
var x = prompt("请输入数据", 666)
console.log(x + 1)
confirm
confirm([提示信息]):返回布尔值
var flag = window.confirm("确定要转账嘛")
console.log(flag)
两个定时器
setInterval(回调函数,时间间隔):返回值为关闭定时器的钥匙
clearInterval(钥匙)
setTimeout(回调函数,时间间隔):返回值为关闭定时器的钥匙
clearTimeout(钥匙)
var oBtns = document.getElementsByTagName("button")
var oBox = document.getElementById("box")
var time
oBtns[0].onclick = function() {
time = setTimeout(function() {
oBox.style.display = "none"
}, 3000)
}
oBtns[1].onclick = function() {
clearTimeout(time)
}
onload
onload延迟加载,整个页面全部执行完后，再去执行事件体的代码
window.onload = function() {
var oP = document.getElementById("test");
console.log(oP.innerHTML);
}
location
location:地址对象
console.log(location)
herf:对于地址的读写
读：
console.log(location.href)
写:通过js的方式跳转页面
var oBtn = document.getElementById("btn")
oBtn.onclick = function() {
setTimeout(function() {
// location.href = "2.window.html"
location.href = "http://www.baidu.com"
}, 2000)
}
document
window.document
1.write
a.拥有HTML字符串解析(如果该字符串打印至页面的时候，可以被当做
HTML元素,则该字符串以HTML元素的形式展现)
document.write("heihei")
document.write("<br>")
document.write("haha")
document.write("<strong>" + 123123 + "</strong>")
b.出现在事件体中，会覆盖原页面
var oBtn = document.getElementById("btn")
oBtn.onclick = function() {
document.write("haha")
}
2.找html元素，转换成js对象
找单个元素(返回一个元素)
document.getElementById("ID名"):返回ID对应的元素
document.querySelector("选择器"):返回ID，类，标签对应的单个元素
var oPt1 = document.querySelector("#t1")
var oPt1 = document.querySelector("p")
var oPt1 = document.querySelector(".t")
console.log(oPt1.innerHTML)
找批量元素(返回数组)
document.getElementsByTagName("标签名"):批量返回标签名对应的HTML元素,存放在数组中
document.getElementsByClassName("类名"):批量返回类名对应的HTML元素,存放在数组中
var oPs = document.getElementsByClassName("t")
for (var i = 0
console.log(oPs[i].innerHTML)
}
document.getElementsByName("name名"):批量返回name名对应的HTML元素,存放在数组中
var oPs = document.getElementsByName("test")
for (var i = 0
console.log(oPs[i].innerHTML)
}
document.querySelectorAll("选择器")
var oPs = document.querySelectorAll("p")
var oPs = document.querySelectorAll(".t")
for (var i = 0
console.log(oPs[i].innerHTML)
}
DOM
document object model
文档对象模型
Dom节点
<html>
<head>
<title>
标题
</title>
</head>
<body>
<img>
<h1>
喜欢的水果
</h1>
<p>
其他文本
</p>
</body>
</html>
Dom节点的遍历
Dom节点的遍历:已知任意dom元素,可以根据节点遍历的属性，
访问dom树中的任意节点
获取dom节点和文本节点(不常用，正常人一般不太关注文本节点)
firstChild 返回节点的第一个子节点，
最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
已知body,获取p标签的innerHTML
document.body:document自带body属性
var str = document.body.firstChild.nextSibling.innerHTML
console.log(str)
---------------------------------------------------
通过层级关系访问dom节点,自动过滤文本节点
firstElementChild 返回节点的第一个子节点，
最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
var str = document.body.firstElementChild.innerHTML
console.log(str)
var str1 = document.body.firstElementChild.nextElementSibling.
firstElementChild.nextElementSibling.innerHTML
console.log(str1)
节点类型的判断 nodeType
nodeType:判断该节点是元素还是文本节点
1.代表元素节点
3.代表文本节点
var oP = document.querySelector("p")
console.log(oP.nodeType)
console.log(oP.firstChild.nodeType)
节点的操作
节点的操作
增
a.创建
document.createElement("标签名"):返回创建好的dom对象
var oH1 = document.createElement("h1")
oH1.innerHTML = "静夜思"
b.追加
父节点.appendChild(子节点)
document.body.appendChild(oH1)
var oP = document.createElement("p")
oP.innerHTML = "基尼太美"
document.body.appendChild(oP)
删
被删除元素
dom.remove()
var oBtn = document.querySelector("button")
var oUl = document.querySelector("ul")
oBtn.onclick = function() {
// oUl.lastElementChild.remove()
oUl.remove()
}
