DOM中常用的方法

来源：互联网发布：知乎海贼王回答集锦编辑：程序博客网时间：2024/04/30 05:50

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>

（完）

阅读全文

0 0