Wenn eine Webseite geladen wird, erstellt der Browser das Dokumentobjektmodell der Seite , DOM (Document Object Model) ).
2.1 HTML-Ausgabestream ändern
Verwenden Sie document.write() nicht, nachdem das Dokument vollständig geladen wurde. Überschreibt das Dokument
2.2 Element finden
HTML-Element
nach ID durch Tag suchen Suchen Sie das HTML-Element
2.3 HTML-Inhalt ändern
Attribute verwenden: innerHTML
2.4 Ändern HTML-Attribut
Verwenden Sie Attribute: 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-Operation CSS
Ändern von CSS durch DOM-Objekte
Syntax: 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
Methode: addEventListener()
removeEventListener()
4.2 addEventListener ()
Methode wird verwendet, um einem angegebenen Element ein Handle hinzuzufügen
4.3 removeEventListener()
Hinzugefügte Methode entfernen Handle
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>
Das Obige ist der gesamte Inhalt davon Ich hoffe, dass der Artikel für alle hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Parsen der in js integrierten Objektedes Codes
In js-Parsing angepasst von Objekten
Das obige ist der detaillierte Inhalt vonAnalyse von DOM-Objekten in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!