DOM对象

最新推荐文章于 2023-09-05 15:52:34 发布

sweetllh

最新推荐文章于 2023-09-05 15:52:34 发布

阅读量366

点赞数 1

分类专栏： javascript 面向对象文章标签：对象 dom

本文链接：https://blog.csdn.net/sweetllh/article/details/70336340

版权

javascript 同时被 2 个专栏收录

73 篇文章 3 订阅

订阅专栏

面向对象

28 篇文章 1 订阅

订阅专栏

DOM就是DocumentObjectModel，文档对象模型。赋予JS操作节点的能力。当网页加载时，浏览器会创建页面的DOM。
 查找HTML元素
1. document.getElementById(‘id’)，不建议使用id，后端开发人员使用
2. document.getElementsByTagName(‘tag’);
3. document.getElementsByClassName(‘.class’);
4. document.getElementsbyName(‘name’)
5. document.querySelector(‘selector’)/document.querySelectorAll(‘selector’);
JS可以根据获取到的对象，对HTML元素，属性，样式做出修改
 DOM节点
1. childNodes 获取当前节点下的所有子节点
节点分为文本节点和元素节点两种
可以通过nodeType属性判断是那一种节点
2. children 和childNodes是一样的，但是不包含文本节点，兼容ie6~ie8
3. parentNode 获取父节点

DOM

获取第一个子元素
firstChild(IE), firstElementChild
获取最后一个子元素
lastChild(IE), lastElementChild
获取兄弟元素
nextSibling(IE), nextElementSibling，获取当前元素的下一个兄弟元素
previousSibling(IE), previousElementSibling，获取当前元素的上一个兄弟元素
操作元素的属性
1 object.属性 = xxx
2 object.属性 = xxx
3 通过DOM的方式修改
object.setAttribute(‘属性’, ‘值’) 设置新的样式
object.getAttribute(‘属性’) 获取样式的内容
object.removeAttribute(‘属性’) 删除样式

对DOM进行操作
创建元素：document.createElement(元素的名称)
在元素最后添加子节点：object.appendChild(元素对象)
创建文本节点：document.createTextNode(文本)也可以直接使用innerHTML赋值
在元素最前面插入子节点：object.inertBefore(插入的节点, 在那个节点前)
删除一个节点:父节点.removeChild(DOM里的节点);
添加子节点的优化：document.createDocumentFragment
如果是使用appendChild进行添加子节点，使用优化和不优化效率基本上是一致，如果使用insertBefore优化的情况效率大大的高于不优化

DOM操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM操作</title>
    </head>
    <body>
        <div><input type="button" value="追加li" onclick="demo01()"/></div>
        <div>
            <input type="text" name="text1" />
            <input type="button" value="追加li并添加文本" onclick="demo02()"/>
        </div>
        <div>
            <input type="text" name="text2" />
            <input type="button" value="插入li" onclick="demo03()"/>
        </div>
        <ul id="ul"></ul>
    </body>
<script>
    /**
     * 创建li元素并添加到ul元素中
     */
    function demo01(){
        // 如果需要创建div标签，把li替换为div，其它标签类同
        var oLi = document.createElement('li');
        // 获取到ul标签对象
        var oUl = document.getElementById('ul');
        // 把li添加到ul当中
        oUl.appendChild(oLi);
    }

    /**
     * 创建文本节点添加到li中
     */
    function demo02(){
        // 如果需要创建div标签，把li替换为div，其它标签类同
        var oLi = document.createElement('li');
        // 获取到ul标签对象
        var oUl = document.getElementById('ul');
        // 把li添加到ul当中
        oUl.appendChild(oLi);

        // 从name=text1的文本框中获取内容
        var text1 = document.getElementsByName('text1')[0]
        var text1Value = text1.value;
        /*// 创建一个文本节点
        var textNode = document.createTextNode(text1Value);
        // 把文本节点添加到li
        oLi.appendChild(textNode);*/

        // 除了创建文本节点，还可以通过innerHTML添加文本
        oLi.innerHTML = text1Value;
    }

    function demo03(){
        // 如果需要创建div标签，把li替换为div，其它标签类同
        var oLi = document.createElement('li');
        // 获取到ul标签对象
        var oUl = document.getElementById('ul');

        // 获取到ul里的任意一个节点，在这个节点之前插入新的节点
        // 先得到ul下的所有节点
        var oChildren = oUl.children;

        // 添加文本内容
        oLi.innerHTML = document.getElementsByName('text2')[0].value;
        // 如果ul没有节点使用假加方式添加节点
        if (oChildren.length == 0){
            oUl.appendChild(oLi);   
        }else{
        // 如果ul有节点使用随机数决定在那个节点插入
            //Math.random()//产生0~1之间的随机数
            //Math.random() * children.length//可以得到0~长度之间的一个随机数
            var pos = parseInt(Math.random() * oChildren.length);//根据数组的长度随机产生一个下标
            // 把li添加到ul当中
            oUl.insertBefore(oLi, oChildren[pos]);
        }


    }
