04: Dom

時間 2019-12-01

標籤 dom 欄目 HTML 简体版

原文原文鏈接

1.1 獲取標籤：直接選擇器和間接選擇器返回頂部

　　一、Dom做用html

　　　　　　1. 經過 tag, name, id 等方式來查找html標籤中的內容java

　　　　　　2. 文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口node

　　　　　　3. 它給文檔提供了一種結構化的表示方法，能夠改變文檔的內容和呈現方式jquery

　　　　　　4. DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。編程

　　二、四種Dom直接選擇器做用數組

　　　　　　1. document.getElementById # 根據ID獲取一個標籤（字符串）瀏覽器

　　　　　　2. document.getElementsByClassName # 根據class屬性獲取標籤集合（數組）app

　　　　　　3. document.getElementsByName # 根據name屬性獲取標籤集合（數組）dom

　　　　　　4. document.getElementsByTagName # 根據標籤名獲取標籤集合（數組）

# 1. 根據ID獲取一個標籤（字符串）
    document.getElementById('i1');                             # 經過標籤id獲取標籤
    document.getElementById('i1').innerText = '新內容';         # 獲取標籤中的內容並附新值
    
# 2. 根據class屬性獲取標籤集合（數組）
    document.getElementsByClassName('c1')                      # 獲取全部class=’c1’的標籤，以數組返回
    document.getElementsByClassName('c1')[0]                   # 獲得全部匹配標籤中的一個
    document.getElementsByClassName('c1')[0].innerText         # 獲取標籤中的內容

# 3. 根據name屬性獲取標籤集合（數組）
    document.getElementsByName('i1name')                       # 獲取全部name=’i1name’的標籤並以數組形式返回
    document.getElementsByName('i1name')[0]                    # 獲取第一個匹配的標籤
    document.getElementsByName('i1name')[0].innerText          # 獲取第一個匹配標籤的值
    
# 4. 根據標籤名獲取標籤集合（數組）
    document.getElementsByTagName('a');                        # 獲取全部a標籤（以列表形式返回）
    document.getElementsByTagName('a')[1];                     # 獲取a標籤列表中的第二個元素
    document.getElementsByTagName('a')[1].innerText = 'sb';    # 將第二個a標籤內容改爲sb

四種DOM直接選擇器

　　三、DOM間接選擇器做用

　　　　　　1. parentElement // 父節點標籤元素

　　　　　　2. children // 全部子標籤

　　　　　　3. firstElementChild // 第一個子標籤元素

　　　　　　4. lastElementChild // 最後一個子標籤元素

　　　　　　5. nextElementtSibling // 下一個兄弟標籤元素

　　　　　　6. previousElementSibling // 上一個兄弟標籤元素

# parentNode                 // 父節點
# childNodes                 // 全部子節點
# firstChild                 // 第一個子節點
# lastChild                  // 最後一個子節點
# nextSibling                // 下一個兄弟節點
# previousSibling            // 上一個兄弟節點

# parentElement              // 父節點標籤元素
# children                   // 全部子標籤
# firstElementChild          // 第一個子標籤元素
# lastElementChild           // 最後一個子標籤元素
# nextElementtSibling        // 下一個兄弟標籤元素
# previousElementSibling     // 上一個兄弟標籤元素

更多間接查找

# 1. tag = document.getElementById('i1');      //首先找到id=i1的標籤
# 2. tag.parentElement                         //找到id='i1'父級div標籤（也就是外層標籤）
# 3. tag.parentElement.children                //經過父級標籤找到全部子標籤

間接查找舉例

1.2 操做標籤返回頂部

　　一、對標籤內容操做

　　　　　　　　tag = document.getElementById('i1'); //首先找到id=i1的標籤並賦值給tag

　　　　1. tag.innerText

　　　　　　　　做用： 只能獲取指定標籤的文本內容，若是標籤中有其餘子標籤，自動忽略

　　　　　　　　tag.innerText="<a href='https://www.baidu.com'>百度</a>" //將內容當字符串，替換對應的文本內容

　　　　2. tag. innerHTML

