JS-Web-API-DOM和BOM

最新推荐文章于 2023-04-26 10:11:09 发布

Pot Kiss

最新推荐文章于 2023-04-26 10:11:09 发布

阅读量2.9k

点赞数

分类专栏：面试经文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/m0_60681099/article/details/125044336

版权

面试经专栏收录该内容

15 篇文章 2 订阅

订阅专栏

1、DOM节点的操作

对节点的操作的js要放在DOM结构下面，不能放在body里面，否则获取的就是null
property 只是修改属性不会影响html结构
attribute 会改变html结构
两者都可能会引起DOM结构的重新渲染

<body>
    <div id="uuu">hh</div>
    <li >1</li>
    <li class="name">2</li>
    <li class="name">3</li>
    <script>
        let a = document.getElementById('uuu')
        console.log(a)
        let b = document.getElementsByClassName('name')//集合
        console.log(b)
        let c = document.getElementsByTagName('li')//集合
        console.log(c)
        let d = document.querySelectorAll('li')//集合
        console.log(d)
        console.log(c===d)//false,这两个区别，querySelectorAll上有forEach啊这些方法
        d.forEach(i=>{
            console.log(i)
        })
        let e = d[1]
        //property 不会影响DOM结构
        e.style.height = '100px'
        console.log(e.style.height)
        //attribute 会改变DOM结构
        e.setAttribute('style','font-size:66px;')
        console.log(e.getAttribute('style'))
    </script>
</body>

2、DOM结构操作

创建元素：document.createElement(‘p’)
新增元素：father.appendChild(new)
移动元素：father.appendChild(old)
获取父元素：chlid.parentNode
获取子元素：father.childNodes;注意里面还有其他类型的节点
删除子元素：father.removeChild(child)

<body>
    <div id="uuu">
        <a href="#">hello</a>
    </div>
    <hr>
    <div id="nnn">
        <li class="move">我是移动节点</li>
        <li class="name">2</li>
        <li class="name">要被删除</li>
    </div>
    <script>
       let uuu = document.getElementById('uuu')
       let nnn = document.getElementById('nnn')
       //创建元素
       let newp = document.createElement('p')
       newp.innerHTML = '我是新增元素'
       //新增元素
       uuu.appendChild(newp)
       //移动节点
       let moveNode = document.getElementsByClassName('move')
       uuu.appendChild(moveNode[0])//新增一个存在的元素，就是移动元素
       //获取元素的父节点
       let child = document.getElementsByTagName('a')
       let a1 = child[0]
       console.log(a1.parentNode)
       //获取元素子节点
       let childs = nnn.childNodes
       console.log(childs) //这里会因该是输出2个，但是有6个，因为里面包含了其他类型的node
       childs  = Array.prototype.slice.call(childs) //把它变成一个数组
       console.log(childs instanceof Array)
       //常见的nodeType 1 => 元素 ；2 => attribute ； 3 => 文本 ；  
       childs = childs.filter(function(i){
          return i.nodeType === 1
       })
       console.log(childs)
       //删除子元素
       nnn.removeChild(childs[1])
    </script>
</body>

3、如何优化 DOM 操作的性能

我们不能频繁进行dom操作，可以将频繁操作改为一次性操作
我们不能频繁进行dom访问，可以对dom查询做缓存

<body>
    <ul id="uuu">
    </ul>
    <script>
        let ulfather = document.getElementById('uuu')
        //未优化：频繁操作dom start
        for(let  i = 0; i < 10; i++) 
        {
            let item = document.createElement('li')
            item.innerHTML = `我是${i}`
            ulfather.appendChild(item)
        }
        //未优化：频繁操作dom end

        //已优化：操作dom优化 start
        let tempNode = document.createDocumentFragment()//创建一个文本片段，此时还没有插入到dom中
        for(let  i = 10; i < 20; i++) 
        {
            let item = document.createElement('li')
            item.innerHTML = `我是${i}`
            tempNode.appendChild(item)//先插入到文本片段里面
        }
        ulfather.appendChild(tempNode)//最后一起插入dom里面去
        //已优化：操作dom优化 end

        //未优化：频繁dom查询 start
        for(let i = 0; i < document.getElementsByTagName('li').length; i++){
            console.log(i)
        }
        //未优化：频繁dom查询 end

        //已优化：缓存dom查询 start
        let hh = document.getElementsByTagName('li')
        let lengthhh = hh.length
        for(let i = 0; i < lengthhh; i++){
            console.log(i)
        }
        //已优化：缓存dom查询 end
    </script>
</body>

4、dom的数据结构

树形的数据结构

5、BOM的相关知识点

识别浏览器类型(navigator)
const ua = navigator.userAgent;
console.log(ua);//之后用indexof来判断
浏览器前进，后退(history)
history.back()//后退
history.forward()//前进
screen的信息(screen)
screen.height//屏幕高度
screen.width//屏幕宽度
链接的信息(location)
location.host//链接的host地址
location.href//链接的url
location.hash//链接的#后面的内容
location.pathname//链接的路径
location.search//链接的参数