Javascript- DOM对象

DOM 简介
DOM 操作HTML
DOM 操作CSS
DOMEventListener(句柄)

DOM简介

dom.png

DOM 操作HTML

DOM操作HTML.png

操作HTML.png

<body>
    <p id="pid">hello</p>
    <button onclick="demo()" >annniu</button>
    <script>
        function demo() {
            document.getElementById("pid").innerHTML = "nidaye";
            
        }

    </script>

<body>

    ![](1.png)
    <a id="aid" href="http://www.baidu.com">hello</a>
    <button onclick="demo()" >annniu</button>
    <script>
        function demo() {
            document.getElementById("aid").href ="http://www.app-echo.com";
          document.getElementById("aid").innerHTML = "echo";
          document.getElementById("imgid").src ="2.jpg";
        }

    </script>

通过DOM操作CSS

1.通过DOM对象改变CSS 语法：document.getElementById(id).style.property = new style

<body>

    <div id="id">
      hell0
    </div>
    <button onclick="demo()">按钮</button>
    <script>
    function demo() {
        document.getElementById("id").style.color ="blue";

    }
    </script>

DOMEventListener

方法：
addEventListener(): 方法用于向指定元素添加事件句柄
removeEventListener():移除方法添加的事件句柄

<body>

    <p id="pid">Hello</p>
    <button id="btn"  >按钮</button>
    <script>

        document.getElementById("btn").addEventListener("click",function () {
            alert("hello");
        })
      var x = document.getElementById("btn");
      x.addEventListener("click",hello);//句柄
      x.addEventListener("click",world);
      x.removeEventListener("click",hello);
        function hello() {
            alert("hello")
        }
        function world() {
            alert("world")
        }
    </script>

最后编辑于：2017.12.05 06:41:18

Javascript- DOM对象

推荐阅读更多精彩内容