1.DOM簡介 當網頁被載入時，瀏覽器會創建頁面的文檔對象模型，即DOM（Document Object Model）。 2.DOM操作HTML 2.1 改變HTML輸出流 不要在文檔載入完成之後使用document.write（）。會覆蓋該文檔 2.2 尋找元素 通過id找到HTML元素 通過標簽 ...
1.DOM簡介
當網頁被載入時，瀏覽器會創建頁面的文檔對象模型，即DOM（Document Object Model）。
2.DOM操作HTML
2.1 改變HTML輸出流
不要在文檔載入完成之後使用document.write（）。會覆蓋該文檔
2.2 尋找元素
通過id找到HTML元素
通過標簽找到HTML元素
2.3 改變HTML內容
使用屬性：innerHTML
2.4 改變HTML屬性
使用屬性：attribute
Object_HTML.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--修改--> <p id="pid">Hello</p> <button onclick="demo()">按鈕</button> <script> function demo(){ var nv=document.getElementById("pid"); nv.innerHTML="World"; document.getElementsByName("p");//p如果相同，相同元素的第一個 } </script> <!--修改屬性--> <br /> <a id="aid" href="http://www.baidu.com">百度</a> <button onclick="demobd()">跳轉</button> <script> function demobd(){ document.getElementById("aid").href="index.html"; } </script> <br /> <img id="iid" src="img/294224.jpg" height="200" width="300"/> <button onclick="demoimg()">切換</button> <script> function demoimg(){ document.getElementById("iid").src="img/308048.jpg"; } </script> </body> </html>
3.DOM操作CSS
通過DOM對象改變CSS
語法：document.getElementById(id).style.property=new style
Object_CSS.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/Object_CSS.css" /> </head> <body> <div id="div" class="div"> hello </div> <button onclick="demo()">按鈕</button> <script> function demo(){ document.getElementById("div").style.background="blue"; document.getElementById("div").style.color="white"; } </script> </body> </html>
css/Object_CSS.css
.div{ background-color: blueviolet; height: 200px; width: 300px; }
4.DOM EventListener
4.1 DOM EventListenter
方法：addEventListener()
removeEventListener()
4.2 addEventListener()
方法用於指定元素添加句柄
4.3 removeEventListener()
移除方法添加句柄
EventListener.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">按鈕</button> <script> document.getElementById("btn").addEventListener("click",function(){ alert("hello"); }); </script> <button id="btnjb">句柄</button> <script> var x=document.getElementById("btnjb"); x.addEventListener("click",hello); x.addEventListener("click",world); x.removeEventListener("click",hello); function hello(){ alert("hello"); } function world(){ alert("world"); } </script> </body> </html>
