HTMLDOMHTMLオブジェクト
HTMLオブジェクトは、HTMLドキュメントの要素を表します。
HTMLオブジェクトにアクセスする方法を見てみましょう-
構文
以下は構文です-
document.getElementsByTagName(“HTML”)
HTMLオブジェクトの例を見てみましょう-
例
<!DOCTYPE html> <html> <head> <style> body{ text-align:center; } .btn{ background-color:lightblue; border:none; height:2rem; border-radius:50px; width:60%; margin:1rem auto; } .show{ font-size:1rem; font-weight:bold; color:orange; border:2px solid green; padding:10px; display:none; } </style> </head> <body> <h1>DOM HTML Object Example</h1> <button type="button" onclick="getContent()" class="btn">Click me to get content inside HTML tag</button> <div class="show"></div> <script> function getContent(){ var content=document.getElementsByTagName("HTML")[0].innerHTML; document.querySelector(".show").innerHTML = content; document.querySelector(".show").style.display ="block"; } </script> </body> </html>
出力
これにより、次の出力が生成されます-
「青」ボタンをクリックして、このページタグ内のすべてのコンテンツを取得します-
-
HTMLDOMHRオブジェクト
HTML DOM HRオブジェクトは、HTMLドキュメントの要素を表します。 hrオブジェクトを作成- 構文 以下は構文です- document.createElement(“HR”); hrオブジェクトの例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { text-align: center; background-color: #fff;
-
HTMLDOMUlオブジェクト
HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE