DOM操作

创建节点

• document.createElement() 创建节点
• document.createTextNode() 创建文本
• document.createDocumentFragment() 创建文档片段

实例

var fragment = document.createDocumentFragment(); // 创建文档片段
var ul = document.getElementById("myList"); 
var li = null;
for (var i = 0; i < 3; i++) {
  li = document.createElement("li"); // 创建li节点
  li.appendChild(document.createTextNode("Item " + (i + 1))); // 创建文本并添加到li节点
  fragment.appendChild(li);// 将li节点添加到文档片段
}
ul.appendChild(fragment); // 将文档片段添加到ul中

ie6~8 hack

ie不支持html5标签，通过document.createElement() 来创建，从而达到效果

(function() {
  if (! 
  /*@cc_on!@*/
  0) return; // 只在ie下执行
  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 高效创建节点

• ie左边不能添加空格
• ie添加<input type=\"hidden\">可以执行script

var content = document.getElementById("content");
var str = "<p>This is a <strong>paragraph</strong> with a list following it.</p>"
            + "<ul>"
            + "<li>Item 1</li>"
            + "<li>Item 2</li>"
            + "<li>Item 3</li>"
            + "</ul>";
content.innerHTML = str;

outerHTML

var content = document.getElementById("content");
console.log(content.outerHTML); // 返回节点
content.outerHTML = "<p>This is a paragraph.</p>"; // 将节点更改为指定内容

innerText 只获取文本内容

• 火狐不能使用

var content = document.getElementById("content");
console.log(content.innerText);
content.innerText = "<p>This is a paragraph.</p>";

兼容性写法

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));

节点遍历

• document.documentElement 获取根元素html
• *.firstChild 获取第一个子节点
• *.childNodes[0] 获取第一个子节点，空格也算节点
• *.childNodes.item(0) 获取第一个子节点，空格也算节点
• *.parentNode 获取父节点
• *.previousSibling 获取上一个兄弟节点
• *.nextSibling 获取下一个兄弟节点

遍历时去掉空格

var box = document.getElementById("box");
for(var i = 0, len = box.childNodes.length; i < len; i++) { // 获取长度
  if (box.childNodes[i].nodeType == 1) { // 1的时候为dom元素，不是空格
    console.log(box.childNodes[i]);
  }
}

• *.children[0] 获取第一个子节点,不包含空格（ie8不支持）

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

节点查找

• document.getElementById() 查找id，ie下会把name查找出来

  var getElementById = function(id) { // 兼容ie写法
    var el = document.getElementById(id);
    if(!+"\v1") {
      if(el && el.id === id) {
        return el;
      } else {
        var els = document.all[id],
            n = els.length;
        for (var i = 0; i < n; i++) {
          if (els[i].id === id) {
            return els[i];
          }
        }
      }
    }
    return el;
  };
  console.log(getElementById("target").tagName);
  

• document.getElementsByName() 查找所有name集合

• document.getElementsByTagName('li') 查找所有标签集合

• document.getElementsByClassName() 查找类名获得集合

  var getElementsByClassName = function(opts) { // 兼容ie8
  	var searchClass = opts.searchClass; // 要查找的类名
  	var node = opts.node || document; // 查找的范围
  	var tag = opts.tag || '*'; // 要查找标签
  	var result = [];
  
  	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 {
  		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 < elsLen; i++) {
  			if (pattern.test(els[i].className)) {
  				result[j] = els[i];
  				j++;
  			}
  		}
  		return result;
  	}
  }
  

• document.querySelector() 查找匹配的第一个元素

• document.getElementById() 查找匹配的集合

操作节点

• *.appendChild() 将节点插入到末尾

• *.insertBefore(liNew, li2) 将节点插入指定位置

  var myUl = document.getElementById('myUl');
  var txt = document.createTextNode('4');
  var liNew = document.createElement('li');
  liNew.appendChild(txt);
  var li2 = myUl.children.item(1);
  var returnNode = myUl.insertBefore(liNew, li2);
  
  <ul id="myUl">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  

• *.replaceChild(liNew, li2) 第二个参数是被替换的节点

• *.cloneNode(true); 克隆选中节点，true为深度复制

删除节点

• *.removeChild(myUl.childNodes[1]) 删除节点

属性值

• getAttribute() 获得属性
• setAttribute() 设置属性
• removeAttribute() 移除属性

data属性

通过dataset.xx来获得设置的属性

<button id="btn" type="button" data-xxx-yyy="abc" data-toggle="modal">Small modal</button>

var btn = document.getElementById('btn');
console.log(btn.dataset.toggle);
console.log(btn.dataset.xxxYyy);