JavaScript基础学习第三天

Source

HTML DOM:
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
DOM操作HTML,JavaScrpt 能够改变页面中的所有HTML的元素、属性、和CSS样式,也能够对页面中的所有事件作出反应。

  1. 改变HTML输出流: 不可以在文档加载完成后使用document.write(),因为会覆盖该文档
  2. 寻找元素: 通过ID 找到HTML元素。 通过标签名找到HTML元素。
  3. 改变HTML内容: 使用属性:innerHTML
  4. 改变HTML属性: 使用属性:arribute

另外,addEventListener添加多个句柄,不会覆盖。
在这里插入图片描述
在这里插入图片描述

    <link rel ="Stylesheet" type ="text/css" href ="Style1.css" />
<body>
    <form id="form1" runat="server">
    <div id ="div" class = "div"> 
    <button onclick="demo()">更改背景颜色</button>
    <script>
        function demo()
        {
           document.getElementById("div").style.background ="blue";    //实例1
        }
    </script>
    
    <p id = "pid">Hello</p>  
     <script>                        //写在body中,改变HTML内容         //实例2
        document.getElementById("pid").innerHTML= "ddddddd"; 
     </script>
     
     <a id="aid" href ="http://www.bolg.com"> 点击进入</a>
     <button onclick ="ChangeValue" >改变</button>
     <script>
         function ChangeValue()   //修改a 的属性,src图片也可以。        //实例3
         {
         document.getElementById("aid").href ="http://www.jing.com";
         }
     </script>


     <button id = "bnt">按钮</button>    //句柄应用                    //实例4
     <script>
       document.getElementById("bnt").addEventListener("CLICK",function(){ alert("dd");});
     // document.getElementById("bnt").removeEventListener("click",hello);  //移除方法
     </script>

    </div>
    </form>
</body>