zoukankan      html  css  js  c++  java
  • 《javascript高级程序设计》第十章 DOM

    10.1 节点层次

      10.1.1 Node 类型.
      10.1.2 Document 类型
      10.1.3 Element 类型
      10.1.4 Text 类型
      10.1.5 Comment 类型
      10.1.6 CDATASection 类型
      10.1.7 DocumentType 类型
      10.1.8 DocumentFragment 类型
      10.1.9 Attr 类型
    10.2 DOM 操作技术
      10.2.1 动态脚本
      10.2.2 动态样式
      10.2.3 操作表格
      10.2.4 使用NodeList

    节点层次  (convertToArray没有执行哦!)

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta content="IE=8" http-equiv="X-UA-Compatible"/>
            <title>untitle-1</title>
            
        </head>
        <body>
              <div id="della">
                <span>delllllllllllllllla</span>
                <ul id="ul"><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul>
            </div>
            <script type="text/javascript">
                var $ = function (s){
                    return document.getElementById(s);
                }
               
                var someNode = $("della");
               
                function convertToArray(nodes){
                  var array = null;
                  try {
                          array = Array.prototype.slice.call(nodes, 0); //针对非IE 浏览器
                  } catch (ex) {
                          array = new Array();
                      for (var i=0, len=nodes.length; i < len; i++){
                              array.push(nodes[i]);
                      }
                  }
                  return array;
               }
              
               alert(convertToArray(someNode));
                 
            </script>
        </body>
    </html>

    10.1.8 DocumentFragment类型(如果是自己看,肯定是一扫而过,看论坛里面讨论可以加深印象,哈哈哈)
    是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。

    <ul id="myList"></ul>
    var fragment = document.createDocumentFragment();
    var ul = document.getElementById("myList");
    var li = null;
    for (var i=0; i < 3; i++){
        li = document.createElement("li");
        li.appendChild(document.createTextNode("Item " + (i+1)));
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);

  • 相关阅读:
    (最小路径覆盖) poj 1422
    (匈牙利算法) hdu 2119
    (匈牙利算法) hdu 4185
    (匈牙利算法) hdu 2063
    (匈牙利算法)hdu 1281
    (匈牙利算法DFS)hdu 3729
    (01 染色判奇环) hdu 3478
    (多重背包)poj 1276
    (判断欧拉回路)poj 1368
    (差分约束) hdu 1384
  • 原文地址:https://www.cnblogs.com/della/p/3296155.html
Copyright © 2011-2022 走看看