　　　　　　　　做用： 能夠獲取指定標籤中全部內容，若是裏面有不少子標籤也能獲取

　　　　　　　　tag.innerHTML = "<a href='https://www.baidu.com'>百度</a>" //將內容當作a標籤添加到模塊中

　　　　3. tag.value

　　　　　　　　一、用來獲取input框中輸入的內容的值

　　　　　　　　二、能夠用來獲取select中選中對象對應的value值

　　　　　　　　三、能夠獲取textarea 多行文本中的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 600px;margin: 0 auto;">
    <!--onfocus 事件在對象得到焦點時發生自動執行Focus函數-->
    <!--onblur當焦點移出時自動執行Blur函數-->
    <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="請輸入關鍵字"/>
</div>

<script>
    //1 當鼠標移到輸入框，將輸入框中內容清空
    function Focus(){
        var tag = document.getElementById('i1');    //獲取輸入框標籤
        var val = tag.value;                        //獲取輸入框標籤中的值
        if(val == "請輸入關鍵字"){                  //將輸入框中內容清空
            tag.value = "";
        }
    }

    //2 若是沒有在輸入框中寫任何東西就移走，那麼就從新寫上「請輸入關鍵字」
    function Blur(){
        var tag = document.getElementById('i1');
        var val = tag.value;
        if(val.length ==0){
            tag.value = "請輸入關鍵字";
        }
    }
</script>
    <!--<input type="text" placeholder="請輸入關鍵字" />   這個是新html內容，這句話就能夠實現搜索框-->
</body>
</html>

實現請輸入關鍵字舉例

　　二、對class標籤樣式操做

　　　　　　1. tag.className = 'c1'; //將tag中標籤修改爲class標籤c1

　　　　　　2. tag.classList.add('c2'); //將tag中標籤添加一個class標籤c2

　　　　　　3. tag.classList.remove('c2') //將tag中剛添加的class標籤c2刪除

　　　　　　4. tag.classList //查看tag標籤中全部class標籤，以列表形式返回

　　三、對style屬性操做

　　　　　　說明： 在JavaScript中修改style樣式與html中區別是將橫槓省略變成大小寫（如：font-size在JavaScript中是： fontSize）

　　　　　　tag = document.getElementById('i1');

　　　　　　tag.style.color = 'red'; //利用style將字體顏色修改爲紅色

　　　　　　tag.style.backgroundColor = ‘red’;

　　四、對屬性操做

　　　　　　tag = document.getElementById("i2");

　　　　　　1. tag.attributes 獲取全部屬性,以列表返回結果

　　　　　　2. tag.setAttribute("value","lisi"); 將屬性value的值改爲value="lisi"

　　　　　　3. tag.removeAttribute("value"); 刪除標籤中的value屬性的值

　　　　　　4. tag.getAttribute("name"); 獲取屬性name的值

　　五、建立標籤

#  方式一
    var tag = document.createElement('a')
    tag.innerText = "xiaonq"
    tag.className = "c1"
    tag.href = "http://www.cnblogs.com/xiaonq"

#  方式二
    var tag = "<a class='c1' href='http://www.cnblogs.com/xiaonq'>xiaonq</a>"

建立簡單標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div class="content_div">

    </div>

    <script src="/static/jquery-1.12.4.min.js"></script>
    <script>
        // <a href="javascript:void(0);" class="like_btn f1" like_count="0" onclick="like(this,0)" like_tag="">已贊(1)</a>
        $(function () {
            var content_div = document.getElementsByClassName('content_div')[0];
            a_comment = document.createElement('a');
            a_comment.href = 'javascript:void(0);';
            a_comment.className = 'like_btn f1';
            a_comment.setAttribute('like_count','0');
            a_comment.setAttribute('onclick',"like(this," + 0 + ")");
            a_comment.innerText = '贊(0)';
            content_div.appendChild(a_comment);
        });

        function like(ths,num) {
            var like_count = $(ths).attr('like_count');
            if(!ths.hasAttribute('like_tag')){                 // 點贊
                var like_count = eval(like_count + "+" + 1);
                ths.setAttribute('like_tag','');
                var content = "已贊(" + like_count + ')';
            }else {                                            // 取消點贊
                ths.removeAttribute('like_tag','');
                var content = "贊(" + like_count + ')';
            }
            ths.innerText = content
        }
    </script>
