55、DOM与BOM的操作及事件的简介

一、BOM与DOM操作

1.1、BOM操作

　　浏览器对象模型　　Browser object Model

　　js代码操作浏览器

1.2、DOM操作　　Document object Model

　　文档对象模型

　　js代码操作标签

1.3、BOm操作

1.3.1、window对象

　　window对象指的是浏览器窗口

window.innerHeight  获取浏览器窗口的高度
window.innerWidth   获取浏览器窗口的宽度
window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px,left=400px')
# 新建窗口打开页面 第二个参数写空即可 设置新建的窗口的大小和位置，左上角为基点
window.close()
# 扩展父子页面通信window.opener()  了解

1.3.2、window子对象

　　window.navigator.appname：获取浏览器名字

　　window.navigator.appVersion：获取浏览器的版本信息

　　window.navigator.userAgent：判断当前是否为浏览器

　　　　可以用来进行一个反爬措施，在浏览器中添加user-agent

　　window.navigator.platform：获取平台信息

1.3.3、history 对象

　　window.history.back：返回上一页

　　window.history.formard：前进到下一页

1.3.4、location对象

　　window.location.href：获取当前URL

　　window.location.href = url：跳转到指定的URL

　　window.location.reload()：刷新页面

　　　　window的子对象可以不写window，已经默认是window。

1.3.5、弹出框

　　1.警告框：alert（“提示信息”）　　返回undefined

　　2.确认框：confirm（“提示信息，需要点击确认或者取消”）　　返回true or false

　　3.提示框：prompt（“提示信息”，“默认信息，可更改”）　　返回默认信息，或者更改后的信息

1.3.6、计时器相关

　　1.过一段时间后触发一次：let t = setTimeout（func1，3000）　　单位是毫秒，即3秒后执行函数

　　2.每个一段时间触发一次：let t = setInterval(func2,3000)　　每隔3秒，执行一次函数

　　3.取消定时任务：clearTimeout（t）

<script>
    function func1() {
        alert(123)
    }
    let t = setTimeout(func1,3000);  // 毫秒为单位 3秒之后自动执行func1函数

    clearTimeout(t)      // 取消定时任务  如果你想要清除定时任务 需要日前用变量指代定时任务


    function func2() {
        alert(123)
    }
    function show(){
        let t = setInterval(func2,3000);  // 每隔3秒执行一次
        function inner(){
            clearInterval(t)  // 清除定时器
        }
        setTimeout(inner,9000)  // 9秒中之后触发
    }
    show()
</script>

1.4、DOM操作

1.4.1、DOM树

　　JavaScript可以改变页面中所有的HTML元素、HTML属性、css样式以及对所有页面中发生的时间做出改变

　　DOM操作的是标签，所以需要先找到标签，在进行标签的操作

　　DOM操作需要以document起手

1.4.2、查找标签

1.4.2.1、直接查找

　　1.id查找：document.getElmentById("d1")　　返回值为标签本身

　　2.类查找：document.getElmentsByClassName（“c1”）　　返回值为数组，查找是需要添加索引

　　3.标签查找：document.getElmentsByTayName("div")　　返回值为数组，查找是需要添加索引

　　可以将找到的标签赋值给变量，通过执行变量名达到快速操作的效果，变量名通常为标签名+Ele

# 注意三个方法的返回值是不一样的
document.getElementById('d1')
<div id="d1">…</div>

document.getElementsByClassName('c1')
HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection
      
document.getElementsByTagName('div')
HTMLCollection(3) [div#d1, div, div, d1: div#d1]
                   
                   
let divEle = document.getElementsByTagName('div')[1]
divEle
<div>div>div</div>
"""
当你用变量名指代标签对象的时候 一般情况下都推荐你书写成
xxxEle
    divEle
    aEle
    pEle

1.4.2.2、间接查找

　　.parentElement：获取父节点

　　.children：获取所有字标签

　　.firstElement：获取第一个子标签

　　.lastElement：获取最后一个子标签

　　.nextElementSibring：获取同级别下面第一个标签

　　.previousElementSibling：获取同级别上边第一个标签

1.4.3、节点操作

55、DOM与BOM的操作及事件的简介

猜你喜欢