に投稿に更新3分で読む (約498語)

JavaScriptでhtml要素を取得する

なにを今さらって感じですがJavaScriptで<html>要素を取得する方法です。
<html> <head> <body>要素の取得も併せてメモしておきます。

コード

JavaScript
1
2
3
const html = document.documentElement;
const head = document.head;
const body = document.body;


なぜメモしたのか。（雑談）

以前に書いたコードを見直していたら、html要素を取得するのにとても回りくどいやり方してました。

JavaScript
1
2
const html = document.getElementsByTagName('html');
html[0].classList.add( 'my-class' );

htmlタグは文書中に1つのみなのにわざわざ配列の0番目を指定するのなんだかムダに多い記述。
処理するたびにhtml[0]って書くのとってもムダ。
考えたら変数にするときに入れてしまったら良いのではと思った。()

JavaScript
1
2
const html = document.getElementsByTagName('html')[0];
html.classList.add( 'my-class' );

こうすれば毎回毎回html[0]って書かなくても良い。
でも、調べたらもっと簡単に書けるらしい。

JavaScript
1
2
const html = document.documentElement;
html.classList.add( 'my-class' );

Document.documentElement
Document.documentElement は、その document のルート要素 (例えば、 HTML 文書の場合は <html> 要素) である Element を返します。
https://developer.mozilla.org/ja/docs/Web/API/Document/documentElement

htmlを取得したいけどどうしたら良いのかなと考えて、単純にgetElementsByTagNameが思いついて使っていましたが、これら３つのタグに関してはもっと直感的で単純な書き方で書けるんですね。
そのうちまた忘れてしまいそうなのでメモした次第です！ :D


参照 MDN

Document.documentElement
https://developer.mozilla.org/ja/docs/Web/API/Document/documentElement

Document.body
https://developer.mozilla.org/ja/docs/Web/API/Document/body

Document.head
https://developer.mozilla.org/ja/docs/Web/API/Document/head





Buy me a Coffee!!



JavaScriptでhtml要素を取得する

https://fennote.fareastnoise.com/2023/06/28/js-get-html-tag/

Author

FEN

Posted on

2023-06-28

Updated on

2023-07-14

Licensed under

#

この記事は気に入りましたか？ 著者をサポートする

コメント

フォローする

リンク

タグ

6.3.01
bootstrap1
css1
functions.php3
hexo9
html1
icarus5
javascript3
plugin6
powershell1
spidermonkey1
ubuntu1
windows101
wordpress6
wp-cli1
wsl1
wsl21

広告

最近の記事

アーカイブ

×