BOM（浏览器对象模型）

最新推荐文章于 2024-11-13 17:27:29 发布

曹MX

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量59

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_50736421/article/details/120102748

版权

BOM

window

弹窗

alert("消息")
let flag = confirm("消息")
let input = prompt("消息")

定时器

setTimeout(fn, timeout)
setInterval(fn, interval)
clearTimeout(t)
clearInterval(t)

location

location.href

浏览器的地址栏，可以访问，也可以修改

location.reload()

重新加载当前页面

    document.getElementById("btn1").onclick = function() {
        console.log(location.href);
    }

    document.getElementById("btn2").onclick = function() {
        location.href = "https://www.baidu.com";
    }

    document.getElementById("btn3").onclick = function() {
        location.reload();
    }

history

history.back()

回退一页
history.forward()

前进一页
history.go(num)

前进或后退任意数量的页(必须支持的)

DOM

文档节点树

将html的所有内容，制作成一个树型结构，这一个树型结构内部，针对文档进行增、删、改、获取

dom元素获取

document.getElementById()

根据id获取元素，返回值为单个元素或null
document.getElementsByTagName()

根据标签名获取元素，返回值为一个集合
document.getElementsByClassName()

根据class获取元素，返回值为一个集合
document.getELementsByName

根据元素的name属性获取元素，返回值为一个集合
document.querySelector()

根据选择器获取元素，返回值为单个元素或null
如果选择器，能够选择多个元素，那么获取的元素为第1个
document.querySelectorAll()

根据选择器获取元素，返回值为一个集合

value值操作

可以直接设置或获取某元素的value属性

标签体操作

元素.innerHTML

获取或设置html的标签体
元素.innerText

如果用于获取，那么就只获取文本，不获取标签
如果用于设置，那么设置的所有内容，均作为文本，包括小于号和大于号

元素的添加与删除

添加

// 创建一个元素对象
// 但是并没有放到页面上，也没有描述放到哪个父标签内部
let newInput = document.createElement("input");

// 将创建好的新对象，放到div内部的最后
document.querySelector("div").appendChild(newInput);

删除

// 方案1
let parent = document.querySelector("#myDiv");
let child = document.querySelector("#mySpan");
parent.removeChild(child);

// 方案2
document.querySelector("#mySpan").remove();