HTML DOMのdocumentElementプロパティとは？構文と使い方をわかりやすく解説
HTML DOMのdocumentElementプロパティは、ドキュメントのルート要素（ドキュメント要素）を取得するために使用されるプロパティです。戻り値はElementオブジェクト型になります。HTML文書において、ドキュメント要素とはルート要素のことなので、<html>要素が該当します。なお、このプロパティは読み取り専用であり、値を代入することはできません。
構文
documentElementプロパティの基本構文は以下のとおりです。
document.documentElement
使用例
documentElementプロパティを使った具体的なサンプルコードを見てみましょう。ボタンをクリックすると、ドキュメント要素の名前（nodeName）が画面に表示される仕組みです。
<!DOCTYPE html>
<html>
<body>
<h1>documentElementプロパティの使用例</h1>
<p>下のボタンをクリックすると、ドキュメント要素名を取得できます</p>
<button onclick="getDocument()">GET NAME</button>
<p id="Sample"></p>
<script>
function getDocument() {
var dName = document.documentElement.nodeName;
document.getElementById("Sample").innerHTML = "このドキュメントのドキュメント要素は: "+dName;
}
</script>
</body>
</html>
出力結果
上記のコードを実行すると、まず次のように表示されます。
続いて、「GET NAME」ボタンをクリックした結果がこちらです。
コードの解説
このサンプルでは、以下のような処理が行われています。
まず、ユーザーがクリックするとgetDocument()関数が呼び出される「GET NAME」ボタンを配置しています。
<button onclick="getDocument()">GET NAME</button>
getDocument()関数の中では、document.documentElementのnodeNameプロパティの値を取得し、変数dNameに格納しています。その後、id属性に「Sample」が設定された段落要素に対してinnerHTMLプロパティを使い、取得したテキストを画面に出力しています。
function getDocument() {
var dName = document.documentElement.nodeName;
document.getElementById("Sample").innerHTML = "このドキュメントのドキュメント要素は: "+dName;
}
このようにdocumentElementプロパティを利用すれば、JavaScriptから簡単にHTML文書のルート要素へアクセスできます。DOM操作の基礎となる重要なプロパティなので、ぜひ覚えておきましょう。
-
HTML DOMのdoctypeプロパティとは？構文と使い方をわかりやすく解説
HTML DOMのdoctypeプロパティは、現在のHTML文書に関連付けられているDTD（Document Type Declaration：文書型宣言）を返します。このプロパティは読み取り専用であり、文書型の名前をDocumentTypeオブジェクトとして取得します。なお、対象の文書にDTDが指定されていない場合は、nullが返されます。 構文 doctypeプロパティの基本構文は以下のとおりです。 document.doctype サンプルコード それでは、doctypeプロパティを使用した具体例を見ていきましょう。 <!DOCTYPE html> <html>
-
HTML DOM designModeプロパティの使い方を徹底解説
HTML DOMのdesignModeプロパティを使用すると、ドキュメント全体が編集可能かどうかを指定できます。このプロパティを活用することで、HTMLドキュメントはWYSIWYG（What You See Is What You Get：見たままが得られる）エディターのように動作し、ブラウザ上で直接HTMLドキュメントを編集できるようになります。designModeプロパティのデフォルト値は「off」に設定されており、これを「on」に変更することで、ドキュメントの編集が可能になります。構文designModeプロパティを設定する際の構文は以下の通りです。document.designMode