js:dom

document -> html -> head body ->p ul
document.getElementById(‘ul1’)
oul.childNodes.length
oul.childNodes[i].style.backgroud=”red”
childNodes:包含元素节点和文本节点。 元素节点==1 文本节点==3 属性节点==2

children:只包含元素节点。

firstChild:标准下包含文本节点 ，非标准下只包含元素节点。只读属性。
firstElementChild:只读属性。标准没有。非标准有这个函数。
var oFirst = oul.firstElementChild || oul.firstChild; == oul.children[0]

lastChild:最后一个节点。
lastElementChild:

nextSibling:下一个兄弟节点。
nextElementSibling:

previousSibling:上一个兄弟节点。
previousElementSibling:

parentNode；父节点,只读属性。
var aA = document.getElementsByTagName(‘a’);//点击隐藏每一个a标签的父节点。
for(var i=0;i小于aA.length;i++){ aA[i].onclick=function(){this.parentNode.style.display=’none’}}

offsetParent:有定位的最近一个父节点。position:relative

offsetLeft:只读属性。当前元素到定位父级偏移值。

offsetTop:

style.width:样式宽
style.height:
clientWidth:样式宽+padding
offsetWidth:样式款+padding+border

//累计offsetTop，求得div3到顶端距离 div3到div2距离 + div2到 div1距离 + div1到顶端距离。
var obj = div3;
var top = 0;
while(obj){ top+=obj.offsetTop; obj=obj.offsetParent }

//将 left top值封装成json 一起计算出来。
function getPos(obj){
var pos = {left:0,top:0}//定义一个json 或 一个对象
while(obj){ pos.left += obj.offsetLeft;pos.top += obj.offsetTop; obj = obj.offsetParent }
return pos;
}

动态创建操作元素：
var oli = document.createElement(“li”)
oli.innerHTML = oText.value;
oul.appendChild(oli);
oul.insertBefore(oli,oul.children[0]);
if(oul.children[0]){oul.insertBefore(oli,oul.children[0])}else{oul.appendChild(oli)}

removeChild:删除元素，父级调用。
var oA = document.createElement(‘a’);
oA.innerHTML=”删除”;
oA.href=”javascript:;”;
oA.onclick = function(){ oul.removeChild(this.parentNode)}

replaceChild:替换元素，父级调用。

getElementByClassName(‘box’):

document.getElementByTagName(‘*’) //获取页面全部元素

给元素增加加class属性
if(obj.className == ”){obl.className=className}else{obj.className+=’ ‘+className}
移除元素class属性