JavaScript-DOM

時間 2019-12-05

原文原文鏈接

DOM事件操做
一.JavaScript的組成
    JavaScript基礎分爲三個部分：
        ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
        DOM：文檔對象模型，操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。
        BOM：瀏覽器對象模型，操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。
二.事件(JavaScript是一門以事件爲核心的語言)
    事件的三要素：事件源、事件、事件驅動程序

    總結以下：
        事件源：引起後續事件的html標籤
        事件：js已經定義好了
        事件驅動程序：對樣式和html的操做。也就是DOM

    代碼書寫步驟以下：

        （1）獲取事件源：document.getElementById(「box」);
        （2）綁定事件： 事件源box.事件onclick = function(){ 事件驅動程序 };
        （3）書寫事件驅動程序：關於DOM的操做
    代碼舉例
            <body>
            <div id="box"></div>
            <script type="text/javascript">
                //1.獲取事件源
                var odiv=document.getElementById('box');
                //2.綁定事件
                odiv.onclick=function(){
                    //3.書寫事件的驅動程序
                    alert('廣告')
                }
            </script>
            </body>
　　常見事件

　　onload事件:
    　　當頁面加載（文本和圖片）完畢的時候，觸發onload事件,js的加載是和html同步加載的。所以，若是使用元素在定義元素以前，容易報錯
    　　咱們能夠把使用元素的代碼放在onload裏，就能保證這段代碼是最後執行

    獲取事件源的方式(DOM節點的獲取)

        var div1 = document.getElementById("box1");      //方式一：經過id獲取單個標籤
        var arr1 = document.getElementsByTagName("div1");     //方式二：經過 標籤名 得到 標籤數組，因此有s
        var arr2 = document.getElementsByClassName("hehe");  //方式三：經過 類名 得到 標籤數組，因此有s

    綁定事件的方式
        方式一:
            <body>
            <div id="box"></div>
            <script type="text/javascript">
                var odiv=document.getElementById('box');
                // 直接綁定匿名函數
                odiv.onclick=function(){
                    odiv.style.height='200px';
                    odiv.style.width='200px';
                    odiv.style.backgroundColor='green';
                }
            </script>
        方式二:
            <body>
            <div id="box"></div>
            <script type="text/javascript">
                var odiv=document.getElementById('box');
                //先綁定函數
                odiv.onclick=fn;//綁定時用的是fn,而不是fn(),由於fn是整個函數,fn()是這個函數的返回值
                //再單獨定義函數
                function fn(){
                    odiv.style.height='200px';
                    odiv.style.width='200px';
                    odiv.style.backgroundColor='green';
                }
            </script>
            </body>
        方式三:
            <body>
            <!--事件源直接就是這個div 綁定的事件就是點擊-->
            <div id="box" onclick="fn()"></div>
            <script type="text/javascript">
                function fn(){
                    //默認的是用id進行綁定的
                    box.style.height='200px';
                    box.style.width='200px';
                    box.style.backgroundColor='green';
                }
            </script>
            </body>
    事件驅動程序
        <body>
        <div id="box" onclick="fn()"></div>
        <script type="text/javascript">
            function fn(){
                box.style.height='200px';//在js裏寫屬性值時要用引號
                box.style.width='200px';
                box.style.backgroundColor='green';//寫屬性名時要用駝峯體而不是引號
            }
        </script>
        </body>

    實例:當鼠標懸停在img上時，更換爲另一張圖片；鼠標離開時，還原爲原本的圖片
        方式一:
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
            </head>
            <body>
            <img id="s1" src="./手機1.jpg" >
            <script>
                var os1=document.getElementById('s1');
                os1.onmouseover=function(){
                    os1.src='./手機2.jpg';
                }
                os1.onmouseout=function(){
                    os1.src='./手機1.jpg';
                }
            </script>
            </body>
        方式二:
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
            </head>
            <body>
            <img id="im" onmouseover='fn()' onmouseout="vn()"  src="./手機1.jpg" alt="aaa">
                <script>
                function fn(){
                    im.src='./手機2.jpg';
                }
                function vn(){
                    im.src='./手機1.jpg';
                }
            </script>
            </body>
    實例:盒子的顯示隱藏
        <body>
        <button id="btn">隱藏</button>
        <div id="box"></div>
        <script>
            var show=true;
            var odiv=document.getElementById('box');
            var obtn=document.getElementById('btn');
            obtn.onclick=function() {
                if (show) {
                    odiv.style.display = 'none';
                    obtn.innerText = '顯示';
                    show=false;
                } else {
                    odiv.style.display = 'block';
                    obtn.innerText = '隱藏';
                    show=true;
                }
            }
        </script>
        </body>
三.DOM介紹
    什麼是DOM
        DOM：文檔對象模型。DOM 爲文檔提供告終構化表示，並定義瞭如何經過腳原本訪問文檔結構。
            目的其實就是爲了能讓js操做html元素而制定的一個規範。
        DOM就是由節點組成的。
    解析過程
        HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。
        而後操做的時候修改的是該元素的屬性。
    DOM樹(一切都是節點)

相關標籤/搜索

javascriptdom

HTML

JavaScript

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。