JavaScript基础学习第三天_原生 javascript 实现 joystick-CSDN博客

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

改变HTML输出流：不可以在文档加载完成后使用document.write(),因为会覆盖该文档
寻找元素：通过ID 找到HTML元素。通过标签名找到HTML元素。
改变HTML内容：使用属性:innerHTML
改变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>