python 之前端開發（ DOM操作）

11.47 DOM操作查找節點： HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時執行一段JavaScript。下麵是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。 1、常用事件 2、綁定方式方式一： ...

11.47 DOM操作

查找節點：

11.471 直接查找

document.getElementById           //根據ID獲取唯一一個標簽
document.getElementsByClassName   //根據class屬性獲取一系列標簽
document.getElementsByTagName     //根據標簽名獲取一系列標簽

11.472 間接查找

語法	含義
childNodes	獲取所有的子節點，除了元素還有文本等
children	獲取所有元素子節點，不包含文本
parentNode	獲取父節點
previousSibling	獲取上一個兄弟節點，不包含文本
previousElementSibling	獲取上一個兄弟元素節點，包含文本
nextSibling	獲取下一個兄弟節點，不包含文本
nextElementSibling	獲取下一個兄弟元素節點，包含文本
firstChild	獲取第一個子節點，不包含文本
firstElementChild	獲取第一個子節點，包含文本
lastChild	獲取最後一個子節點，不包含文本
lastElementChild	獲取父元素最後一個元素節點，包含文本

11.473 增加節點

1、創建新節點
var divEle = document.createElement('div');
2、追加一個子節點（放到最後）
父節點.appendChild(新的子節點)；
3、插入一個子節點（插入到某個節點前）
父節點.insertBefore(新的子節點,某個節點); 
4、克隆節點
要複製的節點.cloneNode();       //括弧里不帶參數和帶參數false：只複製節點本身，不複製子節點。
要複製的節點.cloneNode(true);   //帶參數true：既複製節點本身，也複製其所有的子節點。

11.474 刪除、替換節點

父節點.removeChild(要刪除的子節點)；
父節點.replaceChild(新的子節點, 某個子節點);

11.475 修改/設置節點屬性

1、獲取文本節點的值：
var divEle = document.getElementById("d1")
divEle.innerText                            //只查看所有標簽內的文本                   
divEle.innerHTML                            //查看所有子標簽，包括文本和子標簽
2、設置文本節點的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"                //先清空節點內容，再添加文本(字元串:'<h1>我是h1</h1>')
divEle.innerHTML="<p>2</p>"         //先清空節點內容，可識別文本內的html標簽(標簽:'<h1>我是h1</h1>')
3、attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
4、自帶的屬性還可以直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."

11.476 獲取元素的值

適用於input、select、textarea標簽
var x=document.getElementById('input')
var y=document.getElementById('select')
var z=document.getElementById('textarea')
x.value
y.value
z.value

11.477 class操作

var x=document.getElementById('div1')

x.classList.remove('col1')          //x.classList里刪除class='col1'
x.classList.add('col1')             //x.classList里添加class='col1'
x.classList.contains('col1')        //x.classList里是否有class='col1'
x.classList.toggle('col1')          //沒有就添加，返回true，有就刪除，返回false

11.478 css操作

obj.style.backgroundColor="red"                         //此處設置的是行內樣式
1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可 如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可 如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

11.479 事件

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時執行一段JavaScript。下麵是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。

1、常用事件

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               // 輸入框
onblur         元素失去焦點。               //應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             //應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          //應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成載入。
onmousedown    滑鼠按鈕被按下。
onmousemove    滑鼠被移動。
onmouseout     滑鼠從某元素移開。
onmouseover    滑鼠移到某元素之上。

onselect      //在文本框中的文本被選中時發生。
onsubmit      ///確認按鈕被點擊，使用的對象是form。

2、綁定方式

方式一：

行內綁定：直接通過div被點擊來修改自身樣式：

<body>
<div id="div1" onclick="changeColor(this)"> 我是div，點我 </div> 
<script>                                                  //this是實參，表示觸發事件的當前元素
  function changeColor(ths) {
    ths.style.backgroundColor="green";                      //函數定義過程中的ths為形參
  }
</script>
</body>

通過button被點擊來修改另一個div標簽樣式：

<body>
<input type="button" id="b1" value="開關" onclick="change()">
<div class="c1 bg-red"></div>
<script>                                              //<script>必須放在div定義後，可以放在body里
    function change() {                             
        var c1Ele = document.getElementsByClassName("c1")[0]; // 找到c1這個標簽 
        c1Ele.classList.toggle("bg-green");                  // 修改classList
    }
