代码改变世界

window.onload使用

2012-08-09 16:49  youxin  阅读(236)  评论(0)    收藏  举报 
<html>
<head>
    <title>Introduction to the DOM</title>
    <script>
    // We can't manipulate the DOM until the document
    // is fully loaded
    window.onload = function(){

        // Find all the <li> elements in the document
        var li = document.getElementsByTagName('li');

        // and add a ared border around all of them
        for ( var j = 0; j < li.length; j++ ) {
            li[j].style.border = '1px solid #000';
        }

        // Locate the element with an ID of 'everywhere'
        var every = document.getElementById( "everywhere" );

        // and remove it from the document
        every.parentNode.removeChild( every );

    };
    </script>
</head>
<body>
    <h1>Introduction to the DOM</h1>
    <p class="test">There are a number of reasons why the DOM is awesome, here are some:</p>
    <ul>
        <li id="everywhere">It can be found everywhere.</li>
        <li class="test">It's easy to use.</li>
        <li class="test">It can help you to find what you want, really quickly.</li>
</ul> 
</body>
 </html>

使用Dom去掉了第一个li。只显示后面2个。

 改变以上的代码，可以有一个特效：

 <script>
    // We can't manipulate the DOM until the document
    // is fully loaded
    window.onload = function(){

        // Find all the <li> elements, to attach the event handlers to them
        var li = document.getElementsByTagName('li');
        for ( var i = 0; i < li.length; i++ ) {

            // Attach a mouseover event handler to the <li> element,
            // which changes the <li>s background to blue.
            li[i].onmouseover = function() {
                this.style.backgroundColor = 'blue';
            };

            // Attach a mouseout event handler to the <li> element
            // which changes the <li>s background back to its default white
            li[i].onmouseout = function() {
                this.style.backgroundColor = 'white';
            };

        }

    };
    </script>