JavaScript（2）DOM、BOM
阿新 • • 發佈：2021-06-17
DOM
- DOM：Document Object Model文件物件模型。當網頁被載入時，瀏覽器會建立頁面的DOM物件（window.document）。
- 查詢HTML元素：
// 通過ID查詢元素物件（單個） var x = document.getElementById("cqzid"); // 通過標籤名查詢元素物件陣列HTMLCollection（多個） var y = document.getElementsByTagName("a"); // 通過Class查詢元素物件陣列HTMLCollection（多個） var z = document.getElementsByClassName("cqzclass");
- 修改HTML元素
// 改變HTML內容（使用ID獲取） document.getElementById("cqzid").innerHTML = "跳轉Hao123"; // 改變HTML屬性（使用Class獲取） document.getElementsByClassName("cqzclass")[0].href = "http://www.hao123.com"; // 改變HTML樣式（使用元素獲取） document.getElementsByTagName("a")[0].style.color = "green";
- 事件：就是使用者和瀏覽器之間的互動行為。事件可以是瀏覽器行為（頁面載入完成、按鈕被點選、輸入框值變化等），也可以是使用者行為（單擊、雙擊、懸浮、鍵盤輸入等）。通常，在事件觸發時可以執行一些JavaScript程式碼。
<body onload="testShiJian()">頁面載入事件 滑鼠單擊事件： <input type="button" value="測試單擊" onclick="testShiJian()" /> 滑鼠雙擊事件： <input type="button" value="測試雙擊" ondblclick="testShiJian()" /> 滑鼠懸停移出事件： <div id="div01" onmouseover="testMouseOver()" onmouseout="testShiJian()"></div> 鍵盤下壓事件： <input type="text" name="" id="" value="" onkeydown="testShiJian()" /> 鍵盤彈起事件： <input type="text" name="" id="" value="" onkeyup="testShiJian()" /> 獲取焦點事件： <input type="text" name="" id="" value="" onfocus="testShiJian()" /> 失去焦點事件： <input type="text" name="" id="" value="" onblur="testShiJian()" /> 下拉框值改變事件： <select name="" id="" onchange="testShiJian()"> <option value="">北京</option> <option value="">上海</option> <option value="">商丘</option> </select> <!-- 使用JavaScript動態新增onclick事件 --> <input type="button" value="測試單擊" id="cqz" value="" /> </body> <script> function testShiJian() { alert("我是事件處理程式碼"); } // 動態新增onclick事件需要使用function裡面呼叫已有方法。 document.getElementById("cqz").onclick = function () { testShiJian(); }; </script>