DOM 节点操作

1.  作为HTML的元素内容

  innerHTML:

读取Element的innerHTML属性作为字符串标记返回那个元素的内容，在元素上设置该属性调用了Web浏览器的解析器，用新字符串内容的解析展现形式替换元素当前内容。通常设置innerHTML效率非常高，甚至在指定 的值需要解析时效率也相当不错，但注意，对innerHTML属性用‘+=’操作符重复追加一小段文本通常效率低下，因为它既要序列化又要解析

  outerHTML:

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

  PS：低版本的FF不支持outerHTML,扩展方法如下：

扩展outerHTML	(function(){
	  //如果outerHTML存在，则直接返回
		if(document.createElement('div').outerHTML) return;
		//返回this所引用的外部HTML
		function outerHTMLGetter(){
			var container = document.createElement('div');
			container.appendChild(this.cloneNode(true));
			return container.innerHTML;
		};
		//用指定的值设置元素的外部HTML
		function outerHTMLSetter(value){
			var container = document.createElement('div');
			container.innerHTML = value;
			//将虚拟元素中的节点全部移动到文档中，直到没有子节点为止
			while(container.firstChild){
				this.parentNode.insertBefore(container.firstChild, this);
			}
			//删除所被取代的节点
			this.parentNode.removeChild(this)
		}
		/*使用这两个函数作为所有Element对象的outerHTML属性的getter和setter，如果它存在则使用es5的Object.definedProperty()方法，否则，使用__definedGetter__()和__defineSetter__()
		 */
		if (Object.defineProperty){
			Object.defineProperty(Element.prototype, 'outerHTML',{
				get: outerHTMLGetter,
				set: outerHTMLSetter,
				enumerable: false,
				configurable: true
			})
		}
		else{
			Element.prototype.__defineGetter__('outerHTML',outerHTMLGetter);
			Element.prototype.__defineSetter__('outerHTML',outerHTMLSetter);
		}
	}())

insertAdjacentHTML(sWhere,position):

将任意的HTML标记字符串插入到指定的元素“相邻”的位置， sWhere的值是“beforeBegin”，“afterBegin”,”beforeEnd”,”afterEnd”,position是被插入的HTML字符串

  注:低版本的FF不支持此方法，扩展方法如下:

扩展insertAdjacentHTML/*本模块为不支持insertAdjacentHTML的浏览器扩展方法，还定义一些可移植的HTML插入函数Insert.before() | after() | atStart() | atEnd*/
	var Insert(function(){
		if(document.createElement('div').insertAdjacentHTML){
			return {
			  before: function (e, h){e.insertAdjacentHTML('beforebegin', h);},
				after: function(e, h){e.insertAdjacentHTML('afterend', h);},
				atStart: function(e, h){e.insertAdjacentHTML('afterbegin', h);},
				atEnd: function(e, h){e.insertAdjacentHTML('beforeEnd', h)}
			};
		}
		//如果没原生的，定义一个工具函数，传入HTML字符串，返回一个DocumentFragment
		function fragment (html){
			var elt = document.createElement('div');
			var frag = document.createDocumentFragment();
			elt.innerHTML = html;
			while (elt.firstChild){
				frag.appendChild(elt.firstChild);
			}
			return frag;
		}
		var Insert = {
			before: function (elt, html){
				elt.parentNode.insertBefore(fragment(html), elt);
			},
			after: function (elt, html){
				elt.parentNode.insertBefore(fragment(html), elt.nextSibling);
			},
			atStart: function(elt, html){
				elt.insertBefore(fragment(html), elt.firstChild);
			},
			atEnd : function(elt, html){
				elt.appendChild(fragment(html));
			}
		};
		Element.prototype.insertAdjacentHTML = function (pos, html){
			switch(pos.toLowerCase()){
				case 'beforebegin': return Insert.before(this, html);
				case 'afterend': return Insert.after(this, html);
				case 'afterbegin': return Insert.atStart(this, html);
				case 'beforeend': return Insert(this, html);
			};
			return Insert;
		}
	}());

