一些DOM的基本操作

最新推荐文章于 2023-03-07 08:41:17 发布

haojie5

最新推荐文章于 2023-03-07 08:41:17 发布

阅读量413

点赞数

分类专栏：学习笔记文章标签： class ie

本文链接：https://blog.csdn.net/haojie5/article/details/8021725

版权

学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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