js基础之DOM

一、创建子节点

发帖在顶部显示：

var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');

oBtn.onclick=function(){
　　var oLi = document.createElement('li');
　　var lil = document.getElementsByTagName('li');
　　var otxt = document.getElementById('txt1');
　　oLi.innerHTML=otxt.value;
　　if(lil.length==0){
　　　　oUl.appendChild(oLi);
　　} else {
　　　　//父节点.insertBefore（子节点，位置）
　　　　oUl.insertBefore(oLi,lil[0]);//插入到某个子节点的前面
　　}
}

二、删除子节点

var oA = document.getElementsByTagName('a');
var oUl = document.getElementById('ul1');
for(var i=0;i<oA.length;i++){
　　oA[i].onclick=function(){
　　oUl.removeChild(this.parentNode);
　　}
}

三、遍历子节点

childNodes 属性可返回指定节点的子节点的节点列表。包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点
var oUl = document.getElementById('ul1');
for(var i=0;i<oUl.childNodes.length;i++){
　　if(oUl.childNodes[i].nodeType==1){
　　　　oUl.childNodes[i].style.background='red';
　　}
}
注意:
childNodes属性返回的子节点中，包含了文本节点与元素节点。如果只希望遍历元素节点，建议使用children属性则更为直接方便！

parentNode：

var oA = document.getElementsByTagName('a');
for(var i=0;i<oA.length;i++){
　　oA[i].onclick=function(){
　　　　this.style.display='none';
　　　　this.parentNode.style.display='none';//alert();
　　}
}

offsetParent；

<div id="div1" style="width:100px;height:100px; background:red; margin:100px; position:absolute;">
<div id="div2" onClick="alert(this.offsetParent.id)" style="width:100px;height:100px; background:yellow; position:absolute;left:100px;top:100px;"></div>
</div>

四、用class选元素

原代码：

var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
 var i=0;
for(i=0;i<aLi.length;i++)
{
　　if(aLi[i].className=='box')
　　{
　　　　aLi[i].style.background='red';
　　}
}

封装后的代码：

function getByClass(oParent, sClass)
{
　　var aEle=oParent.getElementsByTagName('*');
　　var aResult=[];
　　var i=0;
　　for(i=0;i<aEle.length;i++)
　　{
　　　　if(aEle[i].className==sClass)
　　　　{
　　　　　　aResult.push(aEle[i]);
　　　　}
　　}

　　return aResult;
}

window.onload=function ()
{
var oUl=document.getElementById('ul1');
var aBox=getByClass(oUl, 'box');
 var i=0;
for(i=0;i<aBox.length;i++)
{
　　aBox[i].style.background='yellow';
}
}