js DOM

父节点（只有一个）

子节点（只能一层）

childNodes 子节点

<script>
window.onload=function()
{
    var oUl=document.getElementById('ul1');
    oUl.childNodes[0].style.background='red';
}
</script>
<ul id="ul1">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
</ul>

 nodeType  元素--1 text --3

window.onload=function()
{
    var oUl=document.getElementById('ul1');
    var i=0;
    
    for(i=0;i<oUl.childNodes.length;i++)
    {
        if(oUl.childNodes[i].nodeType==1)
        {
            oUl.childNodes[i].style.background='red';
        }
    }
}

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

children 是childnodes的兼容板

parentNode 父节点

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

<ul id="ul1">
    <li>sfa<a href="#">fdsf</a></li>
    <li>fasd<a href="#">fdsf</a></li>
    <li>asfd<a href="#">fdsf</a></li>
    <li>asdf<a href="#">fdsf</a></li>
    <li>asfd<a href="#">fdsf</a></li>
</ul>

 offsetParent 相对的父节点

 

 firstChild   firstElementChild (首个子节点)

 lastChild  lastElementChild (最后一个子节点)

<script>
window.onload=function()
{
    var oUl=document.getElementById('ul1');
    var oFirst=oUl.firstElementChild||oUl.firstChild;
    oFirst.style.background='red';
}
</script>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

兄弟节点

nextSibling nextElementSibling (下一个节点)
previousSibling previousElementSibling (上一个节点)

操纵元素属性

元素属性操作
第一种：oDiv.style.display=“block”;
第二种：oDiv.style[“display”]=“block”;
第三种：Dom方式
DOM方式操作元素属性
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)

className 封装

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)
        {
            //return aEle[i]
            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='red';
    }
}
<ul id="ul1">
    <li></li>
    <li></li>
    <li class="box"></li>
    <li></li>
    <li class="box"></li>
    <li class="box"></li>
    <li></li>
    <li></li>
</ul>