BOM相关知识点

weixin_52545652

于 2022-07-17 16:40:36 发布

阅读量102

点赞数 1

分类专栏：前端文章标签：大数据

本文链接：https://blog.csdn.net/weixin_52545652/article/details/125685730

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、BOM和DOM是什么？

BOM（Browser Object Model）浏览器对象模型

DOM（Document Object Model）文档对象模型

二、Window对象

1.四种常用方法

（1）innerHeight（获取浏览器窗口的高度）

（2）innerWidth（获取浏览器窗口的宽度）

（3）open（打开一个浏览器）

（4）close（关闭）

代码如下：

window.innerHeight
951
window.innerWidth
981
window.open('https://www.mzitu.com','','height=400px,width=400px,top=400px,left=400px')
window.close()

2.window子对象

window子对象前面的window可以省略。

（1）navigator

代码如下:

window.navigator.appName
'Netscape'
window.navigator.appVersion
'5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Mobile Safari/537.36'
window.navigator.userAgent       (这个要掌握)
'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Mobile Safari/537.36'
window.navigator.platform
'Win32'

（2）history

window.history.back() 回退到上一页

window.history.forward() 前进到下一页

两者对应浏览器左上角的两个箭头

（3）location（掌握）

window.location.href 获取当前页面的url

window.location.href = url 跳转到url页面

window.location.reload() 刷新页面

3.弹出框

（1）警告框（2）确认框（3）提示框

alert('你不要过来呀！')
undefined
confirm('你确定真的要这么做吗？')
true
prompt('手牌号给我看一下','22号消费888')
'来宾2222'

4.计时器

（1）过了一段时间触发（触发一次）

（2）每隔一段时间触发（循环）

<script>
    function func1()
    {
        alert('123')
    }
    let t = setTimeout(func1, 3000)   //以毫秒为单位

    clearTimeout(t)   //清除上面的计时请求，上述的请求需要有个变量取接收

    function func2()
    {
        alert('123')
    }
    function show()
    {
        let a = setInterval(func2,3000)
        function inner()
        {
            clearInterval(a)
        }
        setTimeout(inner, 9000)
    }
    show()
</script>

三、DOM操作

1.查找标签

直接查找

（1）id查找（2）类查找（3）标签查找

注意三个方法的返回值是不一样的。

DOM操作需要document关键字。

:63342/favicon.ico:1          Failed to load resource: the server responded with a status of 404 (Not Found)
document.getElementById('d1')
<div id="d1">…</div>
document.getElementsByClassName('c1')
HTMLCollection [p.c1]0: p.c1length: 1[[Prototype]]: HTMLCollection
document.getElementsByTagName('div')
HTMLCollection(3) [div#d1, div, div, d1: div#d1]
let divEle = document.getElementsByTagName('div')[1]
undefined
divEle
<div>div>div</div>

间接查找

let pEle = document.getElementsByClassName('c1')[0]  //注意是否要加索引值
pEle
<p class="c1">…</p>
pEle.parentElement      //获取父标签
<div id="d1">…</div>
pEle.parentElement.parentElement
<body>…</body>
pEle.parentElement.parentElement.parentElement
<html lang="en"><head>…</head><body>…</body></html>
pEle.parentElement.parentElement.parentElement.parentElement
null

let divEle = document.getElementById('d1')   //获取所有的子标签
divEle
<div id="d1">…</div>
divEle.children
HTMLCollection(3) [div, p.c1, p]
divEle.children[0]
<div>div>div</div>
divEle.firstElementChild
<div>div>div</div>
divEle.lastElementChild
<p>div>p</p>
divEle.nextElementSibling       //同级别下面第一个标签
<div>div最下面的div</div>
divEle.previousElementSibling   //同级别上面第一个标签
<div>div最上面的div</div>

2.节点操作

let imgEle = document.createElement('img')    //创建标签
imgEle
<img>
imgEle.src = '111.jpg'      //直接给标签加属性
'111.jpg'
imgEle
<img src="111.jpg">
imgEle.setAttribute('username','aa')    //对于一些没办法直接加属性的通过这种方法进行
undefined
imgEle
<img src="111.jpg" username="aa">
imgEle.setAttribute('title','一张图片')
undefined
imgEle
<img src="111.jpg" username="aa" title="一张图片">
let divEle = document.getElementById('d1')
undefined
divEle.appendChild(imgEle)    //标签内部添加元素
<img src="111.jpg" username="aa" title="一张图片">

let aEle = document.createElement('a')
undefined
aEle
<a></a>
aEle.href = 'https://www.baidu.com/'
'https://www.baidu.com/'
aEle.innerText = '点击'     //给标签加上文本
'点击'
aEle
<a href="https://www.baidu.com/">点击</a>
let divEle = document.getElementById('d1')
undefined
let pEle = document.getElementById('d2')
undefined
divEle.insertBefore(aEle,pEle)   //指定位置添加标签
<a href="https://www.baidu.com/">点击</a>

补充操作

appendChild()、removeChild()、replaceChild()

setAttribute() ---设置属性

getAttribute() ---获取属性

removeAttribute --移除属性

divEle.innerText    //获取标签内部所有的文本
'div 点击\n\ndiv>p\n\ndiv>span'
divEle.innerHTML   //获取内部文本和标签
'div\n    <a href="https://www.baidu.com/">点击</a><p id="d2">div&gt;p</p>\n    <span>div&gt;span</span>\n'
divEle.innerText='aaaaa'
'aaaaa'
divEle.innerHTML='bbbbb'
'bbbbb'
divEle.innerText='<h1>hhhh</h1>'    //不识别HTML标签
'<h1>hhhh</h1>'
divEle.innerHTML='<h1>hhhh</h1>'    //识别HTML标签
'<h1>hhhh</h1>'

3.获取值操作

let inEle = document.getElementById('d1')
inEle.value     //获取值
'21321'
let seEle = document.getElementById('d2')
seEle.value
'111'
seEle.value
'222'


//如何获取用户上传的文件数据

let fileEle = document.getElementById('d3')
undefined
fileEle.value
'C:\\fakepath\\1651749706237821.pdf'
fileEle.files[0]    //获取文件数据
File {name: '1651749706237821.pdf', lastModified: 1651922263552, lastModifiedDate: Sat May 07 2022 19:17:43 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 147083, …}

class、css操作

let divEle = document.getElementById('d1')
undefined
divEle.classList     //获取标签的所有类属性
DOMTokenList(2) ['bg_red', 'bg_green', value: 'bg_red bg_green']
divEle.classList.remove('bg_red')     //删除类属性
undefined
divEle.classList.add('bg_red')        //添加类属性
undefined
divEle.classList.contains('bg_red')   //验证是否含有某个类属性
true
divEle.classList.contains('c')
false
divEle.classList.toggle('c')  //有则删除无则添加
true
divEle.classList.toggle('c')
false

//DOM操作样式标签，需要用到style。
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle
<p id="d2">给我一遍快</p>
pEle.style.color='red'
'red'
pEle.style.fontSize='28px'
'28px'
pEle.style.backgroundColor='yellow'
'yellow'
pEle.style.border='3px solid red'
'3px solid red'

4.事件

达到某个事件设定的条件，自动触发的动作

<body>
<button onclick="func1()">点我</button>
<button id="d1">点我</button>
<script>
    //第一种绑定事件的方式
    function func1() {
        alert(111)
    }
    //第二种
    let btnEle = document.getElementById('d1');
    btnEle.onclick = function () {
        alert(222)
    }
</script>
</body>

script可以放置于head和body里面，但是通常放置于body里面的最下面。

<script>
        //等待窗口加载后再执行代码
        window.onload = function () {
            //第一种绑定事件的方式
            function func1() {
                alert(111)
            }

            //第二种
            let btnEle = document.getElementById('d1');
            btnEle.onclick = function () {
                alert(222)
            }
        }
    </script>

原生js事件绑定

开关灯案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 200px;
            width: 200px;
            border-radius: 50%;
        }
        .bg_green {
            background-color: greenyellow;
        }
        .bg_red {
            background-color: red;
        }
    </style>
