模拟实现console.dir函数

function dir(obj,name,initContainer){
	var ul = initContainer ? initContainer : document.createElement("ul");
	var li = document.createElement("li");
	var span = document.createElement("span");
	span.innerHTML = "+"
	span.className = "plus";
	span.onclick = function(){
		if(this.rendered){
			if(this.className === "minus"){
				this.className = "plus";
				this.innerHTML = "+"
				this.parentNode.lastChild.style.display = "block";
			}else{
				this.className = "minus";
				this.innerHTML = "-"
				this.parentNode.lastChild.style.display = "none";
			}
			return ;
		}
		var ul = document.createElement("ul");
		for(var k in obj){
			dir(obj[k],k,ul)
		}
		li.appendChild(ul);

		this.className = "minus";
		this.innerHTML = "-"
		this.rendered = true;
	}
	li.appendChild(span);
	var span2 = document.createElement("span");
	name = name || obj.toString();
	span2.innerHTML = name + " : " + typeof obj;
	li.appendChild(span2);
	ul.appendChild(li);
	return ul
}

/*-----------------------------Test dir--------------------------------*/
window.onload = function(){
	document.body.appendChild(dir(window));
}

测试打印出window对象的所有属性和方法,见附件。

另外还可以排序,以下按属性和方法的名称排序(当然也可以按照typeof类型排序):
           var properties = [];
            for(var p in obj){
                properties.push(p);
            }
            properties.sort();
            var len = properties.length;
            for(var i=0;i<len;i++){
                dir(obj[properties[i]],properties[i],ul)
            }
            li.appendChild(ul);

你可能感兴趣的:(JavaScript)