操作dom(增删改查) 获取元素尺寸/获取浏览器窗口尺寸 获取元素偏移量

增删改查

// html
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

//  js
// 1.创建元素节点

        var myLi = document.createElement('li');
        

        myLi.innerHTML = '11111';
        console.log(myLi);

        // 获取ul标签
        var oUl = document.querySelector('ul');
        var oLi = document.getElementsByTagName('li')[1];

        // 增加dom (增加到最后)
        oUl.appendChild(myLi);

        // 增加dom  (增加到最后)
        oUl.insertBefore(myLi,null);

        // 增加dom  (增加到开始)
        oUl.insertBefore(myLi,oUl.firstElementChild);
        
        //删除节点
        oUl.removeChild(oUl.firstElementChild);

        //修改某一个节点    
        oUl.replaceChild(myLi,oLi);

获取元素尺寸/获取浏览器窗口尺寸

// css
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            border: 10px solid #000;
            padding: 40px;
            margin: 50px;
        }
    </style>
    
// html
    <div></div>

        var oDiv = document.querySelector('div');

        // 1.获取元素的宽高
        // offsetXXX     =>  实际宽高 + padding + border
        console.log(oDiv.offsetWidth);   // 获取元素的宽度
        console.log(oDiv.offsetHeight);   // 获取元素的高度

        // clientXXX   =>  实际宽高 + padding
        console.log(oDiv.clientWidth);
        console.log(oDiv.clientHeight);
        
        // 2.获取浏览器窗口尺寸
        // window.innerXXX  =>  会计算页面元素溢出产生的滚动条宽高
        console.log(window.innerHeight);  // 高度
        console.log(window.innerWidth);  // 宽度

        // document.documentElement.clientXXX  =>  不会计算滚动条(只计算浏览器可视区域)
        document.documentElement.clientHeight
        document.documentElement.clientWidth

获取元素偏移量

    var box2 = document.querySelector('.box2');

    // 获取元素相对父级   元素.offsetParent
    console.log(box2.offsetParent);

    // 获取元素的偏移量
    console.log(box2.offsetLeft);  // 左边偏移量
    console.log(box2.offsetTop);   // 上边偏移量