[toc] ## DOM對象 >#### 1. HTML DOM: 當網頁被加載時，瀏覽器會創建頁面的文檔對象模型(Document Object Model) 1. js能夠改變頁面中的所有html元素 2. js能夠改變頁面中的所有html屬性 3. js能夠改變頁面中的所有css樣式 4. js能對頁面中的所有事件做出反應 >#### 2. DOM操作HTML 1. 改變HTML輸出流 注意：絕對不要在文檔加載完成之后使用document.write(). 這會覆蓋該文檔 2. 尋找元素: 通過id找到html元素 通過標簽名找到html元素 3. 改變HTML內容: 使用屬性: innerHTML ``` <h1 id="title">last time</h1> <button onclick="this.innerHTML = 'ok!'">thats ok?</button> <input type="button" id="btn" value="try" onclick="change()"> <script> function change(){ var title = document.getElementById("title"); title.innerHTML = "we do it"; } </script> ``` 4. 改變HTML屬性: 使用屬性: attribute ``` <div><img id="img" src="images/image-01.jpg" alt="" onclick="change()"></div> <p>點擊圖片切換</p> <script> var img = document.getElementById("img"); function change(){ if(img.src.match("images/image-01.jpg")){ img.src = "images/image-02.jpg"; }else { img.src = "images/image-01.jpg"; } } </script> ``` >#### 3. DOM操作CSS 通過DOM對象改變CSS 語法: document.getElementById(id).style.property = new style ``` <h1 id="title">改變css樣式</h1> <button id="change" onclick="change()">點擊改變</button> <script> function change(){ title = document.getElementById("title"); title.style.fontSize = "50px"; title.style.color = "yellow"; } </script> ``` >#### 4. DOM EventListener 1. DOM EvenListener: 方法: addEventListener(): removeEventListener(): 2. addEventListener(): 方法用于向指定元素添加句柄 3. removeEventListener(): 移除方法添加的事件句柄 ``` /*原本實現點擊事件方法*/ <button id="btn" onclick="change()">button</button> <script> function change() { alert("hello"); } </script> /*添加句柄實現方法*/ <button id="btn">button</button> <script> var x = document.getElementById("x"); x.addEventListener("click", hello); function hello(){ alert("hello"); } </script> ```