javascript Node操作

时间：2022-05-23 06:28:26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>Untitled Document</title>

    </head>

    <script type="text/javascript">

     window.onload=function(){

         var ul=document.getElementsByTagName('ul')[0];

         //console.log(ul.nodeName);//UL

         var lis=ul.childNodes;

         for (var i = 0; i < lis.length; i++) {

             console.log('the '+i+'th node is '+lis[i].nodeName);

         }

         //the 0th node is #text

        // the 1th node is LI

        // the 2th node is #text

        // the 3th node is LI

        // the 4th node is #text

        // the 5th node is LI

        // the 6th node is #text

        ul=document.getElementsByTagName('ul')[1];

        lis=ul.childNodes;

        for (var i = 0; i < lis.length; i++) {

            console.log('the '+i+'th node is '+lis[i].nodeName);

        }

        // the 0th node is LI

        // the 1th node is LI

        // the 2th node is LI

        //很明显 回车也会被认为是一个Node

        //所以应该这么处理

        ul=document.getElementsByTagName('ul')[0];

        lis=ul.childNodes;

        for (var i = 0; i < lis.length; i++) {

            if(lis[i].nodeType==1){

                console.log('the '+i+'th node is '+lis[i].nodeName);

            }

        }

        // the 1th node is LI

        // the 3th node is LI

        // the 5th node is LI 

     }

    </script>

    <body>

        <ul>

            <li>li1</li>

            <li>li2</li>

            <li>li3</li>

        </ul>

        <ul><li>li1</li><li>li2</li><li>li3</li></ul>

    </body>

</html>

相关文章