2.作为纯文本的元素内容

  textContent || innerText

  textContent 是标准方法，除了IE8及以下的浏览器都支持,innerText 是IE4引入的，它除了早期的ff外都支持

  两者的区别：

    innerText是需要对innerHTML的值进行

    1）HTML转义（等同于XML转义，对< 、&等转义字符进行处理

    2）经过HTML解释和CSS样式解释

    3）剔除格式信息 (多个空格合并成一个，换行，制表

    经过上述3步后留下的纯文本；innerText不返回<script>元素的内容；同时，它对某些表格元素(table,tbody,tr)是只读属性

    textContent只是经过上述的第一步，没有进行2 3步，只将后代的text节点简单的串联在一起

     ====》来自javascript textContent与innerText的异同分析 ====》

  

查找元素的后代中节点中的所有的Text节点

返回纯文本function textContent (element,value) {
  var content = element.textContent;   
  if (value === undefined) {   //获取
    if(content !== undefined ) return content;
    else return element.innerText;
  }
  else{     //设置
    if (content !== undefined) element.textContent = value;
    else element.innerText = value;
  }
}

function textContent1 (e) {
  var child, type, s = "";
  for(child = e.firstChild; child != null; child = child.nextSibling){
    type = child.nodeType;
    if (type === 3 || type === 4){
    s += child.nodeValue;
  }
  else if (type ===1 ) {
     s += textContent1(child)
    }
     return s;
  }
}

/* nodeValue 属性可以读/写,设置它可以改变Text/CDATASection节点内容所显示的内容；Text/CDATASction都
** 是CharacterData的子类型，CharacterData定义了data属性，它和nodeValue 文本相同，可以应用很多方法
*/

function upcase (n) {
  if (n.nodeType == 3 || n.nodeType == 4)
     n.data = n.data.toUpperCase()
  else {
     for ( var i = 0; i < n.childNodes.length; i ++){
       upcase (n.childNodes[i];
    }
  }

=====================================================================

  创建节点

      createElement() /createTextNode() / createComment() /createDocumentFragment() /createElementNS()

      cloneNode(boolean)   true  表示深复制，它及其后代元素都会被复制，false 表示只复制它本身，其余元素不会被复制

     importNode(element, boolean)  第一个参数是一个文档的节点，第二个参数是一个布尔值，与cloneNode()中的参数一样；返回一个适合本文档插入的节点的副本（IE不支持)

 

插入节点

   appendChild() / insertBefore ()

   如果调用appendChild()或insertBefore() 将已存在文档中的一个节点再次插入，那个节点将自动从它当前的位置删除并在新的位置重新插入，没有必要显示删除该节点。

    应用：

表单行排序function sortrows (table, n, comparator) {   //  如果comparator函数存在，则使用它进行比较
  var tbody = table.tBodies[0];  //第一个tbody，可能是隐式创建的
 var rows = tbody.getElementsByTagName('tr');
  rows = Array.prototype.slice.call(row,0)  //生成数组的快照
 rows.sort(
    function (row1, row2){
       var cell1 = row1.getElementsByTagName('td')[n];
       var cell2 = row2.getElementsByTagName('td')[n];
       var val1 = cell1.textContent || cell1.innerText;
       var val2 = cell2.textContent || cell2.innerText;
       if (comparator) return comparator( val1, val2);
       if (val1 < val2) return -1;
       else if (val1 > val2) return 1;
       else return 0
    });
    //在tbody中按它们的顺序把行添加到最后，若tbody中包含除了tr任何其他元素，这些节点自动到顶部
  for ( var i = 0; i < rows.length; i ++) tbody.appendChild(rows[i])
}

//查找表格的th元素，让它们可以单击;以便单击列标题，按该列对行排序
function makeSorttable (table) {
  var headers = table.getElementsByTagName('th');
  for ( var i = 0; i< headers.length; i++){
     (function(n){
        headers[i].onclick = function(){sortrows(table,n)};
      })(i);
  }
};

转载于:https://www.cnblogs.com/fsy0718/p/3294537.html