【学习笔记42】操作DOM

---

一、操作DOM

• 常规意义上的操作DOM, 就是增删改查

1、步骤

1. 创建 (创建完成之后, 页面并不会有)
2. 增删改查

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

2、创建元素节点

• 语法：document.createElement(标签对象);

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

3、创建文本节点

• 语法：document.createTextNode(文本内容);

        var myStr = document.createTextNode('我是li标签');
        console.log(myStr);

将文本节点写到元素节点中去

        // 创建元素节点
        var myLi = document.createElement('li')

        // 创建文本节点
        var myStr = document.createTextNode('我是li标签');
        
        myLi.appendChild(myStr);
        console.log(myLi);

4、增加dom(添加到指定父节点的最后)

• 语法：父节点.appendChild(创建的元素节点);

        // 创建元素节点
        var myLi = document.createElement('li')

        // 创建文本节点
        var myStr = document.createTextNode('我是li标签');
        myLi.appendChild(myStr);
        console.log(myLi);

        // 获取标对象签
        var oUl = document.querySelector('ul') ;

        // 增加dom(添加到指定父节点的最后)
        oUl.appendChild(myLi);

5、增加dom(添加到指定父节点的最后)

• 语法：父节点.insertBefore(要插入的新节点, 插入到那个节点前(传递Null的话是插入到父节点最后))

        // 创建元素节点
        var myLi = document.createElement('li')

        // 创建文本节点
        var myStr = document.createTextNode('我是li标签');
        myLi.appendChild(myStr);
        console.log(myLi);

        // 获取标对象签
        var oUl = document.querySelector('ul') ;

        // 增加dom(添加到指定父节点的最后) 
        oUl.insertBefore(myLi, null);

6、增加dom(添加到父节点的最前边)

        // 创建元素节点
        var myLi = document.createElement('li')

        // 创建文本节点
        var myStr = document.createTextNode('我是li标签');
        myLi.appendChild(myStr);
        console.log(myLi);

        // 获取标对象签
        var oUl = document.querySelector('ul') ;

        // 增加dom(添加到父节点的最前边)
        oUl.insertBefore(myLi, oUl.firstElementChild);

7、删除DOM

• 语法：父节点.removeChild(要删除的节点);

        // 获取标对象签
        var oUl = document.querySelector('ul') ;

        // 删除DOM   
        oUl.removeChild(oUl.firstElementChild);

8、修改某一个节点

语法：父节点.replaceChild(新的节点, 要被修改的节点);

        // 创建元素节点
        var myLi = document.createElement('li')

        // 创建文本节点
        var myStr = document.createTextNode('我是li标签');
        myLi.appendChild(myStr);
        console.log(myLi);

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

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

二、克隆DOM

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

1、说明

        var oUl = document.querySelector('ul');
        var oLi = document.querySelector('li');

        console.log(oUl);
        console.log(oLi);
        oUl.appendChild(oLi);    

2、复制(克隆)一个LI

• 语法：想要复制的节点.cloneNode(参数布尔值)
• 参数false不克隆子节点(默认)
• 参数true克隆子节点

        var oUl = document.querySelector('ul');
        var oLi = document.querySelector('li');

        var newLi = oLi.cloneNode(true);
        oUl.appendChild(newLi);

三、获取元素尺寸(占地面积)

    <div></div>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 4000px;
            height: 5000px;
            background-color: pink;
            padding: 50px;
            border: 10px solid black; 
            margin: 50px;
        }
    </style>

1. offsetXXX —> 实际宽度 + padding + border
2. clientXXX —> 实际宽度 + padding

        var oDiv = document.querySelector('div')

        // 1. offsetXXX         ---> 实际宽度 + padding + border
        console.log('oDiv.offsetWidth：', oDiv.offsetWidth);
        console.log('oDiv.offsetHeight：', oDiv.offsetHeight);

        console.log('----------------------------')

        // 2. clientXXX         ---> 实际宽度 + padding
        console.log('oDiv.clientWidth：', oDiv.clientWidth);
        console.log('oDiv.clientHeight：', oDiv.clientHeight);

四、获取浏览器窗口尺寸

    <div></div>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 4000px;
            height: 5000px;
            background-color: pink;
            padding: 50px;
            border: 10px solid black; 
            margin: 50px;
        }
    </style>

1. window.innerXXX —> 计算时会包含浏览器的滚动条
2. document.documentElement.clientXXX —> 计算时不会计算滚动条(只计算浏览器的可视区域)

        var oDiv = document.querySelector('div')

        // 1. window.innerXXX   ---> 计算时 会包含浏览器的滚动条
        console.log('window.innerWidth', window.innerWidth)
        console.log('window.innerHeight', window.innerHeight)

        // 2. document.documentElement.clientXXX    ---> 计算时 不会计算滚动条(只计算浏览器的可视区域)
        console.log('document.documentElement.clientWidth', document.documentElement.clientWidth)
        console.log('document.documentElement.clientWidth', document.documentElement.clientHeight)

五、获取元素偏移量

    <div class="box1">
        <div class="box2"></div>
    </div>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box1 {
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            left: 100px;
            top: 200px;
        }
    </style>

• 元素.offsetParent
• 元素.offsetLeft
• 元素.offsetTop

        // 0. 获取元素
        var box2 = document.querySelector('.box2');

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


        // 2. 获取元素的偏移量
        console.log('box2.offsetLeft', box2.offsetLeft);
        console.log('box2.offsetTop', box2.offsetTop);