BOM编程
browser object model 浏览器对象模型
window–|document
|navigator
|history
|location
|screen
|frames
一、window
1、对话框
(1)alert() 消息提示框
window.alert() window可以省略
(2)prompt()
(3)confirm() 消息确认框
var v1=window.confirm()
确定 v1–true 取消 v1–false
二、间歇调用与超时调用
setInterval():间歇调用,按照指定的时间间隔重复调用代码，直到间歇调用被取消或页面被卸载
取消间歇调用:clearInterval()
window.setInterval(function(){
alert("你好")
},1000)
var n=0
function f1(){
n++
if(n==5){
clearInterval(timmer)
}
alert(n)
}
var timmer=setInterval(f1,1000)
setTimeout():超时调用，指定时间后执行代码
取消超时调用:clearTimeout()
只要指定时间未到，就调用该方法取消调用
window.setTimeout(function(){
alert("你好")
},1000)
3、open 打开新窗口
window.open("test02.html","新窗口",
"width=300px,height=300px,scrollbars=yes,screenX=330px,screenY=330px")
如果w1==null，窗口没弹出
windo.close() 关闭窗口
4、窗口滚动
scrollTo 窗口滚动到指定位置
scrollBy 在原位置上滚动调整
<button onclick="f1()">确定</button>
<div style="width: 200px;height: 2000px;background-color: red;"></div>
<script>
var a=0
function f1(){
if(a!=1000){
a+=10
var timmer=setTimeout(()=>{
scrollBy(0,10)
f1()
},10)
console.log(a)
}else{
clearTimeout(timmer)
}
}
</script>
三、history
保存用户上网的历史纪录，从窗口打开的那一刻算起
history.back() //回到前一页
history.forward() //后一页
history.go(-1) //回到前一页
history.go(-2) //回到前两页
history.go(0) //当前页
history.go(1) //后一页
四、location
1、页面跳转
location.href="test01.html"
location.assign("test01.html")
window.document.location.href="test01.html"
2、获取url属性
location.host //服务器名及端口号
location.hostname //服务器名
location.port //端口号
location.protocol //使用协议
location.pathname //路径
location.search //参数
3、页面重新加载
location.reload() 如果缓存区有就从缓存区里拿，如果没有从服务器上加载
location.reload(true) 直接从服务器上加载
4、页面替换
location.replace() 跳转页面，不会产生历史记录
五、navigator 浏览器内核
1、参数解析
navigator.userAgent 用户代理
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.62'
navigator.appName Netscape(网警)
navigator.appCodeName 浏览器代码名称
navigator.appVersion 浏览器版本
navigator.platform win32 操作系统
mac
linux
x11 --nix
navigator.mimeTypes 获取浏览器资源媒体类型--一般指插件
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.62'
2、浏览器内核
浏览器内核也叫排版引擎，也叫渲染引擎，主要功能获取网页内容(html，图像等)，整理信息(加入css等)
计算网页的显示方式，输出到显示器或其他媒介上
(1)webkit 苹果的开源内核 safari chrome
js引擎 safari--Nitro
chrome--V8
html引擎 KHTML
(2)blink --webkit的一个分支，早期的safari chrome
(3)Trident --IE内核
(4)Gecko --firefox(简写:ff)
js引擎 JagerMonkey
html引擎 Gecko
(5)persto --opera 早期内核
六、screen 客户端显示器信息
screen.width 屏幕像素宽
screen.height 屏幕像素高
screen.availWidth 浏览器窗口所占最大宽度
screen.availHeight 浏览器窗口所占最大高度
window.screenTop 浏览器和上面的距离
window.screenLeft 浏览器和左面的距离
console.log(v1.offsetHeight) //元素当前的可视窗口的宽高
console.log(v1.offsetWidth)
console.log(v1.scrollHeight) //元素实际的宽高
console.log(v1.scrollWidth)
console.log(v1.offsetLeft) //元素相对于浏览器边界的偏移
console.log(v1.offsetTop)
七、iframe
1、内联框架，在一个html中嵌入另一个文档
<iframe src="test02.html" width="300px" height="300px"
style="border: solid 5px red; background-color: yellow;"></iframe>
2、iframe框架传参
(1)父-->子
iframe名称.window.子框架函数名(传递内容)
父:
<script>
window.onload=function(){
}
function f1(){
if01.window.subfun("hello my son")
}
</script>
<iframe name="if01" src="test02.html" width="300px" height="300px" style="border: solid 5px red; background-color: yellow;"></iframe>
<button onclick="f1()">确定</button>
子：
function subfun(arg){
document.getElementById("show").innerText="父框架传递来的数据："+arg
}
<div id="show"></div>
(2)子-->父
parent.window.父元素函数(参数)
【跨域】
postMessage: 可实现跨域通信
语法:窗口对象.postMessage(消息内容，目标窗口)
父<-->子
发送信息
if02.contentWindow.postMessage("hello wang ","http://10.10.255.32:5500/18-iframe%20DOM%E7%BC%96%E7%A8%8B/test03.html")
接受信息
window.addEventListener("Message",function(event){
alert(event.data)
})
DOM编程
DOM—Document Object Model 文档对象模型
aaa
bbb
1、 childNodes :每个节点都有该集合属性，数组对象
表示该节点的所有子节点的集合
注意:会将元素之间的空格当作文本节点
document.childNodes[0]
element.firstchild
element.lastchild
element.parentNode
element.nextSibling
element.previousSibling
2、节点信息
(1)nodeType 代表节点类型
元素节点 1
文本节点 3
(2)nodeValue 节点值
元素节点 null
文本节点 文本内容
(3)hasChildNodes() 判断是否有子节点
有返回true
没有返回false
DOM操作
1、查找元素
document.getElementById(id值) 元素本身
document.getElementsTagName(标签名) 集合
document.getElementsTagName(标签名)[n] 其中的某一个【下标】
document.getElementsByName(name属性值) 集合
document.getElementsByClassName(class名) 集合
window.onload=function(){ //window.onload进行dom操作
var v1=document.getElementsByName("d1")
console.log(v1)
}
<div name="d1">a1.....</div>
window.onload=function(){ //window.onload进行dom操作
var v1=document.getElementsByClassName("d1 c1")
console.log(v1)
}
<div class="d1 c1" >a1.....</div>
document.body
document.all
document.images
document.links 页面中的a标签
Dom扩展：
querySelector()
接收css选择符，返回于该模式匹配的“第一个”元素
如没找到，返回空null
document.querySelector(“#ido1”)
document.querySelector(“.ido1”)
document.querySelector(“div”)
解决：
var v2=document.querySelector(".m1 div")
querySelectorAll()
返回所有匹配的元素 集合的方式返回
var v2=document.querySelector(".m1 span")[2]
var v1=document.querySelectorAll(".item-m span")[1]
var v1=document.querySelector("div .item-m").childNodes[3]
2、元素创建
creatELement 创建元素节点
createTextNode 创建文本节点
3、元素新增
appendChild 元素追加
父节点.appendChild(子节点)
insertBefore 元素的插入
父节点.insertBefore(新的子节点，旧的子节点(准备插入的位置))
4、元素删除
removeChild 元素删除
5、内容管理
innerText 文本内容
innerHtml 文本+样式
6、属性管理
setAttribute()
getAttribute()
removeAttribute()
样式
1、classList (html5新增)
class.length class样式个数
class.item(1) 第几个样式名称
class.remove("c1") 删除样式
class.add("c1") 添加样式
class.toggle("a1") 切换样式，a1存在则删除，不存在添加
class.contains("b1") 判断是否有指定样式
2、style访问样式
// v1.style.color=“red”
// v1.style.backgroundColor=“yellow”
// v1.style.width=“100px”
// v1.style.float=“right”
// alert(v1.style.color)
3、cssText
v1.style.cssText=“color:red;width:200px;height:200px;background-color:yellow”
语法要与css一致
将行内式变成js代码实现
4、样式属性的设置
v1.style.setProperty(“height”,“300px”)
v1.style.removeProperty(“background-color”)
console.log(v1.style.getPropertyValue(“color”))
5、外部css属性
var v1=document.querySelector(“#id01”)
var index=getComputedStyle(v1,null)
console.log(index.width)
v1.style.width=“500px”
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