</head>
<body>
<div id="d1" class="c1 bg_red bg_green"></div>
<button id="d2">变色</button>

<script>
    let btnEle = document.getElementById('d2')
    let divEle = document.getElementById('d1')
    btnEle.onclick = function () {
        //绑定点击事件
        divEle.classList.toggle('bg_red')
    }
</script>
</body>
</html>

input框获取焦点失去焦点案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="老板去吗?" id="d1">
<script>
    let iEle = document.getElementById('d1')
    //获取焦点事件
    iEle.onfocus = function () {
        // 将input框内部值去除
        iEle.value = ''
    }
    // 失去焦点事件
    iEle.onblur = function () {
        // 给input框内部值重新赋值
        iEle.value = '没钱 不去'
    }
</script>
</body>
</html>

显示当时时间案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1" value="">
<button id="d2">开始</button>
<button id="d3">结束</button>

<script>
    //定义个全局变量来存储计时器
    let t = null
    let inputEle = document.getElementById('d1')
    let startBtnEle = document.getElementById('d2')
    let endBtnEle = document.getElementById('d3')
    //1.访问页面之后，将访问的时间展示到input框中
    //2.动态显示时间
    //3.添加两个button，实现开始与结束的功能
    function showTime() {
        let currentTime = new Date()
        inputEle.value = currentTime.toLocaleString()
    }
    startBtnEle.onclick = function () {
        if (!t) {
             t = setInterval(showTime,1000)
        }
    }

    endBtnEle.onclick = function () {
        clearInterval(t)
        //将t重置为null
        t = null
    }

</script>
</body>
</html>

省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select name="" id="d1">
    <option value="" disabled selected>--请选择--</option>
</select>
<select name="" id="d2"></select>
<script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    //先模拟省市数据
    data = {
        "河北省":["廊坊", "邯郸"],
        "北京":["朝阳区", "海淀区"],
        "山东":["威海市", "烟台市"],
        "上海":["浦东新区", "静安区", "黄浦区"],
    };
    for (let key in data) {
        // 将省信息做成一个个option标签，添加到第一个select框中
        //1.创建option标签
        let opEle = document.createElement('option')
        //2.设置文本
        opEle.innerText = key
        //3.设置value
        opEle.value = key     //<option value="省">省</option>
        //4.将创建好的option标签添加到第一个select中
        proEle.appendChild(opEle)
    }
    //文本域变化事件 change事件
    proEle.onchange = function () {
        // 先获取用户选择的省
        let currentPro = proEle.value
        // 获取对应的市信息
        let currentCityList = data[currentPro]
        //清空市标签中的信息
        cityEle.innerHTML = ''
        //给市标签加一个选择
        let ss = "<option disabled selected>请选择</option>"
        cityEle.innerHTML = ss
        // for循环所有的市，渲染到第二个select中
        for(let i=0; i<currentCityList.length; i++) {
            let currentCity = currentCityList[i]
             //1.创建option标签
            let opEle = document.createElement('option')
            //2.设置文本
            opEle.innerText = currentCity
            //3.设置value
            opEle.value = currentCity     //<option value="市">市</option>
            //4.将创建好的option标签添加到第二个select中
            cityEle.appendChild(opEle)
        }

    }
</script>
</body>
</html>