</script>
</html>

删除节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>删除节点</title>
    </head>
    <body>
        <ul>
            <li><a href="#">删除1</a></li>
            <li><a href="#">删除2</a></li>
            <li><a href="#">删除3</a></li>
            <li><a href="#">删除4</a></li>
            <li><a href="#">删除5</a></li>
        </ul>
    </body>
<script>
(function(){
    var oAes = document.getElementsByTagName('a');
    for(var i=0,length=oAes.length;i<length;i++){
        oAes[i].onclick = function(){
            // 通过a标签parentNode获取到它的父标签li
            var li = this.parentNode;
            // 获取到ul标签的对象
            var ul = document.getElementsByTagName('ul')[0];
            // 通过ul标签对象移除它里面的子标签li


            //li = document.createElement('li'); // 不能删除一个不在DOM结构里的节点
            ul.removeChild(li);
        };
    }
})();
</script>
</html>

添加节点的优化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>添加节点的优化</title>
    </head>
    <body>
        <ul id="ul1"></ul>
        <ul id="ul2"></ul>
    </body>
<script>
    // 添加10000个节点
    var times = 10000;
    var start;
    var end;

    // 没有优化
    function foo1(){
        var ul = document.getElementById('ul1');

        for (var i=0;i<times;i++){
            var li = document.createElement('li');
            var textNode = document.createTextNode('1');

            // li.appendChild(textNode);
            // ul.appendChild(li);  //添加时会修改DOM结构
            var children = ul.children;
            if (children.length > 2){
                ul.insertBefore(li, children[parseInt(Math.random() * children.length)]);
            }else{
                ul.appendChild(li); //添加时会修改DOM结构
            }
        }
    }
    // 优化节点的添加
    function foo2(){
        var ul = document.getElementById('ul2');
        var cdf = document.createDocumentFragment();

        for (var i=0;i<times;i++){
            var li = document.createElement('li');
            var textNode = document.createTextNode('1');

//          li.appendChild(textNode)
//          cdf.appendChild(li);    // 添加没有修改DOM的结构
            var children = ul.children;
            if (children.length > 2){
                cdf.insertBefore(li, children[parseInt(Math.random() * children.length)]);

            }else{
                cdf.appendChild(li);    //添加时不会修改DOM结构，所以效率会更高
            }
        }
        ul.appendChild(cdf);
    }


    start = new Date();
    foo1();
    end = new Date();
    console.log('没有优化，共花费了' +(end.getTime() - start.getTime()) + '毫秒');

    start = new Date();
    foo2();
    end = new Date();
    console.log('优化后，共花费了' +(end.getTime() - start.getTime()) + '毫秒');
</script>
</html>

表格的操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格的操作</title>
    </head>
    <body>

<div>
    序号：<input type="text" name="id" />
    姓名：<input type="text" name="name" />
    年龄：<input type="text" name="age" />
    <input type="button" value="添加" onclick="addData()" />
</div>      

<table border="1" width="500">
    <thead>
        <tr><th>序号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>张三</td><td>19</td><td></td></tr>
        <tr><td>2</td><td>李四</td><td>29</td><td></td></tr>
        <tr><td>3</td><td>王五</td><td>26</td><td></td></tr>
        <tr><td>4</td><td>赵六</td><td>20</td><td></td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="4">2017年4月21日制</td></tr>
    </tfoot>
</table>
    </body>
