DOM基础

什么是DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

——百度百科

DOM节点

childNodes 获取子节点

  <ul id="ul1">
    <Li></Li>
    <li></li>
  </ul>

<script>
    window.onload=function(){
        var oUl=document.getElementById("ul1");
        alert(oUl.childNodes.length);//5
    }
</script>

空文本节点算一个节点，会输出共有五个节点(空+li+空+li+空)

在IE6-8下输出的是正确的的节点个数

nodeType 获取节点类型

<script>
	window.onload=function(){
		var oUl=document.getElementById("ul1");
		for(var i=0;i<oUl.childNodes.length;i++){
			alert(oUl.childNodes[i].nodeType);//3,1,3,1,3
		}
	}
</script>

nodeType==3 ：文本节点

nodeType==1 ：元素节点

children 只包括元素节点，不包括文本

不用nodeType去分别

parentNode 获取父节点

隐藏父节点的应用

<script>
	window.onload=function(){
		var oUl=document.getElementById("ul1");
		var aA=document.getElementsByTagName("a");

		for(var i=0;i<aA.length;i++){
			aA[i].onclick=function(){
				this.parentNode.style.display="none";

			}
		}
	}
</script>


<body>
	<ul id="ul1">
		<li>文字vs<a href="#">隐藏</a></li>
		<li>文字qwe<a href="#">隐藏</a></li>
		<li>文字ewfvds<a href="#">隐藏</a></li>
		<li>文字few<a href="#">隐藏</a></li>
	</ul>
</body>

offsetParent 获取该元素用于定位的父级

绝对定位的元素根据有定位的父级进行定位

首尾子节点

firstChild/lastChild

在高版本的浏览器下会检测到文字节点

firstElementChild/lastElementChild

高版本适用获取子节点

可以用if解决兼容判断的问题

兄弟节点

nextSibling/nextElementSibling

previousSibling/previousElementSibling

操作元素属性

元素属性操作

oDiv.style.display="block"
oDiv.style["display"]="block"
DOM方式

DOM方式操作元素属性

获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)

DOM基础操作

创建DOM元素

createElement() 创建元素

父级.createElement(子节点)

appendChild() 在末尾追加一个节点

父级.appendChild(子节点)

例：为ul插入li

window.onload=function(){
    var oBtn=document.getElementById("btn1");
    var oUl=document.getElementById("ul1");
    var oTxt=document.getElementById("txt1");

    oBtn.onclick=function(){
        var oLi=document.createElement("li");
        oLi.innerHTML=oTxt.value;
        oUl.appendChild(oLi);
    }
}

插入DOM元素

insertBefore() 在已有元素前插入

父级.insertBefore(子节点，在谁之前)

例：倒序插入li

window.onload=function(){
    var oBtn=document.getElementById("btn1");
    var oUl=document.getElementById("ul1");
    var oTxt=document.getElementById("txt1");

    oBtn.onclick=function(){

        var oLi=document.createElement("li");
        var aLi=oUl.getElementsByTagName("li");

        oLi.innerHTML=oTxt.value;
        oTxt.value=" ";
        oUl.insertBefore(oLi,aLi[0]);

    }
}

删除DOM元素

removeChild() 删除子节点

父级.removeChild()

移除父级元素的应用：

孙子调用爷爷去除爸爸 （不改变文件本身，刷新会再现）

<script>
	window.onload=function(){
		var aA=document.getElementsByTagName("a");
		var oUl=document.getElementById("ul1");
		
		for(var i=0;i<aA.length;i++){
			aA[i].onclick=function(){
				oUl.removeChild(this.parentNode);
			}
		}
	}	
</script>
<body>
	<ul id="ul1">
		<li>asdf<a href="#">delete</a></li>
		<li>assa<a href="#">delete</a></li>
		<li>aaf<a href="#">delete</a></li>
		<li>asAdca<a href="#">delete</a></li>
	</ul>
</body>

文档碎片

提高DOM操作性能

在低级浏览器性能提高明显

随着发展高级浏览器一般用不到了

文档碎片原理

1、我们要明白当js操作dom时发生了什么？

每次对dom的操作都会触发"重排"（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少 dom操作来减少"重排"

2、什么是文档碎片？ document.createDocumentFragment() 一个容器，用于暂时存放创建的dom元素

3、文档碎片有什么用？将需要添加的大量元素先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大减少dom操作，提高性能（IE和火狐比较明显）

www.cnblogs.com/suihang/p/9…

document.createDocumentFragment()

window.onload=function(){
    var oUl=document.getElementById("ul1");
    var oFrag=document.createDocumentFragment();

    for(var i=0;i<10000;i++){
        var oLi=document.createElement("li");
        oFrag.appendChild(oLi);
    }
    oUl.appendChild(oFrag);
}

JavaScript中的DOM操作