js中的DOM操作(1)

一、操作子节点

childNodes

　　通过该方式可以获取父节点下的所有子节点，但是由于浏览器的差异，这写节点中可能包含文本节点。

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
    <script type="text/javascript">
    window.onload = function (){
        var oUl = document.getElementById('ul1');
        alert(oUl.childNodes.length);
    }
    </script>
</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
</ul>
</body>
</html>

我们通过浏览器打开上面的代码会发现提示框是5。这是因为 ul 标签中的空白处可以被视为文本节点。如果只直接访问 li 节点则需要进行节点类型判断。

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
    <script type="text/javascript">
    window.onload = function (){
        var j=0;
        var node;
        var oUl = document.getElementById('ul1');
        for(i=0; i<oUl.childNodes.length; i++){
            //1表示该节点是一个元素节点
            if(oUl.childNodes[i].nodeType == 1)
                j++;
        }
        alert(j);
    }
    </script>
</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
</ul>
</body>
</html>

children

　　通过该方法可以直接获取父节点下的元素节点

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
    <script type="text/javascript">
    window.onload = function (){
        var oUl = document.getElementById('ul1');
        alert(oUl.children.length);
        oUl.children[0].style.background = "red";
    }
    </script>
</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
</ul>
</body>
</html>

firstChild和 lastChild是分别访问子标签中的第一个节点和最好一个节点，不过可能会出现问题就是访问到的可能是元素节点。

二、操作父节点

parentNode

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
    <script type="text/javascript">
        window.onload = function(){
        var oAs = document.getElementsByTagName('a');
        for(var i=0; i<oAs.length; i++){
            oAs[i].onclick = function (){
                this.parentNode.style.display = "none";
            };
        }
        }
    </script>
</head>
<body>
<ul id="ul1">
    <li><a href ="javascript:void(0);">隐藏</a></li>
    <li><a href="javascript:void(0);">隐藏</a></li>
</ul>
</body>
</html>

通过上面的方式可以让父节点隐藏

offsetParent

　　寻找脱离文档流的父节点(使用了绝对定位或相对定位的父节点)

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div2');
            oDiv.offsetParent.style.backgroundColor="yellow";
        }
    </script>
    <style type="text/css">
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }

        #div2{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>
</body>
</html>

如果去掉#div1中的position属性，则整个body的背景会变为黄色，如果不去则只有div1的背景是黄色

setAttribute

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById('1');
            oBtn.onclick = function (){
                var oInput = document.getElementById('2');
                oInput.setAttribute("value", "div2");
            }
        }
    </script>
</head>
<body>
<input type="text" id="2">
    <button id="1">按键</button>
</div>
</body>
</html>

setAttribute方法有很多限制，如果允许的话最好选择JQuery中的attr方法。removeAttribute移除某个属性，获取属性值getAttribute。

className

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
    <script type="text/javascript">
    function getByClass(oParent, className){
        var result = [];
        var oTags = oParent.getElementsByTagName("*");
        for(var i=0; i<oTags.length; i++){
            if(oTags[i].className == className)
                result.push(oTags[i]);
        }
        return result;
    }
        window.onload = function(){
            var oUl = document.getElementById('ul');
            var cboxes = getByClass(oUl, "box");
            for(var i=0; i<cboxes.length; i++)
                cboxes[i].style.backgroundColor = "red";
        }
    </script>
</head>
<body>
    <ul id="ul">
        <li class="box">1</li>
        <li>2</li>
        <li class="box">32</li>
        <li class="box">4</li>
    </ul>
</div>
</body>
</html>

className用于判断标签使用的类选择器