JavaScript-dom的基本操作

1：增

元素节点的生成 document.createElement();

        var div=document.createElement('div');

这个操作只是生成了一个div对象，但是没有放在body里面。

但是的确生成了，还么用而已，我们只是需要插入到页面而已。

文本节点的生成 document.createTextNode();

        var text=document.createTextNode('cyl');

里面加上你想要的内容。需要插入操作。

注释节点的生成document.createComment();

同理把内容加进出就好了，也需要插入操作。

文档碎片节点的生成document.createDocumentFragment();

插

parentNode.appendChild();

看人代码:

        <div></div>
        <span></span>
        <script type='text/javascript'>
        var div=document.getElementsByTagName('div')[0];
        var span=document.getElementsByTagName('span')[0];
        var text=document.createTextNode('cyl');
        span.appendChild(text);
        div.appendChild(span);

本来div span是并列结构，而且span里面没有什么东西。

把生成的节点丢进去就可以了。

parentNode.insertBefor(a,b);

在b的前面插入a

        <div></div>
        <span></span>
        <script type='text/javascript'>
        var div=document.getElementsByTagName('div')[0];
        var span=document.getElementsByTagName('span')[0];
        var text=document.createTextNode('cyl');
        span.appendChild(text);
        div.appendChild(span);
        var span1=document.createElement('span');
        div.insertBefore(span1,span);
        </script>

我继续生成一个span加到div里面span的前面。

删

parentNode.removeChild();

在刚刚的状态下，继续操作。

应该看明白了吧。

上一级调用removeChild();就把对应的标签删除。

remove();

的确都删除了。

替换

parentNode.replaceChild(new,origin)

把它子孙的元素节点替换了

        <div></div>
        <script type='text/javascript'>
        var div=document.getElementsByTagName('div')[0];
        var span=document.createElement('span');
        div.appendChild(span);
        var a=document.createElement('a');
        </script>

应该很简单。

Element的属性

1：innerHTML

        <div>
            123
        </div>
        <script type='text/javascript'>
        var div=document.getElementsByTagName('div')[0];
        </script>

我们直接使用属性innerHTML表示查看，如果加=,+=时就是覆盖和加上值了。

2innerText||textContent

取文本内容

        <div>
            <span>123</span>
            <em>456</em>
        </div>
        <script type='text/javascript'>
        var div=document.getElementsByTagName('div')[0];
        </script>

有一些区别的。

3：查看添加元素节点的属性

ele.setAttribute();添加

ele.getAttribute();查看

        <div>
            <span>123</span>
            <em>456</em>
        </div>
        <script type='text/javascript'>
        var div=document.getElementsByTagName('div')[0];
        </script>

操作大致就是这样的。

JavaScript-dom的基本操作

猜你喜欢