<script>
    var oTable = document.querySelector('table');

    console.log('thead: ');
    console.log(oTable.tHead);      // 格式里必须使用<thead>标签才可以获取这部分内容
    console.log('bodies: ');
    console.log(oTable.tBodies);    // <tbody>标签可以不写，得到的结果是一个数组
    console.log('tfoot: ');
    console.log(oTable.tFoot);      // 格式里必须使用<tfoot>标签才可以获取这部分内容

    // 可以通过rows和cells获取td里的内容
    // rows等同于tr
    // cells等同于td
    console.log('thead的第一个元素是：' + oTable.tHead.rows[0].cells[0].innerHTML);
    console.log('tbody的第二行第三个元素是：' + oTable.tBodies[0].rows[1].cells[2].innerHTML);

    // 隔行变色
    function foo1(){
        for (var i=0;i<oTable.tBodies[0].rows.length;i++){
            if (i%2==0){
                oTable.tBodies[0].rows[i].style.backgroundColor = 'lightblue';
            }else{
                oTable.tBodies[0].rows[i].style.backgroundColor = 'lightgreen';
            }
        }
    }
    // 高光效果
    function foo2(){
        for (var i=0;i<oTable.tBodies[0].rows.length;i++){
            var oldBGColor;
            oTable.tBodies[0].rows[i].onmouseover = function(){
                // 记录原有的背景颜色
                oldBGColor = this.style.backgroundColor; 
                this.style.backgroundColor = 'lightpink';
            };
            oTable.tBodies[0].rows[i].onmouseout = function(){
                this.style.backgroundColor = oldBGColor;
            };
        }
    }

    /**
     * 把文本框输入的内容动态添加到表格里
     */
    function addData(){
        // 1. 获取到所有的input标签
        var oInputs = document.getElementsByTagName('input');
        // 2. 拼接td
        var sTd = '<td>' + oInputs[0].value + 
                  '</td><td>' + oInputs[1].value + 
                  '</td><td>' + oInputs[2].value + 
                  '</td><td><a href="#">删除</a></td>';
        // 3. 创建tr节点
        var oTr = document.createElement('tr');
        // 4. 把td字符添加到tr节点
        oTr.innerHTML = sTd;
        // 5. 给删除添加事件
        //console.log(oTr.children[3]);
        // oTr的第4个子节点是td，要给a标签绑定事件，需要继续获取td的子节点
        oTr.children[3].children[0].onclick = function(){
            //alert(1);
            deleteTr(this);
        };
        // 3. 往todies里追加一行
        oTable.tBodies[0].appendChild(oTr)

        foo1(); //颜色相间
        foo2(); //高光效果
    }

    /**
     * 从bodies里删除一行
     * @param {Object} a        点击的a标签
     */
    function deleteTr(a){
        var tr = a.parentNode.parentNode;
        oTable.tBodies[0].removeChild(tr);
    }

    foo1();
    foo2();
</script>
</html>

DOM操作元素属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM操作元素属性</title>
    </head>
    <body>
        <ul>
            <li></li>                                       <!-- 点击后添加背景色 -->
            <li style="background-color:lightcyan"></li>    <!-- 点击后修改背景色 -->
            <li style="background-color:lightsalmon;"></li> <!-- 点击后删除背景色 -->
        </ul>
        <input type="button" value="修改" id="button" />
    </body>
<script>
    (function(){
        // 1. 获取button，绑定一个点击事件
        document.querySelector('#button').onclick = function(){
            // 2. 获取到ul下的子元素
            var oLies = document.querySelector('ul').children;
            // 3. 给第1个li添加背景色
            oLies[0].setAttribute('style', 'background-color:lightcyan;');
            // 4. 给第2个li修改背景色
            oLies[1].setAttribute('style', 'background-color:lightsalmon');
            // 5. 给第3个li删除背景色
            console.log('第3个li的原背景色是：' + oLies[2].getAttribute('style'));
            oLies[2].removeAttribute('style');
        };
    })();
</script>
</html>

获取第一个或最后一个子元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>获取第一个或最后一个子元素</title>
    </head>
    <body>
        <ul>
            <li>第1行</li>
            <li>第2行</li>
            <li>第3行</li>
            <li>第4行</li>
            <li>第5行</li>
        </ul>
    </body>
<script>
    var oUl = document.querySelectorAll('ul')[0]
    // oUl.firstChild.style.backgroundColor = 'lightgray';
    // oUl.firstElementChild.style.backgroundColor = 'lightgray';

    //currentStyle
    //getComputedStyle()

    if (oUl.firstElementChild){ // 如果返回值不是undefined表示是一个非IE的浏览器
        oUl.firstElementChild.style.backgroundColor = 'lightblue';
    }else{
        oUl.firstChild.style.backgroundColor = 'lightblue';
    }

    if (oUl.lastElementChild){ // 非IE
        oUl.lastElementChild.style.backgroundColor = 'lightgreen';
    }else{
        oUl.lastChild.style.backgroundColor = 'lightgreen';
    }
</script>
</html>

兄弟元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>兄弟元素</title>
    </head>
    <body>
        <ul>
            <li>第1行</li>
            <li>第2行</li>
            <li class="center">第3行</li>
            <li>第4行</li>
            <li>第5行</li>
        </ul>
    </body>
<script>
    var oCenterLi = document.querySelector('.center');
    if(oCenterLi.nextElementSibling){   // 非IE
        oCenterLi.nextElementSibling.style.backgroundColor = 'lightcoral';  //第4行
        oCenterLi.nextElementSibling.nextElementSibling.style.backgroundColor = 'lightcoral';   //第5行
    }else{
        oCenterLi.nextSibling.style.backgroundColor = 'lightcoral';
    }

    if (oCenterLi.previousElementSibling){
        oCenterLi.previousElementSibling.style.backgroundColor = 'lawngreen';
    }else{
        oCenterLi.previousSibling.style.backgroundColor = 'lawngreen';
    }
</script>
</html>