當網頁載入時,瀏覽器會建立頁面的文件物件模型,即DOM(Document Object Model )。
# 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> <p id="p" class="p"> hello </p> <button onclick="demo()">按钮</button> <script> function demo(){ document.getElementById("p").style.background="blue"; document.getElementById("p").style.color="white"; } </script> </body></html>
#css/Object_CSS. css
.p{ background-color: blueviolet; height: 200px; width: 300px; }
4.1 DOM EventListenter
法:addEventListener()
remove
## 方法用於指定元素新增句柄
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>
對js的內建物件的解析
#的程式碼
以上是對於JavaScript中DOM物件的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!