JS DOM操作（创建、遍历、获取、操作、删除节点）

      (function() {
        if (! 
        /*@cc_on!@*/
        0) return;
        var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(‘, ‘);
        var i = e.length;
        while (i--){
          document.createElement(e[i]);
        }
      })();

      // innerHTML的限制：
      // 字符串最左边不能出现空白，否则会被移除
      // 多数浏览器不会对script脚本进行执行
      // 不能单独创建meta/style/link等
      myReady(function(){
        var content = document.getElementById("content");
        var str = "
This is a paragraph with a list following it.
"
                    + "

" + "
• Item 1
" + "
• Item 2
" + "
• Item 3
" + "

        var content = document.getElementById("content");
        var str = "

        var content = document.getElementById("content");
        var str = "_";
        content.innerHTML = str;
        // 移除最开头添加的_
        content.removeChild(content.firstChild);
      });

        // innerText兼容火狐写法：textContent
        var content = document.getElementById("content");
        function getInnerText(element){
          return typeof (element.textContent == "string") ? element.textContent : element.innerText;
        }
        function setInnerText(element, text){
          if (typeof element.textContent == "string"){
            element.textContent = text;
          } else {
            element.innerText = text;
          }
        }
        setInnerText(content, "Hello world!");
        console.log(getInnerText(content));

  
文本叶子节点
  

        var box = document.getElementById("box");
        for(var i = 0, len = box.childNodes.length; i ) {
          if (box.childNodes[i].nodeType == 1) {
            // 只输出元素节点（过滤文本节点）
            console.log(box.childNodes[i]);
          }
        }

        var box = document.getElementById("box");
        for(var i = 0, len = box.childElementCount; i ) {
          console.log(box.children[i]);
        }

• 节点一
• 节点二
• 节点三

• 节点一
• 节点二
• 节点三

DOM探索之基础详解篇

DOM探索之节点操作篇

• 节点一
• 节点二
• 节点三

        var divs = document.getElementsByTagName("div");
        // 先把最初的长度记录在变量里，防止后期动态改变
        var length = divs.length;
        var i = 0;
        while(i  length){
          document.body.appendChild(document.createElement("div"));
          i++;
        }

// 获取所有的元素
var all = document.getElementsByTagName(‘*‘);

// 函数用于选取符合标签名的元素
var getElementsByClassName = function(opts) {
    var searchClass = opts.searchClass; // 存储要查找的类名
    var node = opts.node || document;  // 存储要出查找的范围
    var tag = opts.tag || ‘*‘; // 存储一定范围内要查找的标签
    var result = [];
        // 判断浏览器支不支持getElementsByClassName方法
    if (document.getElementsByClassName) { // 如果浏览器支持
        var nodes = node.getElementsByClassName(searchClass);
        if (tag !== "*") {
            for (var i = 0; node = nodes[i++];) {
                if (node.tagName === tag.toUpperCase()) {
                    result.push(node);
                }
            }
        } else { 
            result = nodes;
        }
        return result;
    } else { // 使用IE8以下的浏览器能够支持该属性
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var i, j;
        var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
        for (i = 0, j = 0; i ) {
            if (pattern.test(els[i].className)) { // 检测正则表达式
                result[j] = els[i];
                j++;
            }
        }
        return result;
    }
}

• 1
• 2
• 3

• 1
• second
• 3

  


      You are my sunshine.
      

1
        
2
        
3