查找节点，文档碎片，元素尺寸

查找节点


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div>div1</div>
  <ul>
    <li>红烧鲤鱼</li>
    <li>回锅肉</li>
    <li>麻辣小龙虾</li>
  </ul>
    <script>
        // 在DOM树里，可以从一个元素出发找到其他任意一个元素，虽然一般也不用这么麻烦，但是这个道理要明白

        var ul = document.querySelector('ul')
        // 从ul出发找div，应该是上一个兄弟元素
        console.log(ul.previousElementSibling)

        // 红烧鲤鱼
        console.log(ul.firstElementChild)
        // 麻辣小龙虾
        console.log(ul.lastElementChild)
        // 如果要获取中间的，那么找到所有子元素再通过下标来取
    </script>
</body>
</html>



文档碎片



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<ul></ul>
<body>
    <script>
        var ul = document.querySelector('ul')
        // 往ul里加入10个li
        // 1、这种写法创建10个li，append 10次，进行了10次DOM操作
        // for(var i = 0; i < 10; i++){
        //     var li = document.createElement('li')
        //     li.innerHTML = i + 1
        //     ul.appendChild(li)
        // }

        // 2、可以用一个文档碎片先把10个li放入碎片里
        // 然后只需要一次把碎片插入ul就行了，这样就只有一次DOM操作了
        // 这种写法虽然看起来更麻烦，但是减少了DOM操作的次数，性能更优
        var cache = document.createDocumentFragment()
        for(var i = 0; i < 10; i++){
            var li = document.createElement('li')
            li.innerHTML = i + 1
            // li放到文档碎片（cache）里
            // 这里的append是在计算机里操作的，不是在页面上操作的
            cache.appendChild(li)
        }
        // 当for结束以后把cache插入到ul里
        ul.appendChild(cache)
    </script>
</body>
</html>


元素尺寸


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
          width: 200px;
          height: 300px;
          background: red;
        }
    </style>
</head>
<div class="box"></div>
<body>
    <script>
        var box = document.querySelector('.box')

        // box.style 这种方式只能获取或者设置行内样式
        console.log(box.style.width)

        // 获取内部或者外部的样式
        // 非IE浏览器写法
        var width = getComputedStyle(box,false).width
        console.log(width)

        // 根据兼容性封装一个获取是最终生效的样式，无论是行内还是内部或者外部
        // obj: 要获取样式的对象
        // attr: 属性名
        function getStyle(obj,attr){
            if(obj.currentStyle){
                // 判断Obj有currentStyle这个属性，说明使用的是IE浏览器
                return obj.currentStyle[attr]
            }else{
                // obj没有currentStyle这个属性，说明用的不是IE
                return getComputedStyle(obj, false)[attr]
            }
        }

        var height = getStyle(box, 'height')
        console.log(height)
    </script>
</body>
</html>
dfc_dfc
发布了60 篇原创文章 · 获赞 3 · 访问量 526
私信关注
查找节点，文档碎片，元素尺寸

猜你喜欢
