《JavaScript权威指南》----第15章 脚本化文档(2) 学习记录

     15.5.1 作为HTML的元素内容

              Web浏览器很擅长解析HTML,通常设置innerHTML的效率非常高。但注意,对innerHTML属性用"+="操作符重复追加一小段文本通常效率低下,因为它既要序列化又要解析。HTML5说innerHTML应该在Document节点以及Element节点上工作正常,但这还未被普遍的支持。

             HTML5还标准化了outerHTML属性。当查询outerHTML时,返回的HTML或XML标记字符串包含被查询元素的开头和结尾标签。当设置元素的outerHTML属性时,元素本身被新的内容所替换。只有Element节点定义了outerHTML属性,Document节点则没有。

             IE引入的另一个特性是insertAdjacenHTML(),它将在HTML5中标准化,它能将HTML标记字符串插入到指定元素的相邻位置,标记是该方法的第二个参数,并且相邻的精确含义依赖于第一个参数,第一个参数时具有以下值之一的字符串:


例:  

     <!DOCTYPE html>
      <html lang="zh-hans">  
     <head>
     <title>Text</title>
     </head>
<body>Hello World!</body>
        <span class="sparkline" data-ymin="0" data-ymax="10">1 1 1 2 2 3 4 5 5 4 3 5 6 7 7 4 2 1</span>
      </html>  

      <script>

       var sparkline = document.getElementsByClassName("sparkline")[0];
       sparkline.insertAdjacentHTML("afterend",'<br><input type="file">');

      </script>


       15.5.2 作为纯文本的元素内容

               在文档中插入或查询纯文本形式的内容,标准的方法是使用Node对象的textContent属性来实现,除火狐外,也可以用innerText来实现。

                         

        15.6  创建,插入和删除节点

                 15.6.1 创建节点 

                       创建Element节点用createElemment(),创建Text节点用createTextNode().另一种创建新文档节点的方式是复制已经存在的节点,每一个节点有一个cloneNode()来

       返回一个全新的副本,给方法传递参数true也能递归地复制所有的后代节点,或传递参数false只是执行一次潜复制。

                  15.6.2 插入节点

                        插入节点可以使用Node对象的appendChild()或者insertBefore()。appendChild()是在需要插入的Element节点上调用的。如果调用这两个方法将已经存在于文档中的一个节点再次插入,那个节点将自动从它当前的位置删除并在新的位置中重新插入,所以没有必要显示的删除该节点。

                  15.6.3  删除和替换节点

                        在要删除节点的父节点上调用removeChild()可以实现删除,传递两个参数给此方法就能实现替换,第一个参数为新节点,第二个参数为需要替代的节点。

                  



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值