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>