菜鸟web笔记

 <!--

        js入门三部曲：

            1、找到谁    获取元素

            2、加事件    

            3、做什么事  

     -->

    <div id="box">你是谁！！！</div>

    <script>

        /*  

            通过id名称获取

            语法： document.getElementById("id名称")

                    文档    获取  元素 通过  id

            使用：获取单个元素

        */

        // 1、获取元素

       var oBox = document.getElementById("box");

       console.log( document.getElementById("box"));

       console.log(oBox);

    /*

        添加事件：

            语法：元素.onclick = function(){ 做什么事 }

    */

    // 2、加事件  点击事件

    oBox.onclick = function(){

        // 3、做什么事

        alert("哈哈哈哈");

    }

 

    </script>

<script>

        /*

            通过标签名获取元素

            获取整个文档的标签

            语法：document.getElementsByTagName("标签名");

            获取父元素中对应的标签

            语法：父元素.getElementsByTagName("标签名");

       

        */

        // 获取到页面中所有的div标签

       var oBox = document.getElementsByTagName("div");

       var oP = document.getElementsByTagName("P");//标签名不区分大小写

       console.log(oBox);

       console.log(oP);

        //    拿到第二个div标签

        oBox[1].onclick = function(){

            alert("11111");

        }

        console.log(oBox[1]);//   <div>4</div>

        // 获取页面中的第一个ul

        var oUl = document.getElementsByTagName("ul")[0];// oUl[0]

        //获取第一个ul  oUl[0]

        console.log(oUl);

        //获取第一个ul中对应的li标签

        var oLi = oUl.getElementsByTagName("li");

        console.log(oLi);

    </script>