JS的BOM第一天

Browser Object Model 浏览器对象模型

可视化窗口大小

        视口宽
        window.innerWidth

        document.body.clientWidth

        document.documentElement.clientWidth

        高就是把后面的width换成height

        可以封装一下方便使用

        写三条是因为

        BOM的兼容性很差，你写三条兼容的浏览器就更多，全都能兼容吗？并不是。。。 

滚动条查看

        document.documentElement.scrollTop

        document.documentElement.scrollLeft

        也是可以封装的呀

弹出窗

        alert('警告框')

        prompt('输入值','默认值')

        print('想打印的内容')

        confirm('需要确定的内容')

开启/关闭窗口

        window.open('网址')//1个参数的时候，每次刷新页面都是打开新的窗口

        window.open('网址','名字')//2个参数每次刷新页面都时刷新第一次打开的窗口

        window.open('网址','名字','网页大小和位置')//可以对打开的新窗口进行设置

        window.close

定时器

        setTimeout（函数，时间）

        setInterval(函数，时间)

        //定义多少秒之后执行

        setTimeout(function(){

            //运行代码块

        },1000)

        setTimeout(()=>{

            //运行代码块

        },1000)

        //每隔定义的多少秒之后，重复执行

        setInterval(function(){

            //运行代码块

        },1000)

        setInterval(()=>{

            //运行代码块

        },1000)

浏览器历史记录（呵，并没有自动删除的功能）

         window.history.forward()//前进

        window.history.back()//后退

        window.history.go(1)//前进1 或者其它整数值，正数x前进x个页面

        window.history.go(0)//刷新

        window.history.go(-1)//后退 或者其它整数值，负数X后退X个页面

        但是还有一个问题，history它的运行必须要你先有历史记录然后才可以成功，没有记录就没有效果

本地属性

       console.log(window.location)

        console.log(document.location);

        console.log(location); 

        以上三个得出的结果是一模一样的

        window.location.href='某网站，请不要忘加http//'

        重复加载可以用做刷新

        window.location.reload()

DOM也算是BOM里面的对象

dom用来访问和操作HTML文档
dom用来增删改查和事件绑定，事件绑定，事件绑定定定定
文档document--节点node
nodeName 节点名
nodeType 节点数值
设置文档标签样式
documengt.标签名.style.属性='值'
用js获取HTML的元素作为节点进行设置

1通过设置ID获取节点

声明 变量x=document.gerElementsById('设置的ID名')

 2通过类名获取节点

获取的是集合，如果要拿到具体的值得写下标

        let class1=document.getElementsByClassName('p1')[1];

3通过标签名获取节点

        let tags =document.getElementsByTagName('div')[1]

4通过属性名获取节点

        let by_name=document.getElementsByName('divs')[0]

        console.log(by_name)

 简写关键字cssText

 

每个样式之间用分号分开，要注意的是这个东东，它会覆盖你之前写的样式所以你不要图省事复制一堆这个属性呀！同样的属性如果要进行同级选择，不要偷懒复制哦，会因为被覆盖无法显示的

四种获取节点的方式，只有ID获取的不是一个集合
通过类名。标签名。属性名获取到的都是一个集合需要给下标才能获取值，不要以为只有一个可以偷懒嗷！要写[0]

        //楼下获取带ID标签的节点

        let qs=document.querySelector('#id1')

        console.log(qs);

        let qs1=document.querySelector('div')

        console.log(qs1)

        let qs1s=document.querySelectorAll('div')

        console.log(qs1s)

        let qs2=document.querySelectorAll('div span')

        console.log(qs2)

        let qs3=document.querySelectorAll('div ul li span')

        console.log(qs3)

        let qs4=document.querySelectorAll('.li_span')

        console.log(qs4)
querySelector()根据选择器名称获取元素只返回第一个。

——————————————————————————————————————————————————————————————————————————————————————小练习~

个鬼

 

 

 魔力，是真是存在的一种令人无法抗拒也无法理解的神奇力量

它无所不能，唯一一种增加这种力量的方式

就是让自己变得更加优秀