</body>
</html>

建立a標籤並綁定地點擊事件（點贊）

<body>
    <div id="div1">
        <p id="p1">This is a paragraph.</p>
        <p id="p2">This is another paragraph.</p>
    </div>

    <script>
        var para=document.createElement("p");
        var node=document.createTextNode("This is new.");
        para.appendChild(node);

        var element=document.getElementById("div1");
        element.appendChild(para);
    </script>
</body>

appendChild追加新建立的標籤

<body>
    <div id="verify_code">
        <p onclick="create_verify_code_img()">點擊建立img標籤</p>
    </div>

    <script>
        /* 建立img標籤及屬性 */
        // <img id="verify_code_img" src="/verify_code/" class="verify_code">
        function create_verify_code_img() {
                var img = document.createElement('img');
                img.id = 'verify_code_img';
                img.src = '/app01/verify_code/';
                img.className = 'verify_code';
                img.onclick = reload_verify_code;
                document.getElementById('verify_code').appendChild(img)
        }

        function reload_verify_code() {
            console.log('reload_verify_code函數被調用')
        }
    </script>
</body>

建立img標籤並添加綁定事件

1.3 DOM其餘操做返回頂部

　　一、指定標籤位置插入的四種方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="AddEle1();" value="+" />
    <div id="i1">
        <p><input type="text" /></p>
    </div>

    <script>
        //字符串建立方法
        function AddEle1(){
            // 建立一個標籤
            // 將標籤添加到i1裏面
            var tag = "<p><input type='text'/></p>";
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
    </script>
</body>
<!--注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'-->
</html>

點擊加號自動添加input框

　　二、綁定事件提交表單

　　　　　　document.getElementById("myForm").submit()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="myForm" action="/login/" method="get">
        <input type="text" name="firstname" size="20">
        <input type="button" onclick="formSubmit()" value="提交">
    </form>

    <script type="text/javascript">
        function formSubmit(){
            document.getElementById("myForm").submit()
        }
    </script>
</body>
</html>

綁定事件提交表單

　　三、URL和刷新

　　　　　　1） location.href 獲取URL

　　　　　　2） location.href = "url" 重定向

　　　　　　 window.location.href='/app01/'

　　　　　　3） location.reload() 刷新當前頁面

　　四、定時器

　　　　　　1）setInterval 屢次定時器

　　　　　　2）clearInterval 清除屢次定時器（定時器中內容不執行）

　　　　　　3）setTimeout 單次定時器

　　　　　　4）clearTimeout 清除單次定時器

　　五、輸出提示信息

　　　　　　1. console.log("輸出到屏幕") 輸出框

　　　　　　2. alert('彈出框'); 彈出框

　　　　　　3. confirm 確認框

1.4 DOM綁定事件的三種方法返回頂部

　　一、直接標籤綁定 onclick = 'xxx()'

<div id="test" onclick="t1()">
    dsad
</div>
<script>
    function t1(){
        console.log('點擊輸出內容');
    }
</script>

直接綁定舉例

　　二、DOM查找標籤動態綁定

<div id="test" >
    dsad
</div>
<script>
    var mydiv = document.getElementById("test");
    console.log(mydiv);
    mydiv.onclick = function(){
        console.log("點擊輸出內容");
    }
</script>

DOM查找標籤動態綁定

　　三、一個事件同時出發多個函數

<div id="test" >
    aaa
</div>
<script>
    var mydiv = document.getElementById("test");
    //addEventListener提供了三個參數
    //第一：綁定的事件，第二：觸發的匿名函數，第三：只能是true(從事到下打印)或false(重下到上)
    mydiv.addEventListener('click',function(){console.log('aaa2')},true);
    mydiv.addEventListener('click',function(){console.log('bbb1')},true);
</script>