JavaScriptDOM物件

科技小能手發表於2017-11-12
JavaScript物件

一、DOM簡介

    1.HTML DOM：當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）


                    ->Element:<head>->Element:<title>->Text:”My title”

    document->Root element:<html>-> 

                    ->Element:<body>…

    2.DOM操作HTML：JavaScript能夠改變頁面中的所有HTML元素。

            JavaScript能夠改變頁面中的所有HTML屬性。

            JavaScript能夠改變頁面中的所有CSS樣式。

            JavaScript能夠對頁面中的所有事件作出反應。


二、DOM操作HTML

    1.改變HTML輸出流：注意，不要在文件載入完成之後使用document.write()。這會覆蓋文件

    2.尋找元素：通過id找到HTML元素

          通過標籤名找到HTML元素

    3.改變HTML內容：使用屬性:innerHTML

    4.改變HTML屬性：使用屬性：attribute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a id="aid" href="http://www.baidu.com">連結</a>
        <button onclick="demo()">按鈕</button>
        <script>
            function demo(){
                document.getElementById("aid").href="http://www.51cto.com";
            }
        </script>
    </body>
</html>

    

三、DOM操作CSS

    1.通過DOM物件改變CSS。

    語法：document.getElementById(id).style.property=new style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="div" class="div">
            Hello
        </div>
        <button onclick="demo()">按鈕</button>
        <script>
            function demo(){
                document.getElementById("div").style.background = "blue";
            }
        </script>
    </body>
</html>


四、DOM EventListener

    1.DOM EventListener：

      方法：addEventListener(): 

          removeEventListener():

    2.addEventListener():方法用於向指定元素新增事件控制程式碼

    3.removeEventListener():移除方法新增的事件控制程式碼   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <button id="btn">按鈕</button>
        <script>
            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>
    </body>
</html>




         本文轉自yeleven 51CTO部落格，原文連結:http://blog.51cto.com/11317783/1793085


相關文章