DOM 插入标记

来源:互联网 发布:如何进入淘宝试用中心 编辑:程序博客网 时间:2024/03/28 18:53
插入标记
    如果用createElement(),appendChild()这样一个一个的创建、添加元素的话是比较麻烦的,相对来说,使用插入标记技术,直接插入HTML标记字符串不仅简单而且快速,以下插入标记DOM扩展已经纳入到HTML5中。

1.innerHTML
    -在读模式下,innerHTML会返回调用元素的所有子节点
        例如:<div><p>啦啦啦德玛西亚</p></div>
        alert(div.innerHTML);   //<p>啦啦啦德玛西亚</p>
  
    -在写模式下,innerHTML的值会被解析成DOM的子树,然后将这个新的DOM树取代调用元素原本所有子节点。因为他的值被认为是HTML
        例如:div.innerHTML="啦啦啦德玛西亚"   //如果值仅是纯文本没有html标签的话,那么结果就是设置纯文本
                    //<div>啦啦啦德玛西亚</div>

        如果值里面有html标签,那么结果就不一样了
        例如:div.innerHTML="啦啦啦德玛<b>西亚<b>";
                    //<div>啦啦啦德玛<b>西亚</b></div>

*为innerHTML设置HTML字符串后,浏览器会将这个字符串解析为相应的DOM树。因此设置了innerHTML之后,再从中读取HTML字符串,或得到与设置时不一样的结果。原因在于返回的字符串是根据原始HTML字符串创建的DOM树经过序列化之后的结果。(此处有疑问,知道的朋友希望在下面留言解惑)

<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body><div id="div"> <ul>  <li>1</li>  <li>2</li>  <li>3</li> </ul></div><script type="text/javascript"> var div=document.getElementById('div'); console.log(div.innerHTML); setTimeout(function(){  div.innerHTML="<p>德玛西亚德玛西亚</p>英雄联盟";  console.log(div.innerHTML); },1000);</script></body></html>
结果:
第一次 console.log(div.innerHTML)输出的是
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
第二次 console.log(div.innerHTML)输出的是
<p>德玛西亚德玛西亚</p>英雄联盟


*使用innerHTML属性的一些限制,例如在大多数浏览器中,innerHTML中插入<script>是无法执行的。IE8及更早版本是唯一能在这种情况下执行脚本的浏览器,但必须满足一些条件。一是比较为<script>指定defer属性,二是<script>元素必须位于(微软所谓的)"有作用域元素"之后,<script>元素被认为是“无作用域的元素”,也就是在页面中看不到的元素,与<style>元素或注释类似。
    div.innerHTML="<script defer>alert('hi');</script>";    //无效
    div.innerHTML="_<script defer>alert('hi')</scirpt>";   //有效   “_”是文本节点,是有作用域元素

2.outerHTML
    -返回调用的元素及其子元素
    例如:div.outerHTML="<p>啦啦啦</p>";  此处代码效果等同下面
              <!--------------------------------------------------->
               var p=document.createElement('p');
               p.appendChild(document.createTextNode('啦啦啦'));
               div.parentNode.replaceChild(p,div);

3.insertAdjacentHTML()方法
    -这个方法接收两个参数,插入的位置还有插入的HTML文本,第一个参数必须是下列值之一
        -beforebegin     在当前元素之前插入一个紧邻的同辈元素
        -afterbegin     在当前元素之下插入新子元素或在第一个子元素之前再插入新的子元素
        -beforeend     在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素
        -afterend    在但却元素之后插入一个紧邻的同辈元素。
        注意:这些值得小写


//作为前一个同辈元素插入
element.insertAdjacentHTML('beforebegin','<p>hello world</p>');
//作为第一个子元素插入
element.insertAdjacentHTML('afterbegin','<p>hello world</p>');
//作为最后一个子元素插入
element.insertAdjacentHTML('beforeend','<p>hello world</p>');
//作为后一个同辈元素插入
element.insertAdjacentHTML('beforebegin','<p>hello world</p>');

4.内存与性能问题
    使用以上方法替换子节点可能会导致浏览器的内存占用问题,尤其是在IE中。在删除带有时间处理程序或应用了其他javascript对象子树时,就有可能导致内存占用问题。假如某元素有一个事件处理程序,在使用上面某个属性将该元素删除后,元素与事件处理程序直接的绑定关系在内存中并没有一并删除。如果这种情况多了,页面占用内存数量就会明显增加,因此在使用outerHTML 、 innerHTML 和 insertAdjacentHTML 时,最好先手工删除要替换的元素的所有时间处理程序和javascript属性 

*在用innerHTML 添加很多子节点时 
for(var i=0,leng=values.length;i<len;i++)
{
       ul.innerHTML+="<li>"+value[i]+"</li>";    //要避免这种频繁操作!!
}
应该这样
var str="";
for(var i=0,leng=valuse.length;i<len;i++)
{
       str+="<li>"+value[i]+"</li>"; 
}
ul.innerHTML=str;
/*
设置innerHTML或outerHTML时会创建一个HTML解析器
每次循就要从innerHMLT中读取一次信息,然后再赋值,就以为这每次循环要访问两次
*/


    

0 0
原创粉丝点击