DOM中常用的方法

最新推荐文章于 2022-04-08 11:58:16 发布

aomize

最新推荐文章于 2022-04-08 11:58:16 发布

阅读量407

点赞数

分类专栏： JavaScript 文章标签： dom

本文链接：https://blog.csdn.net/aomize/article/details/78219595

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

DOM中常用的方法

（1）创建元素节点 createElement()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="box"></div>

    <script type="text/javascript">
        var parent = document.getElementById('box');  //父元素
        var node = document.createElement('li');  //创建元素节点

        parent.appendChild(node);
    </script>
</body>
</html>

这里写图片描述

（2）创建文本节点 createTextNode()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="sup">
        <a id="sub"></a>
    </div>

    <script type="text/javascript">
        var child = document.getElementById('sub');
        var text = document.createTextNode('hello'); //创建文本节点

        child.appendChild(text);
    </script>
</body>
</html>

这里写图片描述

（3）创建属性节点 createAttribute()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <a id="sub">hello</a>

    <script type="text/javascript">
        var child = document.getElementById('sub');
        var attr = document.createAttribute('href');  //创建属性节点

        attr.value = 'http://www.baidu.com';
        child.setAttributeNode(attr);  //将属性添加到元素上
    </script>
</body>
</html>

这里写图片描述

（4）删除节点 removeChild()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="box">
        <span id="sub">hello</span>
        <span>world</span>      
    </div>  
    <script type="text/javascript">
        var parent = document.getElementById('box');
        var child = document.getElementById('sub');

        parent.removeChild(child);
    </script>
</body>
</html>

这里写图片描述

（5）插入节点

插入节点有两种方法，分别是appendChild()和insertBefore()

1）appendChild()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="sup">
        <div id="sub">
            <p>hello world</p>
            <a id="link" href="http://www.baidu.com">百度</a>
        </div>
    </div>

    <script type="text/javascript">
        var sub = document.getElementById('sub');
        var insertNode = document.createElement('span');

        sub.appendChild(insertNode);
    </script>
</body>
</html>

这里写图片描述

2）insertBefore()

insertBefore()接收两个参数：要插入的节点和作为参照的节点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="sup">
        <div id="sub">
            <p>hello world</p>
            <a id="link" href="http://www.baidu.com">百度</a>
        </div>
    </div>

    <script type="text/javascript">
        var sub = document.getElementById('sub');
        var link = document.getElementById('link');
        var insertNode = document.createElement('span');

        sub.insertBefore(insertNode, link);
    </script>
</body>
</html>

这里写图片描述

注：当第二个参数为null时，其效果与appendChild()方法一样

（6）替换节点 replaceChild()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="box">
        <a id="link">百度</a>
    </div>

    <script type="text/javascript">
        var parent = document.getElementById('box');
        var link = document.getElementById('link');
        var node = document.createElement('span');

        parent.replaceChild(node, link);
    </script>
</body>
</html>

这里写图片描述

（7）复制节点 cloneChild()

该方法接受一个布尔值参数，表示是否执行深复制。参数为true时表示深复制，参数为false时表示浅复制

深复制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="sup">
        <div id="sub">
            <a href="http://www.baidu.com">百度</a>
        </div>
    </div>

    <script type="text/javascript">
        var parent = document.getElementById('sup');
        var child = document.getElementById('sub');
        var clone = child.cloneNode(true);

        parent.appendChild(clone);
    </script>
</body>
</html>

这里写图片描述

浅复制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="sup">
        <div id="sub">
            <a href="http://www.baidu.com">百度</a>
        </div>
    </div>

    <script type="text/javascript">
        var parent = document.getElementById('sup');
        var child = document.getElementById('sub');
        var clone = child.cloneNode(false);

        parent.appendChild(clone);
    </script>
</body>
</html>

这里写图片描述

（8）设置属性 setAttribute()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <a id="link" href="http://www.baidu.com">百度</a>

    <script type="text/javascript">
        var link = document.getElementById('link');
        var attr = link.setAttribute('class', 'link');
    </script>
</body>
</html>

这里写图片描述

（9）获取属性 getAttribute()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <a id="link" href="http://www.baidu.com">百度</a>

    <script type="text/javascript">
        var link = document.getElementById('link');
        var attr = link.getAttribute('href');

        console.log(attr);   // http://www.baidu.com
    </script>
</body>
</html>