</script>
</body>

方式二：

直接綁定匿名函數：直接通過div被點擊來修改自身樣式：

<body>
<div id="div1">來，點亮我的綠</div>
<script>
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function() {
        this.style.backgroundColor = 'red';
    }
</script>
</body>

通過button被點擊來修改另一個div標簽樣式：

<body>
<input type="button" id="b2" value="開關">
<div class="c1 bg-red"></div>
<script>
    function change() {
        var c1Ele = document.getElementsByClassName("c1")[0]; // 找到c1這個標簽
        c1Ele.classList.toggle("bg-green");                 // 修改classList
    }
    var b2Ele = document.getElementById("b2");               // 通過JS代碼綁定事件
    b2Ele.onclick = ()=>{
        change();
    }
</script>
</body>

方式三：

先單獨定義函數，再綁定

<div id="box1" ></div>
<script>
    var div1 = document.getElementById("box1");
    div1.onclick = fn;              //註意，這裡是fn，fn代表的是整個函數,fn()指的是返回值。
    function fn() {                 //單獨定義函數
        alert("我是彈出的內容");
    }
</script>

11.4791 定時器

<body>
<input type="button" id="b1" value="開始">
<input type="button" id="b2" value="停止">
<input type="text" id="i1">
<script>
    var t;
    function showTime() {      
        var now = new Date();            // 將當前時間填寫到i1中
        var i1Ele = document.getElementById("i1");
        i1Ele.value = now.toLocaleString();
    }
    showTime();                         //1找到開始按鈕,給它綁定事件,點擊後每隔1秒執行一次showTime()
    var b1Ele = document.getElementById("b1");
    b1Ele.onclick = function () {
        if (!t){
           t = setInterval(showTime, 1000); 
        }
    };
    var b2Ele = document.getElementById("b2");//2找到停止按鈕，給它綁定事件，點擊之後就清除定時器
    b2Ele.onclick = function () {       
        clearInterval(t);             // 清除的是定時器，
        console.log(t);
        t = undefined;               //t只是一個普通的變數，它保存了定時器的id值,清除定時器後t中還有值
    };
</script>
</body>

定時器

11.4792 輸入框聚焦

<body>
<input type="text" id="i1" value="海飛絲">
<input type="text" id="i2" value="辣條" onfocus="f1(this);" onblur="f2(this);">
<script>                                    //this指的是當前事件的標簽對象
    //方式一
    function f1(ths) {
        ths.value = "";
    }
    function f2(ths) {
        ths.value = "辣條";
    }

    //方式二
   var i1Ele = document.getElementById("i1");
   i1Ele.onfocus = function () {                // 給i1設置獲取游標的事件
       this.value = "";
   };
   i1Ele.onblur = function () {
       this.value = "海飛絲";                   // 給i1設置失去游標的事件
   }
</script>
</body>

View Code

11.4793 select聯動

<body>
<select id="province">
    <option>請選擇省:</option>
</select>
<select id="city">
    <option>請選擇市:</option>
</select>
<script>
    var s1Ele = document.getElementById("province");
    var s2Ele = document.getElementById("city");
    var data = {"上海": ["黃浦區", "靜安區"], "北京": ["朝陽區", "海澱區"], "山東": ["威海市", "煙臺市"]};
    for (let k in data) {               // 將省直轄市數據填充到第一個select中
        //console.log(k);
        let tmp = document.createElement("option");
        tmp.innerText = k;
        s1Ele.appendChild(tmp);          // 將創建的tmp添加到第一個select中
    }
    s1Ele.onchange = function () {      // 當第一個select框的值發生變化之後才去更新第二個select框
        s2Ele.innerHTML = "";           //第二次選擇區時清空第二個select框的option選項
        let p = document.createElement("option");//恢復預設選項'請選擇省市'
        p.innerText = "請選擇市";
        s2Ele.appendChild(p);
        //console.log(this.value);
        let provine = this.value;       //拿到選擇的省或直轄市

        // 將province對應的區信息 填充到第二個select中
        for (let i = 0; i < data[provine].length; i++) {
            let tmp = document.createElement("option");
            tmp.innerText = data[provine][i];
            s2Ele.appendChild(tmp);
        }
    }
</script>
</body>