一些DOM的基本操作

<ul id="myList"></ul>

<script type="text/javascript">
	var fragment = document.createDocumentFragment();
	var body = document.body;
	var ul = document.getElementById("myList");
	var li = null;
	
	for(var i=0;i<3;i++){
		li = document.createElement("li");
		li.appendChild(document.createTextNode("Item " + (i+1)));
		fragment.appendChild(li);
	}
	
	
	ul.appendChild(fragment);
	alert(ul.childNodes.length); //3
	
	var item2 = ul.firstChild.nextSibling;
	alert(item2.firstChild.data); // item2
	var item3 = ul.childNodes[2];
	alert(item3.childNodes[0].data); // item3
	
	var defaultList = ul.cloneNode();
	body.appendChild(defaultList);
	
	var deepList = ul.cloneNode(true);
	body.appendChild(deepList);
	alert(ul.childNodes.length); //3
	
	var shadowList = ul.cloneNode(false);
	body.appendChild(shadowList);
	
	
	// 以下 IE6 ，7下不支持
	ul.className="ul_class";
	
	// IE8 之前：setAttribute, 对class, style没有效果
	// getAttribute 对style, onclick 未如所愿，而是返回对象或函数
	alert(ul.getAttribute("class")); //ul_class
	ul.setAttribute("name", "ul_name");
	
	// querySelector，querySelectorAll
	var myli = document.querySelectorAll("ul.ul_class li");
	alert(myli.length); //3
	alert(myli[1].firstChild.data); //item2
	
</script>