5-3 DOM操作詳解 · 前端筆記

### JavaScript是前臺語言 JavaScript運行在用戶的終端網頁上，而不是服務器上，所以我們稱為“前臺語言”。JavaScript就是一個簡單的制作頁面效果的語言，就是服務于頁面的交互效果、美化、絢麗，不能操作數據庫。 ### JavaScript的做成 JavaScript基礎分為三個部分： > ECMAScript: JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。 > > DOM：操作網頁上元素的API。比如讓盒子移動、變色、輪播等。 > > BOM：操作瀏覽器部分功能的API，比如上瀏覽器自動滾動。 ### JavaScript用法 ~~~ HTML中的腳本必須位于<script>與<script>標簽之間。腳本可被放置在HTML頁面的<body>和<head>部分中。 ~~~ ### JavaScript網頁中輸出信息的寫法 #### 彈出警告框：alert（""） ~~~ <script type="text/javascript"> ? ? ? ? ? ?alert("生命壹號"); </script> ~~~ #### 控制臺輸出：console.log("") #### 用戶輸入：prompt()語句 ~~~ <script type="text/javascript"> ? ? ? var a = prompt("隨便寫些什么吧！"); //必須用一個變量來接收用戶給的值 ? ? ? console.log(a); ? </script> ~~~ ### DOM操作詳解 #### 事件：JS是以**事件驅動為核心**的一門語言 **事件的三要素：事件源、事件、事件驅動程序** **總結如下：** 1.事件源：引發后續事件的html標簽 2.事件：js已經定義好了的（如下圖） 3.事件驅動程序：對樣式和html的操作，也就是DOM **代碼書寫步驟具體如下**（重點）：（1）獲取事件源：document.getElementById(“box”); // 類似于Android里面的findViewById （2）綁定事件：事件源box.事件onclick = function(){ 事件驅動程序 }; （3）書寫事件驅動程序：關于DOM的操作。 ~~~ <body> <div id="box1"></div> <script type="text/javascript"> ? // 1、獲取事件源 ? var div = document.getElementById("box1"); ? // 2、綁定事件 ? div.onclick = function () { ? ? ? // 3、書寫事件驅動程序 ? ? ? alert("我是彈出的內容"); ? } </script> </body> ~~~ 常見的事件如下： ![](https://box.kancloud.cn/6567c29d6932cea5ba82a9fff7ed6683_582x464.png) 下面針對這事件的三要素，分別介紹 #### 1.獲取事件源的方式（DOM節點的獲取）獲取事件源的常見方式如下： ~~~ var div1 = document.getElementById("box1"); ? ? ?//方式一：通過id獲取單個標簽 ? ? ?var arr1 = document.getElementsByTagName("div1"); ? ? //方式二：通過標簽名獲得標簽數組，所以有s ? ? ?var arr2 = document.getElementsByClassName("hehe"); ?//方式三：通過類名獲得標簽數組，所以有s ~~~ #### 2.綁定事件的方式方式一：直接綁定匿名函數 ~~~ <div id="box1" ></div> <script type="text/javascript"> ? ?var div1 = document.getElementById("box1"); ? ?//綁定事件的第一種方式 ? ?div1.onclick = function () { ? ? ? ?alert("我是彈出的內容"); ? } </script> ~~~ 方式二：先單獨定義函數，再綁定 ~~~ <div id="box1" ></div> ? <script type="text/javascript"> ? ?var div1 = document.getElementById("box1"); ? ?//綁定事件的第二種方式 ? ?div1.onclick = fn; ? //注意，這里是fn，不是fn()。fn()指的是返回值。 ? ?//單獨定義函數 ? ?function fn() { ? ? ? ?alert("我是彈出的內容"); ? } </script> ~~~ 注意上方代碼的注釋。**綁定的時候，是寫fn，不是寫fn()**。fn代表的是整個函數，而fn()代表的是返回值方式三：行內綁定 ~~~  <div id="box1" onclick="fn()"></div> ? <script type="text/javascript"> ? ? ?function fn() { ? ? ? ?alert("我是彈出的內容"); ? } ? </script> ~~~ 注意第一行代碼，綁定時，是寫的`"fn()"`，不是寫的`"fn"`。因為綁定的這段代碼不是寫在js代碼里的，而是被識別成了**字符串**。 #### 3.事件驅動程序點擊鼠標時，原本粉色的div變大了，背景變紅： ~~~ <script type="text/javascript"> ? ?var div1 = document.getElementById("box1"); ? ?//點擊鼠標時，原本粉色的div變大了，背景變紅了 ? ?div1.onclick = function () { ? ? ? ?div1.style.width = "200px"; ? //屬性值要寫引號 ? ? ? ?div1.style.height = "200px"; ? ? ? ?div1.style.backgroundColor = "red"; ? //屬性名是backgroundColor，不是background-Color ? } </script> ~~~