javascript 权威指南学习笔记

//通过id查找多个元素
function getElements(/*ids...*/){
	var elements = {}；
	for(var i=0; i<arguments.length; i++){
		var id = arguments[i];
		var elt =document.getElementById("id");
		if(elt == null) throw new Error("No element with id :" +id);
		elements[i] = elt;
	}
	return elements;
}

//一个参数，返回元素的textContent或innerText
//两个参数，用value参数的值设置元素的textContent或innerText
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 textContent(){
	var child, type, s="";
	for(child=e.firstChild; child !==null; child.nextSibling){
		type = child.nodeType;
		if(type == 3|| type == 4){
			s += child.nodeValue;
		}else if( type == 1){
			s += textContent(child);
		}
	} 
	return s;
}

function insertAt(parent, child, n){
	if(n < 0 || n > parent.childNodes.length) throw new Error(‘invalid index‘);
	else if( n ==parent.childNodes.length) parent.appendChild(child);
	else parent.insertBefore(child, parent.childNodes[n]);
}

//根据指定表格每行第n个单元格的值，对第一个<tbody>中的行进行排序
//如果存在comparator函数则使用它，否则按照字母表顺序比较
function sortrows(table, n, comparator){
	var tbody = table.tbodies[0];
	var rows = tbody.getElementsByTagName("tr");
	rows = Array.prototype.slice.call(rows, 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) comparator(val1, val2);
		if(val1 < val2) return -1;
		else if(val1 > val2) return 1;
		else return 0;
	});
	for(var i=0; i<rows.length; i++) tbody.appendChild(rows[i]);
}
//查找表格<th>元素,让它们可单击以便单击标题 按该列对行排序
funciton makeSortable(table){
	var headers = document.getElementsByTagName("th");
	for(var i =0; i <headers; i++){
		(function(){
            headers[i].onclick = function(){
            	sortrows(table, n);
            }
		}(i));
	}
}

//用innerHTML 模拟 outerHTML(不支持outerH属性的浏览器)  Element.prototype可扩展
(function(){
    if(document.createElement("div").outerHTML) return;
    function outerHTMLGetter(){
    	var contain = document.createElement("div");
    	contain.appendChild(this.cloneNode(true));
    	return contain.innerHTML;
    }
    function outerHTMLSetter(value){
    	var contain = document.createElement("div");
        contain.innerHTML = value;
        while(contain.firstChild)
            this.parentNode.insertBefore(contain.firstChild, this);
        this.parentNode.removeChild(this);
    }
    //使用这两个函数作为所有element对象的outerHTML属性的getter和sette
    //如果有ES5的Object.defineProperty()就用它 否则
    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);
    }
}());

//倒序排列节点n的子节点
//DocumentFragment它可以使一组节点当做一个节点
function reverse(n){
	var f = document.createDocumentFragment();
	while(n.lastChild)
		f.appendChild(n.lastChild);
	n.appendChild(f);
}

//使用innerHTML()实现insertAdjacentHTML()
//第一了可移植HTM插入函数 Insert.before Insert.after Insert.atStart() Insert.atEnd
var insert = (function(){
	if(document.createElement("div").insetAdjacentHTML){
		return{
			before : function(e, h) {e.insetAdjacentHTML("beforebegin",h);}
			after : function(e, h) {e.insetAdjacentHTML("afterend",h);}
			atStart : function(e, h) {e.insetAdjacentHTML("afterbegin",h);}
			atEnd : function(e, h) {e.insetAdjacentHTML("beforend",h);}
		}
	}
	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.parentNode.insertBefore(fragment(html), elt.firstChild);
        }
        atEnd : function(elt, html){
            elt.parentNode.appendChild(fragment(html));
        }
	}
	Element.prototype.insetAdjacentHTML = 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 "beforend" return Insert.atEnd(this, html);
		}
	};
	return Insert;
}());

/**
*#TOC {border : 1px solid black; margin : 10px; padding : 10px}
*.TOCEntry { font-family : sans-serif; }
*.TOCEntry a { text-decoration : none; }
*.TOCLevel1 { font-size : 16px; font-weight : bold; }
*.TOCLevel2 { font-size : 12px; margin-left : .5in; }
*.TOCSectNum:after { content : ": " ; } 每段编号之后都有冒号和空格符
*.TOCSectNum { display : none; }
**/
onLoad(function(){
    var toc = document.getElementById("TOC");
	if(!toc){
		toc = document.createElement("div");
		toc.id = "TOC";
		document.body.insertBefore(toc, document.body.firstChild);
	}
	//查找所有标题
	var headings;
	if(document.querySelectAll)
		headings = document.querySelectAll("h1,h2,h3,h4,h5,h6");
    else 
    	headings = findHeadings(document.body, []);

    function findHeadings(root, sects){
    	for(var c = root.firstChild; c!=null; c.nextSibling){
    		if(c.nodeType !==1) continue;
    		if(c.tagName.length == 2 && c.tagName.charAt(0) == "H")
    			sects.push(c);
    		else 
    			findHeadings(c, sects);
    	}
        return sects;
    }
    //初始化一个数组来保持跟踪章节号
    var sectionNumbers=[0,0,0,0,0,0];
    for(var i=0; i<headings.length; i++){
    	var heading = headings[i];
    	if(heading.parentNode == toc) continue;
    	var level = parseInt(heading.tagName.charAt(1));
    	if(isNaN(level) && level < 1 && level > 6) continue;
    	sectionNumbers[level-1]++;
    	for(var i = level; i < 6; i++) sectionNumbers[i] = 0;
    	//生成章节号
    	var sectionNumber = sectionNumbers.slice(0, level).join(".");
        //为标题级别增加章节号 数字放在span中可以修改样式
        var span = document.createElement("span");
        span.className = "TOCSectNum";
        span.innerHTML = sectionNumber;
        heading.insertBefore(span, heading.firstChild);
        //用命名的锚点将标题包起来 以便为它增加连接
        var anchor = document.createElement("a");
        anchor.name = "TOC" + sectionNumber;
        heading.parentNode.insertBefore(anchor, heading);
        anchor.appendChild(heading);
        //为该节点创建一个链接
        var link =document.cre ateElement("link");
        link.href = "#TOC" +sectionNumber;  //连接目标地址
        link.innerHTML = heading.innerHTML;
        //将链接放在一个div中 级别名字样式修改
        var entry = document.createElement("div");
        entry.className = "TOCEntry TOCLevel" +level;
        entry.appendChild(link);
        
        toc.appendChild(entry);
    }
})

//查询窗口滚动条的位置
function getScrollOffSets(w){
	w = w || window;
	if(w.pageXOffset != null) return {x : w.pageXOffset, y : w.pageYOffset};
	var d = w.document;
	if(document.compatMode == "CSS1Compat")
		return {x : d.documentElement.scrollLeft, y : d.documentElement.scrollTop};
	return {x : d.body.scrollLeft, y : d.body.scrollTop};
}

//查询窗口的视口尺寸
function getViewportSize(w){
	w = w || window;
	if(w.innerWidth != null) return {w : w.innerWidth, h : w.innerHeigth};
	var d = w.document;
	if(document.compatMode == "CSS1Compat")
		return {w : d.documentElement.clientWidth, h : d.documentElement.clientHeight};
	return {w : d.body.clientWidth, h : d.body.clientHeight};
}