ホームページ > 記事 > ウェブフロントエンド > JavaScript での DOM オブジェクトの分析
Web ページが読み込まれると、ブラウザはページのドキュメント オブジェクト モデル、つまり DOM (Document Object Model) を作成します。
2.1 HTML出力ストリームの変更
ドキュメントのロード後に document.write() を使用しないでください。ドキュメントは上書きされます
2.2 要素を検索します
ID で HTML 要素を検索します
タグで HTML 要素を検索します
2.3 HTML コンテンツを変更します
属性: innerHTML
2.4 HTML 属性を変更する
属性を使用します:
DOM オブジェクトを通じて CSS を変更する
構文: document .getElementById(id).style.property=new style
Object_CSS.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>
css/Object_CSS.css
<!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>
4.DOMイベントリスナー
4.1 DOM EventListener
メソッド: addEventListener()
メソッドを削除してハンドルを追加
EventListener.html
.p{ background-color: blueviolet; height: 200px; width: 300px; }
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。
関連する推奨事項:js での組み込みオブジェクトの解析
コード
js でのカスタム オブジェクトの解析
以上がJavaScript での DOM オブジェクトの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。