2018/12/19更新

[JavaScript] JSからhtmlタグやbodyタグにアクセスする

こんにちは、@yoheiMuneです。
フロント実装している際に、<html>や<body>にJavaScriptからアクセスする実装をしたので、ブログにも記載したいと思います。

htmlタグにアクセスする

htmlタグへアクセスするには、以下のように実装します。

// 素のJavaScriptの場合
var html = document.documentElement;

// 例えばスタイルを設定してみる.
html.style.backgroundColor = 'red';

ここではdocument.documentElementで、<html>にアクセスしています。

jQueryの場合は、以下のように行います。

// jQueryの場合
var $html = $('html');

// 例えばスタイルを設定してみる.
$html.css('backgroundColor', 'red');

jQueryだと直感的ですね。

bodyタグにアクセスする

bodyタグへアクセスするには、以下のように実装します。

// 素のJavaScriptの場合
var body = document.body;

// 例えばスタイルを設定してみる.
body.style.backgroundColor = 'red';

ここではdocument.bodyという変数がポイントです。

jQueryの場合は、以下のように行います。

// jQueryの場合
var $body = $('body');

// 例えばスタイルを設定してみる.
$body.css('backgroundColor', 'red');

jQueryだと、bodyタグの場合も直感的ですね。

最後に

今日はライトなネタですが、ちょっとしたTipsになればなと思います。jQueryを使わずにサイト構築することも多いので、素のJavaScript（Vanilla JSと言われています）で、色々とできるようになると素敵です。

余談ですが、Vanilla JS（バニラJS）は、アイスクリームのバニラ味の意味で、ソースなど何もかかっていない（つまり「素」である）ことから、そう言われているようです。

最後になりますが本ブログでは、フロントエンド、Python、PHP、サーバー、インフラ、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！