jacascript DOM节点——节点内容

前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

innerHTML

  在读模式下,返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的 HTML 标记;

  在写模式下,innerHTML 会根据指定的值创建新的 DOM 树,然后用这个 DOM 树完全替换调用元素原先的所有子节点

  如果将 innerHTML 属性设为空,等于删除所有它包含的所有节点;

  对 innerHTML 属性用"+="操作符重复追加一小段文本通常效率低下,因为它既要序列化又要解析;所以我们一般把"+="操作符重复追加的文本用变量存起来,然后再把变量传给 innerHTML ;

outerHTML

  outerHTML 同样可读可写,与 innerHTML 相比,它包含被查询元素的开始和结束标签(包含它自己)。

  在读模式下 outerHTML 返回调用它的元素及所有子节点的 HTML 标签;

  在写模式下,outerHTML 会根据指定的 HTML 字符串创建新的 DOM子树,然后用这个DOM子树完全替换调用元素;

    <div class="wrapper">
        aaaaaaaaa
        <span class="test">hello world!</span>
        bbbbbbbbb
    </div>
    <div class="addinnerhtml"></div>
    <script type="text/javascript">
        var oWrapper = document.getElementsByClassName('wrapper')[0];
        var oAddhtml = document.getElementsByClassName('addinnerhtml')[0];
        //写入
        oAddhtml.innerHTML = '<input type="text" placeholder="添加成功">';

        console.log(oWrapper.innerHTML);
        //aaaaaaaaa<span class="test">hello world!</span>bbbbbbbbb
        console.log(oWrapper.outerHTML);
        //<div class="wrapper">aaaaaaaaa<span class="test">hello world!</span>bbbbbbbbb</div>
    </script>

 

innerText

  innerText 属性可以操作元素中包含的所有文本内容,包括子文档树中的文本;

  在通过 innerText 读取值时,它会按照由浅入深地顺序,将子文档树中的所有文本拼接起来;

  在通过 innerText 写入值时,结果会删除元素的所有子节点,插入包含相应文本值的文本节点;

  设置 innerText 属性只会生成当前节点的一个子文本节点Text。因此,可以利用将 innerText 设置为等于 innerText 来去掉当前元素内部的所有 HTML 标签;

outerText

  在读取文本值时,outerText 与 innerText 的结果完全一样;

  但在写模式下,outerText 不只是替换调用它的元素的子节点,而是会替换整个元素

textContent

  textContent 属性与 innerText 属性类似,该属性可读写。IE8及以下不支持;

  在读模式下,返回当前节点和它的所有后代节点的文本内容;

  在写模式下,结果会删除元素的所有子节点,插入包含相应文本值的文本节点;

  与 innerText 不同的是,textContent 属性不仅属于元素节点 ElementNode,而是属于所有节点 Node(包括文本节点);

        <div class="wrapper">
            aaaaaaaaa
            <span class="test">hello world!</span>
            bbbbbbbbb
        </div>
        <script type="text/javascript">
            var oWrapper = document.getElementsByClassName('wrapper')[0];
            
            console.log(oWrapper.innerText);//aaaaaaaaa hello world! bbbbbbbbb
            console.log(oWrapper.outerText);//aaaaaaaaa hello world! bbbbbbbbb
            
            console.log(oWrapper.textContent);//aaaaaaaaa hello world! bbbbbbbbb
            
            var oText = oWrapper.childNodes[0];
            console.log(oText.textContent);//aaaaaaaaa
            console.log(oText.innerText);//undefined
        </script>

 

posted @ 2017-04-16 22:58  快乐锁  阅读(476)  评论(0编辑  收藏  举报