ドキュメント（文書）から指定された ID に一致する要素（Element オブジェク）を取得します。

要素の ID は固有なので、特定の要素にすばやくアクセスすることができます。

var element = document.getElementById(id);

パラメータ

id : 要素の ID（大文字と小文字の区別がある文字列）

戻り値

指定された ID に一致する DOM 要素オブジェクト（Element オブジェクト）。一致する要素がなければ null

// id が foo の要素の文字色を赤にvar elem = document.getElementById('foo');elem.style.color = 'red';

指定されたタグ名を持つ要素の集まり（HTMLCollection）を取得します。

但し、WebKit ブラウザーでは NodeList を取得します。

var elements = document.getElementsByTagName(tagName);

var elements = element.getElementsByTagName(tagName)

パラメータ

tagName： タグ名（文字列）。 "*" は全ての要素を表します。

戻り値

見つかった要素の集まり（HTMLCollection、 WebKit ブラウザーでは NodeList）。

//ドキュメント内の p 要素の数をコンソールに出力var elems = document.getElementsByTagName('p');//elems（HTMLCollection/NodeList）は配列のようなものなので、length で要素数を取得できます。console.log(elems.length);

<ul id="foo">  <li>sample</li> <!-- sample 1 に -->  <li>sample</li> <!-- sample 2 に（赤色） -->  <li>sample</li> <!-- sample 3 に --></ul><script>var elems = document.getElementById("foo").getElementsByTagName("li");//要素数は length プロパティで取得できますfor(var i = 0; i < elems.length; i++) {  //各要素のテキストを取得  var text = elems.item(i).textContent;  //テキストに番号を追加（例 sample → sample 1 ）  elems.item(i).textContent = text + ' ' + (i + 1);}//２番めの要素の色を赤にelems[1].style.color = 'red';</script>

指定した name 属性を持つ要素の集まり（NodeList）を取得します。

var elements = document.getElementsByName(name);

パラメータ

name：要素の name 属性の値

戻り値

指定した name 属性を持つ要素の集まり（NodeList）。 IE10 以前では指定された id 属性を持つ要素も返します。また、IE および Edge では、 NodeList ではなくHTMLCollection を返します。

//name 属性が submit の要素の NodeList を取得var elems = document.getElementsByName("submit");//1番めの要素の色を赤にelems[0].style.color = 'red';//以下でも同じelems.item(0).style.color = 'red';

指定されたクラス名を持つすべての要素の集まり（HTMLCollection）を取得します。

document オブジェクトに対して呼び出したときは、ルートノードを含む文書全体が検索され、任意の要素に対して呼び出した場合は、指定されたルート要素下が検索されます。

var elements = document.getElementsByClassName(names);

var elements = element.getElementsByClassName(names);

パラメータ

names：クラス名。複数のクラス名を指定するにはスペースで区切ります。

戻り値

指定した class 属性（クラス名）を持つ要素の集まり（HTMLCollection）

//クラス名が bar の要素を取得var elems = document.getElementsByClassName('bar');//取得した最初の要素の色を赤にelems[0].style.color = 'red';//foo クラスと bar クラス（の両方）を持っている全ての要素を取得var foo_bars = document.getElementsByClassName('foo bar');

指定された CSS セレクターに一致する文書内（document）の最初の要素（HTMLElement オブジェク）を取得します。一致するものが見つからない場合は null を返します。

document の代わりに対象の要素（baseElement）のメソッドとして呼び出した場合は、対象要素の子孫の中のマッチする最初の要素を取得します。

var element = document.querySelector(selectors);

var element = baseElement.querySelector(selectors);

パラメータ

selectors：1つまたは複数のセレクターを含む文字列（CSS セレクター）

戻り値

指定された CSS セレクターに最初に一致する要素（HTMLElement オブジェクト）。一致する要素がない場合は null を返します。

//container クラスの div 要素の中の最後の p 要素を赤色にvar elem = document.querySelector('div.container p:last-child');elem.style.color = 'red';

指定された CSS セレクターに一致する文書中の要素の集まり（静的な NodeList）を取得します。

document の代わりに対象の要素（baseElement）のメソッドとして呼び出した場合は、対象要素の子孫の内のマッチする要素の集まり（静的な NodeList）を取得します。

var elementList = document.querySelectorAll(selectors);

var elementList = baseElement.querySelectorAll(selectors);

パラメータ

selectors：1つまたは複数のセレクターを含む文字列（CSS セレクター）。複数のセレクターを指定する場合はカンマで区切ります。

戻り値

指定されたセレクターに一致する要素の集まり（静的なNodeList）。一致するものがなければ空の NodeList

//セレクタ（.content h2）にマッチする h2 要素の最初の要素の文字色を赤にvar matches = document.querySelectorAll(".content h2");matches[0].style.color = 'red';

<ul id="foo">  <li>Blue</li> <!-- 青色に -->  <li>Red</li> <!-- 赤色に -->  <li>Green</li></ul><script>var matches = document.querySelectorAll("#foo li");for(var i = 0; i < matches.length; i++) {  var text = matches.item(i).textContent  if( text === 'Red') {    matches.item(i).style.color = 'red';  }else if(text === 'Blue') {    matches.item(i).style.color = 'blue';  }}</script>

<form id="first_form" name="foo">  <input type="text" value=""></form><form id="second_form" name="bar">  <input name="email" type="email" placeholder="info@example.com">  <input name="password" type="password">  <button type="submit">Submit</button></form><script>//インデックスを指定してフォーム要素を取得して、その id の値を表示console.log(document.forms[0].id);  //first_formconsole.log(document.forms[1].id);  //second_form//name 属性でフォーム要素を取得（アクセス）することもできます。console.log(document.forms.foo.id);  //first_formconsole.log(document.forms['foo'].id); //first_form//name 属性が bar のフォーム要素を取得var bar_form = document.forms.bar;//フォーム要素の elements プロパティで name 属性が email の要素の placeholder 属性を取得console.log(bar_form.elements.email.placeholder);  //info@example.com</script>

<input type="text" id="my-input" value="初期値"><script>  const myInput = document.getElementById('my-input');  console.log(myInput.value);  // 初期値  // value プロパティを変更  myInput.value = 'My Value';  console.log(myInput.value);  // My Value  console.log(myInput.getAttribute('value')); // 初期値  // setAttribute() で変更  myInput.setAttribute('value', '変更')  console.log(myInput.value); // My Value  console.log(myInput.getAttribute('value')); // 変更  // defaultValue プロパティを変更  myInput.defaultValue = 'デフォルト'  console.log(myInput.value); // My Value  console.log(myInput.getAttribute('value')); // デフォルト  // change イベント  myInput.addEventListener('change', ()=> {    // Foo と入力    console.log(myInput.value);  // Foo    console.log(myInput.getAttribute('value')); // デフォルト    console.log(myInput.defaultValue); // デフォルト  })</script>

<p class="user" data-id="123" data-user-name="foo" data-user-birth-place="usa">Foo</p><script>  const user = document.querySelectorAll('.user')[0];  //dataset プロパティにアクセス  const userData = user.dataset;  //取得した dataset プロパティをコンソールに出力  console.log(userData);</script>;コンソールへの出力結果（キーと値のペアで構成されている）DOMStringMap {id: "123", userName: "foo", userBirthPlace: "usa"}

<p class="user" data-id="123" data-user-name="foo" data-user-birth-place="usa">Foo</p><script>  const user = document.querySelectorAll('.user')[0];  //dataset プロパティの内容をコンソールに出力  for(let prop in user.dataset){    console.log(prop + " (キー) : " + user.dataset[prop] + " (値)\n");  }</script>コンソールへの出力結果id (キー) : 123 (値)userName (キー) : foo (値)userBirthPlace (キー) : usa (値)

<p class="user" data-id="123" data-user-name="foo" data-user-birth-place="usa">Foo</p><script>  //要素を取得  const user = document.querySelectorAll('.user')[0];  //data-id 属性の値を出力（dataset.key）  console.log(user.dataset.id); //123  //ブラケット構文を使用（dataset['key']）  console.log(user.dataset['id']); //123  //data-user-name 属性の値を出力  console.log(user.dataset.userName); //foo  //ブラケット構文では変数が使用できる  let key = 'userName';  console.log(user.dataset[key]); //foo  //data-user-birth-place 属性の値を出力  console.log(user.dataset.userBirthPlace); //usa  //ブラケット構文を使用  console.log(user.dataset['userBirthPlace']); //usa</script>

<p class="user" data-id="123" data-user-name="foo" data-user-birth-place="usa">Foo</p><script>  //要素を取得  const user = document.querySelector('[data-id="123"]');  //data-id 属性が存在するかどうか  console.log('id' in user.dataset);  //true  //data-name 属性が存在するかどうか（存在しない）  console.log('name' in user.dataset);  //false  //data-user-name 属性が存在するかどうか  console.log('userName' in user.dataset);  //true</script>

<script>  //要素を取得  const user = document.querySelector('[data-id="123"]');  //data-id 属性が存在するかどうか  console.log(user.hasAttribute('data-id'));  //true  //data-name 属性が存在するかどうか（存在しない）  console.log(user.hasAttribute('data-name'));  //false  //data-user-name 属性が存在するかどうか  console.log(user.hasAttribute('data-user-name'));  //true</script>

<p class="user" data-id="123" data-user-name="foo" data-user-birth-place="usa">Foo</p><script>  //要素を取得  const user = document.querySelector('[data-user-name="foo"]');  //data-user-birth-place 属性の値  console.log(user.dataset.userBirthPlace);  //usa  //data-user-birth-place 属性の値を更新  user.dataset.userBirthPlace = 'Mexico';  console.log(user.dataset.userBirthPlace);  //Mexico  //setAttribute() を使って更新  user.setAttribute('data-user-birth-place', 'Brasil');  console.log(user.dataset.userBirthPlace);  //Brasil</script>

<div id="data1" data-count="99" >...</div><script>  //要素を取得  const elem = document.getElementById('data1');  //data-count 属性の値の更新  elem.dataset.count += 1;  //更新された値を確認（100 にはならず、文字列として連結される）  console.log(elem.dataset.count);  //991  //値を数値（整数）に変換して1を加算  elem.dataset.count = parseInt(elem.dataset.count) + 1;  console.log(elem.dataset.count);  //992</script>

<p class="user" data-id="123">Foo</p><script>  //要素を取得  const user = document.querySelector('[data-id="123"]');  //data-gender 属性を設定（追加）  user.dataset.gender = 'male';  //キーにキャメルケースを指定して data-user-email 属性を設定（追加）  user.dataset.userEmail = 'foo@example.com';</script><!--上記を実行すると以下のようにカスタムデータ属性が追加される--><p class="user" data-id="123" data-gender="male" data-user-email="foo@example.com">Foo</p>

<p class="user" data-id="123" data-gender="male" data-user-email="foo@example.com">Foo</p><script>  //要素を取得  const user = document.querySelector('[data-id="123"]');  //data-gender 属性を delete 演算子で削除  delete user.dataset.gender;  //data-gender 属性が存在するかどうか  console.log('gender' in  user.dataset);  //false（削除されている）  //data-user-email 属性を delete 演算子で削除  delete user.dataset.dataUserEmail;  //data-gender 属性が存在するかどうか  console.log('dataUserEmail' in  user.dataset);  //false（削除されている）  //removeAttribute() で削除する場合  //user.removeAttribute('data-user-email');</script><!--上記を実行すると以下のようにカスタムデータ属性が削除される--><p class="user" data-id="123">Foo</p>

<code class="language-java foo">Java</code><script>  // 全ての code 要素  const targets = document.querySelectorAll('code');  targets.forEach((elem => {    // クラスを取得    const elemClassName = elem.className;    console.log(elemClassName); // language-java foo    // language- を含むパターン    const languageClassRegex = /language-\S*/;    const matched = elemClassName.match(languageClassRegex);    if (matched && matched[0]) {      console.log(matched[0]); // language-java      elem.classList.remove(matched[0]); //    }  }));</script>

// 要素（element）にスタイルを設定element.style.スタイルプロパティ名 = "値";// #foo の要素の文字色を赤に設定する例document.getElementById('foo').style.color = 'red';

<p id="foo" style="color:green;">Foo</p><script>//インラインスタイルをリセット（文字色はデフォルトの色で表示される）document.getElementById('foo').style.color = null;</script>

スタイルのプロパティ名

CSS のスタイルのプロパティ名にはハイフンが含まれるものがありますが、JavaScript ではハイフンはマイナス記号と解釈されるため、ハイフンを含む場合はキャメルケース（ハイフンを削除し、次の頭文字を大文字に）に書き換える必要があります。setProperty() メソッドを使えば、CSS のプロパティ名のまま指定できます。

//font-size は fontSize に書き換えるdocument.getElementById('foo').style.fontSize = '24px';//setProperty() メソッドを使う場合document.getElementById('foo').style.setProperty('font-size', '24px');

また float という単語は JavaScript では予約語となっているため、cssFloat というプロパティ名になります。JavaScript でアクセスできる CSS のプロパティ名は以下のリンクで確認することができます。

MDN :CSS プロパティリファレンス

CSSStyleDeclaration インターフェース

style プロパティで返される値はその要素に設定されているインラインのスタイルを表す CSSStyleDeclaration オブジェクトです。

CSSStyleDeclaration インターフェースには以下のようなプロパティとメソッドがあります。

上記のプロパティやメソッドを使ってもスタイルを設定することができます。

以下は cssText プロパティを使って設定を変更する例です。cssText プロパティを使う場合は、一部のみを変更することはできず設定を全て記述する必要があるので注意が必要です。

<p id="foo" style="color:green; font-size:30px;">Foo</p><script>//style プロパティを取得var fooStyle = document.getElementById('foo').style;// CSS の設定（テキスト）を確認console.log(fooStyle.cssText);  //color: green; font-size: 30px;// CSS を設定（※ font-size を記述していないので、font-size の設定は消える）fooStyle.cssText = 'color : orange;'// CSS の設定（テキスト）を確認console.log(fooStyle.cssText);  //color : orange;</script>

以下は setProperty() を使って特定の CSS を設定したり、removeProperty() を使って特定の CSS の設定を削除する例です。この場合、CSS のプロパティ名は、CSS の記述方法で指定し、キャメルケースに変換する必要はありません。

<p id="foo" style="color:green; font-size:30px;">Foo</p><script>//style プロパティを取得var fooStyle = document.getElementById('foo').style;//font-size を設定（変更）fooStyle.setProperty('font-size', '24px');//font-size の設定を確認console.log(fooStyle.getPropertyValue('font-size')); //24px//font-weight を !important を指定して設定（追加）fooStyle.setProperty('font-weight', 'bold', 'important');//color を削除fooStyle.removeProperty('color');// CSS の設定（テキスト）を確認console.log(fooStyle.cssText); //font-size: 24px; font-weight: bold !important;</script>

以下は setProperty() の書式です。priority はオプションで、「important」を指定することができます。

style.setProperty(CSS プロパティ名, 値, priority);

インラインスタイルの削除

インラインスタイルを削除するには、removeProperty() を使うか、値に null を設定することでリセットすることができます。

<p id="foo" style="color:green; font-size:30px;">Foo</p><script>//style プロパティを取得var fooStyle = document.getElementById('foo').style;// color の削除fooStyle.removeProperty('color');fooStyle.color = null;// font-size の削除fooStyle.removeProperty('font-size');fooStyle.fontSize = null;</script>

複数のプロパティをまとめて設定

複数のプロパティをまとめて設定する場合は、以下のような関数を定義しておくと便利かもしれません。

Object.keys()メソッドを使って指定したスタイルオブジェクト（styles）が持つ各プロパティを対象の要素のスタイルプロパティ（targetStyle）に設定しています。

//複数のプロパティをまとめて設定する関数const setMyInlineStyles = (targetStyle, styles) => {  Object.keys(styles).forEach( (key) => {    targetStyle.setProperty(key, styles[key]);  });}//function 文で定義する場合/*function setMyInlineStyles(targetStyle, styles) {  Object.keys(styles).forEach( function (key) {    targetStyle.setProperty(key, styles[key]);  });}*///スタイルを設定する対象の要素const targetElm = document.getElementById('styleTarget');//対象の要素のスタイルプロパティconst targetElmStyle = targetElm.style;//複数のスタイルを設定（引数には対象の要素のスタイルプロパティとスタイルオブジェクトを指定）setMyInlineStyles(targetElmStyle, {'color':'red', 'font-weight':'bold', 'background-color':'lightgreen'});

以下は Change ボタンをクリックすると複数のインラインスタイルを設定し、Remove ボタンをクリックすると設定したインラインスタイルを削除して元に戻す例です。

この例では設定するスタイルと削除するスタイルが同じなので、複数のプロパティをまとめて削除する関数も同じ値を受け取るようにしています。

但し、このような場合、可能であればクラスでスタイルを設定して、クラスの追加・削除を行うほうが簡単です。

<p id="styleTarget">This is the target element.</p><button type="button" id="changeStyle">Change</button><button type="button" id="removeStyle">Remove</button><script>//複数のプロパティをまとめて設定する関数const setMyInlineStyles = (targetStyle, styles) => {  Object.keys(styles).forEach( (key) => {    targetStyle.setProperty(key, styles[key]);  });}//複数のプロパティをまとめて削除する関数const removeMyInlineStyles = (targetStyle, styles) => {  Object.keys(styles).forEach( (key) => {    targetStyle.removeProperty(key);  });}//スタイルを設定する対象の要素const targetElm = document.getElementById('styleTarget');//対象の要素のスタイルプロパティconst targetElmStyle = targetElm.style;//設定（削除）するスタイルconst myInlineStyle =  {'color':'red', 'font-weight':'bold', 'background-color':'lightgreen'};document.getElementById('changeStyle').addEventListener('click', () => {  setMyInlineStyles(targetElmStyle, myInlineStyle);});document.getElementById('removeStyle').addEventListener('click', () => {  removeMyInlineStyles(targetElmStyle, myInlineStyle);});</script>

上記と同じことをクラスの追加・削除で行う場合の例（クラスの操作）

<style>.myStyle {  color:red;  font-weight:bold;  background-color:lightgreen;}</style><p id="styleTarget">This is the target element.</p><div class="margin_top20">  <button type="button" id="changeStyle">Change</button>  <button type="button" id="removeStyle">Remove</button></div><script>//要素のクラスリストconst targetElmClass = document.getElementById('styleTarget').classList;document.getElementById('changeStyle').addEventListener('click', () => {  //myStyle クラスを追加  targetElmClass.add('myStyle');});document.getElementById('removeStyle').addEventListener('click', () => {  //myStyle クラスを削除  targetElmClass.remove('myStyle');});</script>

This is the target element.

<p id="foo" style="color:green; font-size:18px; font-weight:bold;">Foo</p><script>//style プロパティを取得var fooStyle = document.getElementById('foo').style;//style.スタイルプロパティ名console.log(fooStyle.color);  //greenconsole.log(fooStyle.fontSize);  //18pxconsole.log(fooStyle.fontWeight);  //bold// style.getPropertyValue()console.log(fooStyle.getPropertyValue('color'));  //greenconsole.log(fooStyle.getPropertyValue('font-size'));  //18pxconsole.log(fooStyle.getPropertyValue('font-weight'));  //bold//style.cssTextconsole.log(fooStyle.cssText);  //color: green; font-size: 18px; font-weight: bold;//プロパティ名を style[i] または style.item(i) で取得for (var i = 0; i < fooStyle.length; ++i) {  var prop = fooStyle[i]; //または  fooStyle.item(i);  console.log(prop + ':' + fooStyle.getPropertyValue(prop));}/* 上記 for 文の出力color:greenfont-size:18pxfont-weight:bold*/</script>

getComputedStyle

//以下は id 属性が foo の要素のフォントサイズの算出スタイルを取得する例//#foo の要素を取得var foo = document.getElementById('foo');//#foo の算出スタイルを取得var fooStyle = window.getComputedStyle(foo);//#foo の算出スタイルの font-siz を出力console.log(fooStyle.fontSize);//以下でも同じconsole.log(fooStyle.getPropertyValue('font-size'));

MDN:window.getComputedStyle()

以下は id 属性が foo の p 要素の算出スタイルを取得する例です。

取得した算出スタイルはCSSStyleDeclaration のプロパティやメソッドが使えます。

以下の例では外部スタイルシートは使っていませんが、読み込んでいればそれらの値も含めて算出されたスタイルが取得できます。

<html><head><style>p {  font-size: 16px !important;  color: #333;}</style></head><body><div style="background-color: #efefef;">  <p id="foo" style="color:green; font-size:18px;">Foo</p></div></body><script>// id 属性が foo の p 要素の算出スタイルを取得var fooStyle = window.getComputedStyle(document.getElementById('foo'));// 文字色を取得して出力console.log(fooStyle.color); //rgb(0, 128, 0) → green（インラインの値）// フォントサイズを取得（5行目の 16px !important が適用されている）console.log(fooStyle.fontSize); //16px// 背景色を取得（設定していないのでブラウザのデフォルト値）console.log(fooStyle.backgroundColor);  //rgba(0, 0, 0, 0) 透過（ブラウザのデフォルト値）// getPropertyValue() で font-weight を取得（ブラウザのデフォルト値）console.log(fooStyle.getPropertyValue('font-weight')); //400// マージンを取得（ブラウザのデフォルト値）console.log(fooStyle.margin); //16px 0px</script></html>

算出スタイルはブラウザのデベロッパーツールの「Computed」タブで表示される値です。

以下は id 属性が foo の要素の算出スタイルを全て出力する例です。

各プロパティ名にはCSSStyleDeclaration の item() メソッドまたは添字にインデックスを指定してアクセスすることができます。

//id 属性が foo の要素の算出スタイルを取得var fooStyle = window.getComputedStyle(document.getElementById('foo'));//取得した算出スタイルの全てのプロパティ名を for 文で出力（総数は .length で取得）for (var i = 0; i < fooStyle.length; ++i) {  //プロパティ名を prop に代入  var prop = fooStyle[i]; //または fooStyle.item(i);  console.log(prop + ':' + fooStyle.getPropertyValue(prop));}/*以下は出力例です。animation-delay:0sanimation-direction:normalanimation-duration:0sanimation-fill-mode:noneanimation-iteration-count:1animation-name:noneanimation-play-state:runninganimation-timing-function:easebackground-attachment:scrollbackground-blend-mode:normalbackground-clip:border-boxbackground-color:rgba(0, 0, 0, 0)background-image:nonebackground-origin:padding-boxbackground-position:0% 0%background-repeat:repeatbackground-size:autoborder-bottom-color:rgb(0, 128, 0)border-bottom-left-radius:0pxborder-bottom-right-radius:0pxborder-bottom-style:noneborder-bottom-width:0pxborder-collapse:separate・・・以下省略・・・*/

//style タグ（要素）を作成して変数に代入const styleElem = document.createElement('style');//スタイルを記述したテキストノードを作成const styles = document.createTextNode('p {color: red;}');//テキストノードを style タグに追加styleElem.appendChild(styles);//style タグを head 要素内の末尾に追加document.getElementsByTagName('head')[0].appendChild(styleElem);

const styleElem = document.createElement('style');//style タグにスタイルを設定styleElem.innerText = 'p {color: red;} ';//または、以下でも同じ//styleElem.innerHTML = 'p {color: red;} ';//styleElem.textContent = 'p {color: red;} ';document.getElementsByTagName('head')[0].appendChild(styleElem);

const styleElem = document.createElement('style');//バッククォートを使って改行して記述styleElem.textContent = `p {  color: purple;  font-size: 20px;}`;//または、以下でも同じ/*styleElem.innerHTML = `p {  color: purple;  font-size: 20px;}`;*/document.getElementsByTagName('head')[0].appendChild(styleElem);

style 要素の属性

style 要素（タグ）には必要に応じて属性を指定することもできます。但し、現在 type 属性を含める理由はほとんどないようです（省略した場合の既定値は text/css）。

以下は style 要素に media 属性（メディアクエリ）を指定する例です。この場合、画面幅が 600px 以上で文字色が赤で表示されます。media 属性を省略した場合の既定値は all です。

const styleElem = document.createElement('style');//style タグ（要素）に media 属性（メディアクエリ）を指定styleElem.media = "screen and (min-width: 600px)"styleElem.textContent = `p {  color: red;}`;document.getElementsByTagName('head')[0].appendChild(styleElem);

<!doctype html><html lang="ja"><head>  <meta charset="utf-8">  <link rel="stylesheet" href="reset.css">  <title>Sample</title>  <style>  body {    max-width: 1200px;    margin: 30px auto;  }  </style></head><body>  <style>    p {      color: #999;    }  </style>  <div>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>  </div></body></html>

* {  margin: 0 auto;  padding: 0;  box-sizing: border-box;}*:before, *:after {  box-sizing: border-box;}

//CSSStyleSheet オブジェクトのリストconst myStyleSheets = document.styleSheets;console.log(myStyleSheets);//以下がコンソールへの出力StyleSheetList0: CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: 'text/css', href: 'http://localhost/.../reset.css', …}1: CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: 'text/css', href: null, …}2: CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: 'text/css', href: null, …}length: 3

const myStyleSheets = document.styleSheets;//reset.css のルール（cssRules）の数console.log(myStyleSheets[0].cssRules.length);//2//reset.css の最初のルール（cssRules）の cssTextconsole.log(myStyleSheets[0].cssRules[0].cssText);//* { margin: 0px auto; padding: 0px; box-sizing: border-box; }//reset.css の２番目のルール（cssRules）の cssTextconsole.log(myStyleSheets[0].cssRules[1].cssText);//::before, ::after { box-sizing: border-box; }//reset.css が無効化されているかどうかconsole.log(myStyleSheets[0] .disabled);//false//reset.css の URIconsole.log(myStyleSheets[0] .href);//http://localhost/...省略.../reset.css//reset.css の owner 要素（document と関連付けているノード）console.log(myStyleSheets[0] .ownerNode);//<link rel="stylesheet" href="reset.css">//head 内 style のルール（cssRules）の数console.log(myStyleSheets[1].cssRules.length);//1//head 内 style の最初のルール（cssRules）の cssTextconsole.log(myStyleSheets[1].cssRules.item(0).cssText);//body { max-width: 1200px; margin: 30px auto; }

/* myStyleSheets[0].cssRules[0] または myStyleSheets[0].cssRules.item(0)*/* {  margin: 0 auto;  padding: 0;  box-sizing: border-box;}/* myStyleSheets[0].cssRules[1]  または myStyleSheets[0].cssRules.item(1)*/*:before, *:after {  box-sizing: border-box;}

sheet プロパティ

style 要素を表すインタフェース（HTMLStyleElement）は HTMLElement 及び LinkStyle のプロパティとメソッドを継承し、LinkStyle には要素が読み込んでいるスタイルシート（CSSStyleSheet）を返す sheet プロパティがあります。

また、link 要素が実装するインターフェイスHTMLLinkElement にも LinkStyle.sheet プロパティがあり、スタイルシート（CSSStyleSheet）を返します。

このため、document.styleSheets で返されるリストからスタイルシートにアクセスする代わりに、style 要素や link 要素の sheet プロパティでスタイルシートにアクセスすることもできます。

例えば、以下のように link 要素 や style 要素に id 属性を指定すればそれらを使ってスタイルシートにアクセスすることもできます。

<!doctype html><html lang="ja"><head><link id="reset_css" rel="stylesheet" href="reset.css"><title>Sample</title><style id="body_style">body {  max-width: 1200px;  margin: 30px auto;}</style></head><body><style id="p_style">  p {    color: #999;  }</style><div>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa necessitatibus amet aliquid..</p></div></body></html>

以下のように要素にアクセスして sheet プロパティから CSSStyleSheet を取得することができます。

//id が reset_css の link 要素const restCSS = document.getElementById('reset_css');console.log(restCSS.sheet); //sheetプロパティ//CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: 'text/css', href: 'http://localhost/.../reset.css', …}console.log(restCSS.sheet.cssRules.length);//2console.log(restCSS.sheet.cssRules[0].cssText);//* { margin: 0px auto; padding: 0px; box-sizing: border-box; }//id が body_style の style 要素const bodyStyle = document.getElementById('body_style');console.log(bodyStyle.sheet);//CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: 'text/css', href: null, …}//id が p_style の style 要素const pStyle = document.getElementById('p_style');console.log(pStyle.sheet);//CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: 'text/css', href: null, …}

ルール（cssRules）を変更

CSS のルール（cssRules）を変更することができます。

それぞれのルールに対して、インラインスタイル同様、style プロパティを使ってルールを設定（変更）することができます。

style プロパティの個々のプロパティ名（color など）に対して値を設定するか、setProperty() を使って設定します。

//CSSStyleSheet オブジェクトのリストを取得const myStyleSheets = document.styleSheets;//最初のスタイルシート（添字が０）を取得const resetCSS = myStyleSheets[0];//最初のルール cssRules[0] に background-color を設定myStyleSheets[0].cssRules[0].style.setProperty('background-color','aqua');//id が p_style の style 要素を取得const pStyle = document.getElementById('p_style');//style 要素の sheet プロパティの最初のルール cssRules[0] に color を設定（変更）pStyle.sheet.cssRules[0].style.color = 'red';

stylesheet.insertRule( rule[, index] )

<!doctype html><html lang="ja"><head>  <meta charset="utf-8">  <link rel="stylesheet" href="style.css"> <!-- link 要素（CSS の読み込み） -->  <title>Sample</title>  <style> /* style 要素 */  .foo {    color: #999;  }  </style></head><body>  <div>    <p class="foo">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>  </div></body></html>

* {  margin: 0 auto;  padding: 0;  box-sizing: border-box;}body {  max-width: 1200px;  margin: 30px auto;  font-size: 14px;}

//CSS（CSSStyleSheet）のリストを取得const myStyleSheets = document.styleSheets;//style.css の CSSStyleSheetconst styleCss = myStyleSheets[0];console.log(styleCss);//CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: 'text/css', href: 'http://localhost/.../style.css', …}console.log(styleCss.cssRules.length);//2（ルールは２つ）//head 要素内の style 要素の CSSStyleSheetconst styleElem = myStyleSheets[1];console.log(styleElem);//CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: 'text/css', href: null, …}console.log(styleElem.cssRules.length);//1 （ルールは１つ）

//CSS のリストを取得const myStyleSheets = document.styleSheets;//style.css の CSSconst styleCss = myStyleSheets[0];//style.css の最後（styleCss.cssRules.length）にルールを追加styleCss.insertRule('div { background-color: #eee; }', styleCss.cssRules.length);//head 要素内の style 要素の CSSconst styleElem = myStyleSheets[1];//head 要素内の style 要素の先頭にルールを追加（第２引数を省略 → 0）styleElem.insertRule('p { padding: 10px; }');

const keyframes = '@keyframes rotate { '+                    'from {transform:rotate( 0deg ) }'+                    'to {transform:rotate( 360deg ) }'+                  '}';/* または以下のようにバッククォートを使って記述することもできますconst keyframes = `@keyframes rotate {  from {    transform:rotate( 0deg );  }  to {    transform:rotate( 360deg );  }}`;*///スタイルシートが存在すれば、スタイルシートにルールを追加if( document.styleSheets && document.styleSheets.length ) {  //最初（インデックスが0）のスタイルシートを取得  const s = document.styleSheets[0];  //変数 keyframes に代入したルールを末尾に追加  s.insertRule( keyframes, document.styleSheets[0].cssRules.length );  //第1引数に指定したルールを先頭に追加  s.insertRule( '.foo {animation: rotate 3s;}', 0 );} else { //スタイルシートが存在しなければ、style 要素を作成してルールを追加  //style 要素を作成  const s = document.createElement( 'style' );  //変数 keyframes に代入したルールを style 要素のコンテンツとして設定  s.innerHTML = keyframes;  //style 要素を head 要素内の末尾に追加  document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );  //第1引数に指定したルールを style 要素の先頭に追加  s.sheet.insertRule( '.foo {animation: rotate 3s;}', 0 );}

<div>  <p id="foo">Lorem ipsum dolor sit amet.</p></div><button id="btn" type="button">Click</button><script>  //アニメーションのルール（バッククォートを使って記述）  const keyframes = `@keyframes rotate {    from {      transform:rotate( 0deg );    }    to {      transform:rotate( 360deg );    }  }`;  //スタイルシートが存在すれば、スタイルシートにルールを追加  if( document.styleSheets && document.styleSheets.length ) {    //最初（インデックスが0）のスタイルシートを取得    const s = document.styleSheets[0];    //変数 keyframes に代入したルールを末尾に追加    s.insertRule( keyframes, document.styleSheets[0].cssRules.length );    //第1引数に指定したルールを先頭に追加    s.insertRule( '.rotate {animation: rotate 3s;}', 0 );  } else { //スタイルシートが存在しなければ、style 要素を作成してルールを追加    //style 要素を作成    const s = document.createElement( 'style' );    //変数 keyframes に代入したルールを style 要素のコンテンツとして設定    s.innerHTML = keyframes;    //style 要素を head 要素内の末尾に追加    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );    //第1引数に指定したルールを style 要素の先頭に追加    s.sheet.insertRule( '.rotate {animation: rotate 3s;}', 0 );  }  //id が btn のボタン要素を取得  const btn = document.getElementById('btn');  //id が foo の div 要素を取得  const foo = document.getElementById('foo');  //ボタンにクリックイベントを設定  btn.addEventListener('click', function() {    //クリックされたら rotate クラスを追加（アニメーションを実行）    foo.classList.add('rotate');  })  //アニメーション終了時のイベントを設定  foo.addEventListener('animationend', function() {    //実行したアニメーションのクラスを削除    this.classList.remove('rotate');  });</script>

#sampleBox1 {  width: 200px;  height: 100px;  border: 5px solid #98D799;  padding: 10px;  margin: 40px 20px;  box-sizing: content-box;}/*content-box では width と height にはパディングとボーダーは含まれません。*/

<div id="sampleBox1"></div><script>const sampleBox1 = document.getElementById('sampleBox1');//offsetWidth = CSS width + 左右 border + 左右 paddingconsole.log('offsetWidth : ' + sampleBox1.offsetWidth);  //230//offsetHeight = CSS height + 上下 border + 上下 paddingconsole.log('offsetHeight : ' + sampleBox1.offsetHeight);  //130//offsetWidth = CSS width + 左右 paddingconsole.log('clientWidth : ' + sampleBox1.clientWidth);  //220//offsetWidth = CSS width + 上下 paddingconsole.log('clientHeight : ' + sampleBox1.clientHeight); //120</script>

#sampleBox2 {  width: 200px;  height: 100px;  border: 5px solid #98D799;  padding: 10px;  margin: 40px 20px;  box-sizing: border-box;}/*border-box では width と height にパディングとボーダーの大きさが含められます*/

<div id="sampleBox2"></div><script>const sampleBox2 = document.getElementById('sampleBox2');//offsetWidth = CSS widthconsole.log('offsetWidth : ' + sampleBox2.offsetWidth);  //200//offsetHeight = CSS heightconsole.log('offsetHeight : ' + sampleBox2.offsetHeight);  //100//clientWidth = CSS width - 左右 borderconsole.log('clientWidth : ' + sampleBox2.clientWidth);  //190//clientHeight = CSS height - 上下 borderconsole.log('clientHeight : ' + sampleBox2.clientHeight); //90</script>

#sampleBox3 {  width: 16.73%;  height: 100px;  border: 5px solid #98D799;  padding: 10px;  margin: 40px 20px;  box-sizing: border-box;}

<div id="sampleBox3"></div><script>const sampleBox3 = document.getElementById('sampleBox3');//整数値console.log(sampleBox3.offsetWidth);  //134console.log(sampleBox3.clientWidth);  //124 （左右ボーダーの分 10px 小さい）//小数値console.log(sampleBox3.getBoundingClientRect().width); //133.828125</script>

#box1 {  width: 200px;  height: 100px;  border: 5px solid #999;  padding: 10px 5px 20px;  margin: 20px;  box-sizing: border-box;  background-color: #c9f9ca;}

// 要素を取得const box1 = document.getElementById('box1');// 要素のコンピューテッドスタイルを取得const box1CS = window.getComputedStyle(box1);// パディングトップconst box1PT = parseFloat(box1CS.paddingTop);console.log(box1PT); // 10// パディングボトムconst box1PB = parseFloat(box1CS.paddingBottom);console.log(box1PB); // 20// 上下のパディング、ボーダーを含まない高さconst heightWithoutPaddingBorder = box1.clientHeight - box1PT - box1PB;console.log(heightWithoutPaddingBorder); // 60// 上下のパディングを含まない高さ（ボーダーを含む）const heightWithoutPadding = box1.offsetHeight - box1PT - box1PB;console.log(heightWithoutPadding); // 70// ボーダートップconsole.log(box1CS.borderTop); // 5px solid rgb(153, 153, 153)// ボーダートップの幅console.log(parseFloat(box1CS.borderTopWidth))  // 5

#sampleBox4 {  width: 100px;  height: 100px;  border: 5px solid #5764D5;  padding: 10px;  margin: 40px 0px 20px;  box-sizing: border-box;}

<div id="sampleBox4"></div><button type="button" id="changeSize">Change Size</button><button type="button" id="resetSize">Reset Size</button><script>  const sampleBox4 = document.getElementById('sampleBox4');  const box4Width = sampleBox4.offsetWidth;  const box4Height = sampleBox4.offsetHeight;  document.getElementById('changeSize').addEventListener('click', () => {    //setProperty() メソッドを使ってサイズを設定    sampleBox4.style.setProperty('width', '200px');    sampleBox4.style.setProperty('height', '150px');   });  document.getElementById('resetSize').addEventListener('click', () => {    //element.style.width（height）でサイズを設定    sampleBox4.style.width = box4Width + 'px';    sampleBox4.style.height = box4Height + 'px';   });</script>

Lorem ipsum dolor sit amet

Harum, ipsam! Alias aut

<style>  #op1 {    position: relative;    padding: 20px;    border: 1px solid #ccc;    max-width: 300px;  }  #pos1 {    margin-left: 10px;    background-color: #C6D9F7;  }</style><div id="op1">  <p>Lorem ipsum dolor sit amet</p>  <p id="pos1">Harum, ipsam! Alias aut</p></div><script>  const pos1 = document.getElementById('pos1');  //pos1 の offsetParent の id  console.log(pos1.offsetParent.id);  //op1 （直近の position: relative の要素）  //pos1 の offsetLeft  console.log(pos1.offsetLeft);  //30  //pos1 の offsetTop  console.log(pos1.offsetTop);  //50</script>

<style>  #box1 {    width: 30%;    height: 5vw;  }</style><div id="box1">box1</div><button type="button" id="showRectProps">box1.getBoundingClientRect()</button><script>  //対象の div 要素  const box1 = document.getElementById('box1');  //ボタンに click イベントを設定  document.getElementById('showRectProps').addEventListener('click', ()=> {    //対象の div 要素の getBoundingClientRect() メソッドを実行してプロパティをアラート表示    const box1Rect = box1.getBoundingClientRect();      alert(`top: ${box1Rect.top}left: ${box1Rect.left}right: ${box1Rect.right}bottom: ${box1Rect.bottom}x: ${box1Rect.x}y: ${box1Rect.y}width: ${box1Rect.width}height ${box1Rect.height}`);    });</script>

<div id="box2">box2</div><button type="button" id="getDocOffset">ドキュメント座標を取得</button><script>// 対象の div 要素const box2 = document.getElementById('box2');document.getElementById('getDocOffset').addEventListener('click', () => {  //対象の div 要素に getBoundingClientRect() を適用して DOMRect を取得して変数に代入  const box2Rect = box2.getBoundingClientRect();  //ドキュメント上端からの位置  const top = box2Rect.top + pageYOffset;  //ドキュメント左端からの位置  const left = box2Rect.left + pageXOffset;  alert('top: ' + top + "\n" + 'left: ' + left );});</script>

const box2 = document.getElementById('box2');// 要素のドキュメント座標を取得する関数function getDocOffset(elem) {  let box = elem.getBoundingClientRect();  return {    top: box.top + pageYOffset,    left: box.left + pageXOffset  };}document.getElementById('getDocOffset').addEventListener('click', () => {  const rect = getDocOffset(box2);  alert('top: ' + rect.top + "\n" + 'left: ' + rect.left );});

<style>body {  margin: auto;  max-width: 900px;}.content {  /*スクロールが発生するように大きなサイズを指定*/  width: 2000px;  height: 2000px;}.output {  /*iframe で見やすいように固定配置*/  position: fixed;}</style></head><body><div class="output">  <table style="width:300px;">    <tr>      <td>window.scrollX</td>      <td id="scrollX"></td>    </tr>    <tr>      <td>window.scrollY</td>      <td id="scrollY"></td>    </tr>    <tr>      <td>window.pageXOffset</td>      <td id="pageXOffset"></td>    </tr>    <tr>      <td>window.pageYOffset</td>      <td id="pageYOffset"></td>    </tr>  </table></div><div class="content"></div><script>  const scrollX = window.scrollX;  const scrollY = window.scrollY;  const pageXOffset = window.pageXOffset;  const pageYOffset = window.pageYOffset;  const sxOut = document.getElementById('scrollX');  const syOut = document.getElementById('scrollY');  const pxOut = document.getElementById('pageXOffset');  const pyOut = document.getElementById('pageYOffset');  //初期状態のスクロール量（0）を表示  sxOut.textContent = window.scrollX;  syOut.textContent = window.scrollY;  pxOut.textContent = window.pageXOffset;  pyOut.textContent = window.pageYOffset;  //スクロールイベントを登録して、スクロールしたらその量を表示  window.addEventListener('scroll', () => {    sxOut.textContent = window.scrollX;    syOut.textContent = window.scrollY;    pxOut.textContent = window.pageXOffset;    pyOut.textContent = window.pageYOffset;  });</script></body>

<p>scrollY: <span id="get_scrollY_out"></span></p><button id="get_scrollY">scrollY</button><script>document.getElementById('get_scrollY').addEventListener('click', () => {  document.getElementById('get_scrollY_out').textContent = window.scrollY;});</script>

<button id="scroll1">スクロール1</button><script>document.getElementById('scroll1').addEventListener('click', () => {  //現在の位置から下に 100px スクロール  window.scroll(0, window.scrollY - 100);  //以下でもほぼ同じ  //window.scrollBy(0, -100);});</script>

<button class="margin_top40" id="scroll2">スクロール2</button><script>document.getElementById('scroll2').addEventListener('click', () => {  //現在の位置から上に300pxスクロール  window.scrollBy({    top: 300,    //スムーススクロール    behavior: 'smooth'  });  //以下でも同じ  /*window.scrollTo({    top: window.scrollY + 300,    behavior: 'smooth'  });*/});</script>

<button id="scroll2">スクロール2</button>・・・<button id="scroll3">スクロール3</button><script>document.getElementById('scroll3').addEventListener('click', () => {  //対象の要素を取得  const targetBtn = document.getElementById('scroll2');  //対象の要素のオフセット座標を取得  const targetBtnOffsetTop = targetBtn.offsetTop;  //対象の要素の位置へスクロール  window.scrollTo({    top: targetBtnOffsetTop,    //スムーススクロール    behavior: 'smooth'  });});</script>

<button id="scroll2">スクロール2</button>・・・<button id="scroll4">スクロール4</button><script>document.getElementById('scroll4').addEventListener('click', () => {  //対象の要素を取得  const targetBtn = document.getElementById('scroll2');  //対象の要素のウィンドウ座標を取得するために DOMRect オブジェクトを取得  const targetBtnRect = targetBtn.getBoundingClientRect();  //対象の要素の位置へスクロール  window.scrollTo({    //DOMRect オブジェクトの top プロパティ + pageYOffset    top: targetBtnRect.top + pageYOffset,    //スムーススクロール    behavior: 'smooth'  });});</script>

<div id="foo">  <h3>Title</h3>  <div><p>This is a sample text.</p></div>  <p style="display: none;">No Display</p></div><script>console.log(document.getElementById('foo').textContent);/*以下が取得したテキストの出力結果Title    This is a sample text.  No Display*/</script>

<div id="foo">  <h3>Title</h3>  <div><p>This is a sample text.</p></div>  <p style="display: none;">No Display</p></div><p id="bar">ID: <strong>bar</strong> text</p><script>document.getElementById('foo').textContent = 'New Text Content!';document.getElementById('bar').textContent = 'New Bar!';</script><!-- 上記 HTML は以下に置き換わります  --><div id="foo">New Text Content!</div><p id="bar">New Bar!</p>

<div id="foo"></div><script>document.getElementById('foo').textContent = '<p>Sample</p>';</script><!-- HTML 文字列は以下のようにエスケープされます  --><div id="foo">&lt;p&gt;Sample&lt;/p&gt;</div>

<input type="text" id="foo" size="20"><input type="button" id="bar" value="Click"><div id="baz"></div><script>//ボタン要素const bar = document.getElementById('bar');//div 要素const baz = document.getElementById('baz');//input 要素（テキストフィールド）const foo = document.getElementById('foo');//ボタンにクリックイベントを登録bar.addEventListener('click', ()=>{  //div 要素にテキストフィールドに入力された値を設定  baz.textContent =  foo.value;})</script>

<div id="foo">  <h3>Title</h3>  <div>    <p>This is a sample text.</p>  </div>  <p style="display: none;">No Display</p></div><script>console.log(document.getElementById('foo').innerText);/*以下が取得したテキストの出力結果（display: none の p 要素は取得されない）TitleThis is a sample text.*/</script>

<div id="foo">  <h3>Title</h3>  <div><p>This is a sample text.</p></div></div><p id="bar">ID: <strong>bar</strong> text</p><script>document.getElementById('foo').innerText = 'New Text Content!';document.getElementById('bar').innerText = 'New Bar!';</script><!-- 上記 HTML は以下に置き換わります  --><div id="foo">New Text Content!</div><p id="bar">New Bar!</p>

<div id="foo"></div><script>document.getElementById('foo').innerText = '<p>Sample</p>';</script><!-- HTML 文字列は以下のようにエスケープされます  --><div id="foo">&lt;p&gt;Sample&lt;/p&gt;</div>

textContent と innerText の違い

取得

以下は textContent と innerText を使ってテキストを取得する場合の違いです。但し、以下の例は div 要素の子要素に style 要素を入れているので、マークアップ的には正しくありません。Nu Html Checker（Markup Validation Service） でチェックすると「Element style not allowed as child of element div in this context.」のようなエラーが表示されます。

id="original" の div 要素を textContent と innerText で取得してテキストエリアの値に設定しています。

textContent は記述されている HTML（改行を含むエディタ上のタグの位置）を反映しますが、innerText はブラウザに表示（レンダリング）される状態を反映します。

innerText はスタイルシートの設定などで非表示になっていたり、エディタ上のホワイトスペースや style タグのように元々ブラウザに表示されない要素のテキストは取得しませんが、br タグがある場合は改行された状態でテキストを取得します。

          <div id="original"><!--  左側にはタブによるスペースあり  -->            <h3>textContent と innerText</h3>            <style>.baz { color: red; } /* エディタの自動整形で左側に寄せられている */</style>            <p>Sample text <br><br><!--  br タグを2つ  -->              with line break.</p>            <p class="baz">Class baz!</p>          </div>          <div>            <textarea id="foo" rows="7" cols="50" readonly></textarea>          </div>          <div>            <textarea id="bar" rows="7" cols="50" readonly></textarea>          </div><script>const original = document.getElementById('original');const foo = document.getElementById('foo');const bar = document.getElementById('bar');// id="foo" のテキストエリアの値（value）に textContent で取得した値を設定foo.value = original.textContent;// id="bar" のテキストエリアの値（value）に innerText で取得した値を設定bar.value = original.innerText;</script>

以下が id="original" の div 要素です。

以下は textContent で取得した値を設定したテキストエリアです。

スタイル要素（<style>）の内容も出力されています。<br> タグの改行は反映されていませんが、HTML の記述の改行やタブなどのホワイトスペースを反映します。

以下は innerText で取得した値を設定したテキストエリアです。

スタイル要素は削除されていて、<br> の改行は反映されています。innerText は、<br> タグによる改行などテキストがレンダリングされる状態を取得しますが、レンダリングには表れない HTML の記述自体の改行やスペースは取得されません。

設定（出力）

以下は textContent と innerText を使って値を設定（出力）する場合の違いを確認するサンプルです。

ボタンをクリックするとテキストエリアに入力された文字を textContent と innerText を使って出力します。textContent を使った出力ではテキストエリアの改行は反映されませんが、innerText を使った出力では改行が反映されます。

<textarea id="textArea" cols="30" rows="5"></textarea><button type="button" id="btn">Click</button><div>  <p>textContent</p>  <div id="out1"></div></div><div>  <p>innerText</p>  <div id="out2"></div></div><script>  document.getElementById('btn').addEventListener('click', () => {    //テキストエリアに入力された値    const textAreaValue = document.getElementById('textArea').value;    //textContent で出力    document.getElementById('out1').textContent = textAreaValue;    //innerText で出力    document.getElementById('out2').innerText = textAreaValue;  }, false);</script>

<div id="foo">  <h3>Title</h3>  <p>This is a sample text.</p></div><script>console.log(document.getElementById('foo').innerHTML);console.log(document.getElementById('foo').outerHTML);/*//innerHTML（7行目）の出力結果<h3>Title</h3><p>This is a sample text.</p>//outerHTML（8行目）の出力結果<div id="foo">  <h3>Title</h3>  <p>This is a sample text.</p></div>*/</script>

<div id="foo"></div><script>document.getElementById('foo').innerHTML = '<p><strong>sample</strong></p>';</script><!-- 上記 HTML は以下のようになります  --><div id="foo"><p><strong>sample</strong></p></div>

<div id="div-foo">  <button id="hello-btn">Click</button></div><script>  const divFoo = document.getElementById('div-foo');  document.getElementById('hello-btn').addEventListener('click', ()=> {    console.log('hello');  });  // 右辺のもとの HTML（divFoo.innerHTML）で設定したイベントリスナーは取り除かれる  divFoo.innerHTML = '<p>Greeting</p>' + divFoo.innerHTML;</script>

const divFoo = document.getElementById('div-foo');document.getElementById('hello-btn').addEventListener('click', ()=> {  console.log('hello');});// insertAdjacentHTML で HTML を挿入divFoo.insertAdjacentHTML('afterbegin', '<p>Greeting</p>');

const divFoo = document.getElementById('div-foo');document.getElementById('hello-btn').addEventListener('click', ()=> {  console.log('hello');});// 要素を作成const greeting = document.createElement('p');greeting.textContent = 'Greeting';// 要素を挿入divFoo.prepend(greeting);

//引数に文字列を受け取り特殊文字を変換する関数 h()function h(str){  return str.replace(/&/g, '&amp;')    .replace(/"/g, '&quot;')    .replace(/'/g, '&#39;')    .replace(/</g, '&lt;')    .replace(/>/g, '&gt;')}

//引数に文字列を受け取り特殊文字を変換する関数 h()function h(str){  return str.replace(/[<>&'"]/g, (match) => {    const specialChars = {      "<": "&lt;",      ">": "&gt;",      "&": "&amp;",      "'": "&#39;",      '"': "&quot;",    };    return specialChars[match];  });}

<form>  <input type="text" id="foo" size="40" placeholder="文字列を入力">  <input type="button" id="bar" value="Click">  <div>    <textarea id="baz" rows="2" cols="50" readonly></textarea>    <textarea id="baz2" rows="2" cols="50" readonly></textarea>  </div>  <div id="qux"></div>  <input type="reset" value="Reset"></form><script>  //サニタイジング用関数（上記と同じ）  function h(str){    return str.replace(/&/g, '&amp;')      .replace(/"/g, '&quot;')      .replace(/'/g, '&#39;')      .replace(/</g, '&lt;')      .replace(/>/g, '&gt;')  }  //input 要素（テキストフィールド）  const foo = document.getElementById('foo');  //ボタン要素  const bar = document.getElementById('bar');  //textarea 要素  const baz = document.getElementById('baz');  //textarea 要素（2つ目）  const baz2 = document.getElementById('baz2');  //div 要素  const qux = document.getElementById('qux');  //ボタンにクリックイベントを登録  bar.addEventListener('click', ()=>{    //エスケープしてテキストエリアの値（value プロパティ）に設定    baz.value =  h(foo.value);    //エスケープしてテキストエリアの innerHTML プロパティに設定    baz2.innerHTML =  h(foo.value);    //div 要素のコンテンツに入力された値をエスケープして innerHTML プロパティに設定    qux.innerHTML =  h(foo.value);  })</script>

let aChild = element.appendChild(aChild);

<div class="content">  <div id="foo">    <p>foo の先輩</p>  </div></div><script>//p 要素を生成const newElem = document.createElement('p');//テキストノードを生成var newText = document.createTextNode("新しい p 要素");//p 要素にテキストノードを追加newElem.appendChild(newText);//p 要素に id を設定newElem.setAttribute("id","new");//作成した p 要素の追加先の要素を取得const foo = document.getElementById('foo');//取得した要素に p 要素を追加foo.appendChild(newElem);</script>

<div class="content">  <div id="foo">    <p>foo の先輩</p>    <p id="new">新しい p 要素</p>  </div></div>

const newElem = document.createElement('p');var newText = document.createTextNode("新しい p 要素");newElem.appendChild(newText);newElem.setAttribute("id","new");const foo = document.getElementById('foo');// foo の親要素の末尾に追加foo.parentNode.appendChild(newElem);

<div class="content">  <div id="foo">    <p>foo の先輩</p>  </div>  <p id="new">新しい p 要素</p></div>

let insertedNode = parentNode.insertBefore(newNode, referenceNode)

<div class="content">  <div id="parent">    <p id="child1">child 1</p>    <p id="child2">child 2</p>  </div></div><script>//挿入する p 要素を作成const newElem = document.createElement('p');var newText = document.createTextNode("新しい p 要素");newElem.appendChild(newText);newElem.setAttribute("id","new");//insertBefore() を実行する要素（挿入する要素の親要素）const parent = document.getElementById('parent');//parent の最初の子要素const child1 = document.getElementById('child1');//parent の2番目の子要素const child2 = document.getElementById('child2');//child1 の前に作成した要素を挿入parent.insertBefore(newElem, child1);/*insertAdjacentElement() を使う場合parent.insertAdjacentElement('afterbegin', newElem);child1.insertAdjacentElement('beforebegin', newElem);*/</script>

<div class="content">  <div id="parent">    <p id="new">新しい p 要素</p><!-- 挿入された要素 -->    <p id="child1">child 1</p>    <p id="child2">child 2</p>  </div></div>

parent.insertBefore(newElem, child2);/*insertAdjacentElement() を使う場合child1.insertAdjacentElement('afterend', newElem);child2.insertAdjacentElement('beforebegin', newElem);*/

<div class="content">  <div id="parent">    <p id="child1">child 1</p>    <p id="new">新しい p 要素</p><!-- 挿入された要素 -->    <p id="child2">child 2</p>  </div></div>

parent.insertBefore(newElem, null);/*insertAdjacentElement() を使う場合parent.insertAdjacentElement('beforeend', newElem);*/

<div class="content">  <div id="parent">    <p id="child1">child 1</p>    <p id="child2">child 2</p>    <p id="new">新しい p 要素</p><!-- 挿入された要素 -->  </div></div>

<div class="content">  <div id="parent">    <p id="child1">child 1</p>    <p id="child2">child 2</p>  </div></div><script>//挿入する p 要素を作成const newElem = document.createElement('p');var newText = document.createTextNode("新しい p 要素");newElem.appendChild(newText);newElem.setAttribute("id","new");const parent = document.getElementById('parent');//parentNode で現在の要素の親要素を参照して、自分を基準に指定parent.parentNode.insertBefore(newElem, parent);//この例の場合、以下でも同じdocument.querySelector('.content').insertBefore(newElem, parent);/*insertAdjacentElement() を使う場合parent.insertAdjacentElement('beforebegin', newElem);*/</script>

<div class="content">  <p id="new">新しい p 要素</p><!-- 挿入された要素 -->  <div id="parent">    <p id="child1">child 1</p>    <p id="child2">child 2</p>  </div></div>

<div class="content">  <div id="parent">    <p id="child1">child 1</p>    <p id="child2">child 2</p>  </div></div><script>//挿入する p 要素を作成const newElem = document.createElement('p');var newText = document.createTextNode("新しい p 要素");newElem.appendChild(newText);newElem.setAttribute("id","new");const parent = document.getElementById('parent');const child1 = document.getElementById('child1');//child1 の後に作成した要素を挿入parent.insertBefore(newElem, child1.nextSibling);/*insertAdjacentElement() を使う場合child1.insertAdjacentElement('afterend', newElem);*/</script>

<div class="content">  <div id="parent">    <p id="child1">child 1</p>    <p id="new">新しい p 要素</p><!-- 挿入された要素 -->    <p id="child2">child 2</p><!-- child1.nextSibling -->  </div></div>

<div class="content">  <div id="parent">    <p id="child1">child 1</p>    <p id="child2">child 2</p>  </div></div><script>//挿入する p 要素を作成const newElem = document.createElement('p');var newText = document.createTextNode("新しい p 要素");newElem.appendChild(newText);newElem.setAttribute("id","new");//insertBefore() を実行する要素（挿入する要素の親要素）const parent = document.getElementById('parent');//親要素の最初の子要素の前に挿入parent.insertBefore(newElem, parent.firstChild);/*insertAdjacentElement() を使う場合parent.insertAdjacentElement('afterbegin', newElem);*/</script>

<div class="content">  <div id="parent">    <p id="new">新しい p 要素</p>    <p id="child1">child 1</p>    <p id="child2">child 2</p>  </div></div>

<div id="wrapper">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>    <p id="baz">baz</p>  </div></div><script>//id が target の要素（対象の要素）const target = document.getElementById('target');//p 要素を生成const appendElem = document.createElement('p');//生成した p 要素にクラス属性を設定appendElem.setAttribute('class', 'append');//生成した p 要素にテキストを設定appendElem.append('this will be appended to the target children');//対象の要素の子要素の末尾に生成した要素を挿入target.append(appendElem);</script>

<div id="wrapper">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>    <p id="baz">baz</p>    <p class="append">this will be appended to the target children</p>  </div></div>

<div id="wrapper">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>    <p id="baz">baz</p>  </div></div><script>//id が target の要素（対象の要素）const target = document.getElementById('target');//p 要素を生成const prependElem = document.createElement('p');//生成した p 要素にクラス属性を設定prependElem.setAttribute('class', 'prepend');//生成した p 要素にテキストを設定prependElem.append('this will be prepende to the target childrend');//対象の要素の子要素の末尾に生成した要素を挿入target.prepend(prependElem);</script>

<div id="wrapper">  <div id="target">    <p class="prepend">this will be prepended to the target children</p>    <p id="foo">foo</p>    <p id="bar">bar</p>    <p id="baz">baz</p>  </div></div>

<div id="wrapper">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>    <p id="baz">baz</p>  </div></div><script>//id が target の要素（対象の要素）const target = document.getElementById('target');//p 要素を生成const afterElem = document.createElement('p');//生成した p 要素にクラス属性を設定afterElem.setAttribute('class', 'after');//生成した p 要素にテキストを設定afterElem.append('this will be insereted after the target');//対象の要素の後（親要素 wrapper の子要素の末尾）に生成した要素を挿入target.after(afterElem);</script>

<div id="wrapper">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>    <p id="baz">baz</p>  </div>  <p class="after">this will be insereted after the target</p></div>

<div id="wrapper">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>    <p id="baz">baz</p>  </div></div><script>//id が target の要素（対象の要素）const target = document.getElementById('target');//p 要素を生成const beforeElem = document.createElement('p');//生成した p 要素にクラス属性を設定beforeElem.setAttribute('class', 'before');//生成した p 要素にテキストを設定beforeElem.append('this will be insereted before the target');//対象の要素の前（親要素 wrapper の子要素の先頭）に生成した要素を挿入target.before(beforeElem);</script>

<div id="wrapper">  <p class="before">this will be insereted before the target</p>  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>    <p id="baz">baz</p>  </div></div>

targetElement.insertAdjacentHTML(position, text);

<div id="foo"> <!-- 対象の要素の開始タグ -->  <p>対象の要素内の既存の p 要素</p></div> <!-- 対象の要素の閉じタグ --><style>  #foo { border: 1px solid #999; padding: 10px; }  .red { color: red;}  .blue { color: blue;}  .orange { color: orange;}  .green { color: green;}</style>

対象の要素内の既存の p 要素

const foo = document.getElementById('foo');foo.insertAdjacentHTML('beforebegin', '<p class="red">BB</p>');foo.insertAdjacentHTML('afterbegin', '<p class="blue">AB</p>');foo.insertAdjacentHTML('beforeend', '<p class="orange">BE</p>');foo.insertAdjacentHTML('afterend', '<p class="green">AE</p>');

<p class="red">BB</p>; <!-- beforebegin で挿入--><div id="foo">; <!-- 対象の要素の開始タグ -->  <p class="blue">AB</p> <!-- afterbegin で挿入 -->  <p>対象の要素内の既存の p 要素</p>  <p class="orange">BE</p> <!-- beforeend で挿入 --></div> <!-- 対象の要素の閉じタグ --><p class="green">AE</p> <!-- afterend で挿入 -->

targetElement.insertAdjacentText(position, text);

<p id="bar">既存のテキスト</p><style>   #bar { background-color: #D1F8E0;}</style>

const bar = document.getElementById('bar');bar.insertAdjacentText('beforebegin', '[BB]');bar.insertAdjacentText('afterbegin', '[AB]');bar.insertAdjacentText('beforeend', '[BE]');bar.insertAdjacentText('afterend', '[AE]');

[BB]<p id="bar">[AB]既存のテキスト[BE]</p>[AE]

既存のテキスト

const bar = document.getElementById('bar');bar.insertAdjacentText('afterend', '<p>タグと特殊文字：&""</p>');

<p id="bar">既存のテキスト</p>&lt;p&gt;タグと特殊文字：&amp;""&lt;/p&gt;

targetElement.insertAdjacentElement(position, element);

<div class="content">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>  </div></div><script>//挿入する p 要素を生成const baz = document.createElement('p');//上記 p 要素に設定するテキストを作成const bazText = document.createTextNode("baz 参上");//p 要素にテキストを設定baz.appendChild(bazText);//p 要素に id 属性を設定baz.setAttribute("id","baz");//対象の要素を取得（id="target" の div 要素）const target = document.getElementById('target');//対象の要素の直前に挿入target.insertAdjacentElement('beforebegin', baz);</script>

<div class="content">  <p id="baz">baz 参上</p>  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>  </div></div>

<div class="content">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>  </div></div><script>・・・中略・・・//対象の要素の最初の子要素（id="foo"）の前に挿入target.insertAdjacentElement('afterbegin', baz);</script><!-- 結果 --><div class="content">  <div id="target">    <p id="baz">baz 参上</p>    <p id="foo">foo</p>    <p id="bar">bar</p>  </div></div>

<div class="content">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>  </div></div><script>・・・中略・・・//対象の要素の最後の子要素（id="bar"）の後に挿入target.insertAdjacentElement('beforeend', baz);</script><!-- 結果 --><div class="content">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>    <p id="baz">baz 参上</p>  </div></div>

<div class="content">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>  </div></div><script>・・・中略・・・//対象の要素の直後に挿入target.insertAdjacentElement('afterend', baz);</script><!-- 結果 --><div class="content">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>  </div>  <p id="baz">baz 参上</p></div>

<div class="content">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>  </div></div><script>・・・中略・・・//対象の要素（id="foo" の要素）を取得const foo = document.getElementById('foo');//対象の要素（id="foo" の要素）の直後に挿入foo.insertAdjacentElement('afterend', baz);</script><!-- 結果 --><div class="content">  <div id="target">    <p id="foo">foo</p>    <p id="baz">baz 参上</p>    <p id="bar">bar</p>  </div></div>

・・・中略・・・//id="target" の要素を取得const target = document.getElementById('target');//id="foo" の要素を取得const foo = document.getElementById('foo');//insertBefore() の基準となる要素（第2パラメータ）に foo の次の兄弟要素を指定target.insertBefore(baz, foo.nextSibling);//以下でも同じ結果//id="bar" の要素を取得const bar = document.getElementById('bar');//現在の要素の親要素を参照して insertBefore() を実行bar.parentNode.insertBefore(baz, bar);

<div id="positions">  <input type="radio" name="insertPosition" value="beforebegin" checked>beforebegin  <input type="radio" name="insertPosition" value="afterbegin">afterbegin  <input type="radio" name="insertPosition" value="beforeend">beforeend  <input type="radio" name="insertPosition" value="afterend">afterend</div><button type="button" id="insertBtn">Insert</button><button type="button" id="remove">Remove</button><div class="content">  <div id="target">    <p id="foo">foo</p>    <p id="bar">bar</p>  </div></div>

#target {  border: 1px solid #999;  padding: 20px;  width: 200px;}.sample {  width: 150px;}

//対象の要素const target = document.getElementById('target');//ラジオボタンを囲む div 要素（ラジオボタンの親要素）const positions = document.getElementById('positions');// insertAdjacentElement() の第1パラメータ及び挿入する要素に設定する文字列に使う変数let position = 'beforebegin';//要素を挿入するボタンconst insertBtn = document.getElementById('insertBtn');//挿入した要素を削除するボタンconst removeBtn = document.getElementById('remove');//div 要素（ラジオボタンの親要素）に change イベントのリスナーを登録positions.addEventListener('change', (e) => {  //発生したイベントの要素がラジオボタンであれば  if( e.target.type === 'radio' ) {    //ラジオボタンの value 属性の値を変数 position に代入    position = e.target.value;  }});//要素を挿入するボタンにイベントリスナを登録insertBtn.addEventListener('click', () => {  //挿入する p 要素を生成  const baz = document.createElement('p');  //生成した要素にスタイルとクラスを設定  baz.style.backgroundColor = 'yellow';  baz.setAttribute('class', 'sample');  //p 要素のテキストに baz : と選択された position の値を設定  baz.textContent = 'baz :' + position;  //対象の要素が存在すれば（一応確認）  if (target) {    //対象の要素に生成した要素を挿入（位置は変数 position に入っている）    target.insertAdjacentElement(position, baz);  }});//挿入された要素を削除するボタンにイベントリスナを登録removeBtn.addEventListener('click', () => {  //挿入した要素にはクラス .sample が付与されているので該当する要素をすべて取得  const insertedElems = document.querySelectorAll('p.sample');  // NodeList のメソッド forEach() を使って挿入されたすべての要素を削除  insertedElems.forEach((elem) => {    elem.remove();  });});

var dupNode = node.cloneNode(deep);

<div id="foo">  <p>Hello !</p></div><div id="bar"></div><script>//複製するノードを取得const foo = document.getElementById('foo');//取得したノードを複製let foo_clone = foo.cloneNode(true);//複製したノードの id 属性を変更foo_clone.setAttribute('id', 'foo_clone');//複製したノードを id が bar の要素に追加document.getElementById('bar').appendChild(foo_clone);</script>

<div id="foo">  <p>Hello !</p></div><div id="bar">  <div id="foo_clone">    <p>Hello !</p>  </div></div>

<div id="foo">  <p>Hello !</p></div><div id="bar"></div><script>//複製するノードを取得const foo = document.getElementById('foo');//取得したノードのみを複製（引数を省略するか false を指定すると子孫ノードを複製しない）let foo_clone = foo.cloneNode();//複製したノードの id 属性を変更foo_clone.setAttribute('id', 'foo_clone');//p 要素を foo_clone に挿入foo_clone.insertAdjacentHTML('afterbegin', '<p>Hello from Clone!</p>');//複製したノードを id が bar の要素に追加document.getElementById('bar').appendChild(foo_clone);</script><!-- 結果 --><div id="foo">  <p>Hello !</p></div><div id="bar">  <div id="foo_clone">    <p>Hello from Clone!</p>  </div></div>

<p id="wrap-target">ラップされる要素</p><script>  const targetElem = document.querySelector('#wrap-target');  targetElem.outerHTML = '<div class="foo">' + targetElem.outerHTML + '</div>';</script>

<button id="wrap-target">ラップされるボタン</button><script>  const targetElem = document.querySelector('#wrap-target');  targetElem.addEventListener('click', ()=> { console.log('hello!'); });  // outerHTML でラップするとイベントが発生しなくなる  targetElem.outerHTML = '<div class="foo">' + targetElem.outerHTML + '</div>';</script>

<button id="wrap-target">ラップされるボタン</button><script>  const targetElem = document.querySelector('#wrap-target');  targetElem.addEventListener('click', ()=> { console.log('hello!'); });  // 要素を作成  const wrapper = document.createElement('div');  wrapper.classList.add('foo');  // 作成した要素を DOM に挿入  targetElem.insertAdjacentElement('beforebegin', wrapper);  // 作成した要素の子要素に対象の要素を追加（移動）  wrapper.appendChild(targetElem);</script>

<button id="wrap-target">ラップされるボタン</button><script>  const targetElem = document.querySelector('#wrap-target');  targetElem.addEventListener('click', ()=> { console.log('hello!'); });  // 要素を作成  const wrapper = document.createElement('div');  wrapper.classList.add('foo');  // 親ノードの insertBefor で作成した要素を DOM に挿入  targetElem.parentNode.insertBefore(wrapper, targetElem);  // targetElem.parentNode.removeChild(targetElem); // 省略可能  // 作成した要素の子要素に対象の要素を追加（移動）  wrapper.appendChild(targetElem);</script>

ある要素に対してイベントリスナーを登録するには、そのオブジェクト（EventTarget）のメソッド addEventListener() を使用することができます。

target.addEventListener(type, listener[, useCapture]); （従来からの書式）

target.addEventListener(type, listener[, options]);

target はイベントを設定する要素です。

パラメータ

• type：イベントリスナーを登録するイベントタイプ（イベント名）。全て小文字。
• listener：指定した種類のイベントが発生したときに呼び出されるリスナー関数。リスナー関数には Event オブジェクトが引数として渡されます。
• useCapture：イベントハンドラがキャプチャフェーズかバブリングフェーズのどちらで処理されるかを制御する真偽値（省略可）。初期値は false で、バブリングフェーズで実行。
• options：イベントリスナーの特性を指定するオブジェクト（once、passive、capture のオプションに真偽値を設定）を指定。 （省略可）

※第3引数に真偽値（true|false）を指定した場合は、従来通りのキャプチャフェーズかバブリングフェーズの制御になります。ブラウザが第3引数の useCapture と options のどちらをサポートしているかを検出するにはオプションの検出 を参照。

戻り値

undefined

以下はボタンをクリックすると「Hello」とアラート表示する例です。

<button id="btn">Click Me</button><script>//イベントを登録する要素を取得var btn = document.getElementById("btn");//イベントが発生したときに呼び出されるリスナー関数function sayHello() {  alert("Hello");}//要素にイベントリスナーを登録btn.addEventListener('click', sayHello, false);</script>

<button id="btn">Click Me</button><script>//イベントを登録する要素を取得var btn = document.getElementById("btn");//匿名関数を使って要素にイベントリスナーを登録btn.addEventListener('click', function() {  alert("Hello");}, false);</script>

//全ての button 要素を取得var btn = document.getElementsByTagName('button');//取得した button 要素の数だけイベントリスナーを無名関数を使って登録for(var i = 0; i < btn.length; ++i){  btn[i].addEventListener("click", function() {    /*関数の処理*/  }, false);}

//全ての button 要素を取得var btn = document.getElementsByTagName('button');//リスナー関数の定義function dosomething() {  /*関数の処理*/}//取得した button 要素の数だけイベントリスナーを登録for(var i = 0; i < btn.length; ++i){  btn[i].addEventListener("click", dosomething, false);}

<input type="text" id="textInput" size="30"><p id="output"></p><script>//テキストフィールドの id 属性が textInput を取得（input 要素）const textInput = document.getElementById('textInput');//id 属性が output の p 要素を取得（出力先）const output = document.getElementById('output');//テキストフィールドに input イベントを登録textInput.addEventListener('input', function() {  //出力先の p 要素の textContent に値を設定（出力）  output.textContent = this.value;  //this は textInput});</script>

textInput.addEventListener('input', () => {  //this は textInput（テキストフィールド）を参照できないため何も出力されない  output.textContent = this.value;  console.log(this.value);  //undefined  console.log(this.innerWidth);  //表示領域の幅が出力される}, false);

//テキストフィールドに input イベントを登録textInput.addEventListener('input', (e) => {  //出力先の p 要素の textContent にイベントが発生している要素（e.target）の値を設定  output.textContent = e.target.value;  //output.textContent = e.currentTarget.value;}, false);

textInput.addEventListener('input', () => {  //出力先の p 要素の textContent にテキストフィールド（textInput）の値を設定  output.textContent = textInput.value;}, false);

<textarea id="inputArea" cols="40" rows="5"></textarea><p id="alertMessage" style="color: red;"></p><script>  //テキストエリアを取得  const inputArea = document.getElementById('inputArea');  //メッセージを表示する p 要素を取得  const alertMessage = document.getElementById('alertMessage');  //テキストエリアに copy イベントを設定  inputArea.addEventListener('copy', (e) => {    // e.type で発生したイベント名を取得してメッセージを表示    alertMessage.textContent = e.type + ' はできません';    //コピーを禁止（させない）    e.preventDefault();  });  //テキストエリアに cut イベントを設定  inputArea.addEventListener('cut', (e) => {    alertMessage.textContent = e.type + ' はできません';    e.preventDefault();  });  //テキストエリアに paste イベントを設定  inputArea.addEventListener('paste', (e) => {    alertMessage.textContent = e.type + ' はできません';    e.preventDefault();  });  //テキストエリアに input イベントを設定  inputArea.addEventListener('input', () => {    //入力された内容が変わるとメッセージをクリア    alertMessage.textContent = '';  });</script>

<script>  const inputArea = document.getElementById('inputArea');  const alertMessage = document.getElementById('alertMessage');  //複数のイベントタイプに同じリスナー関数を設定する関数  const addMultiEventListener = (target, eventList, listener) => {    //カンマ区切りのイベントタイプのリストを分割して、前後の空白文字を除去    const events = eventList.split(',').map(event => event.trim());    //それぞれのイベントタイプにリスナー関数（別途定義した listener）を設定    events.forEach(event => target.addEventListener(event, listener));  };  //リスナー関数の定義  const noCopyPasteCut = (e) => {    alertMessage.textContent = e.type + ' はできません';    e.preventDefault();  }  //copy, cut, paste の各イベントにリスナーを設定（addMultiEventListener の実行）  addMultiEventListener(inputArea, "copy, cut, paste", noCopyPasteCut);  //リスナー関数が異なるので別途設定  inputArea.addEventListener('input', () => {    alertMessage.textContent = '';  })</script>

一度だけアラートを表示

<p id="alert_once">一度だけアラートを表示</p>

document.getElementById('alert_once').addEventListener('click', ()=> {  alert('一度だけアラートを表示します');}, {once: true});

//リスナーを登録する要素を取得var elem = document.getElementById('alert_once');//リスナー関数を名前付きで定義して、removeEventListener でその関数を指定elem.addEventListener('click', function funcName(e) {  this.removeEventListener(e.type, funcName);  // または e.currentTarget.removeEventListener(e.type, funcName);  alert('一度だけアラートを表示します');});

elem.addEventListener('click', function funcName() {  elem.removeEventListener('click', funcName);  alert('一度だけアラートを表示します');});

//一度だけ実行するイベントを登録する関数を定義var addOneTimeEvent = function(element, type, doOnce) {  element.addEventListener(type, function funcName() {    element.removeEventListener(type, funcName);    doOnce();  });};//対象の要素var elem = document.getElementById('alert_once');//elem に一度だけ実行するイベントを登録addOneTimeEvent(elem, 'click', function() {  alert('一度だけアラートを表示します');});

<button type="button" id="btn">Click</button><script>document.getElementById('btn').addEventListener('click', {  //handleEvent() メソッドを実装  handleEvent:  function (e) {    alert(this.message + 'イベントタイプ：' + e.type );  },  message: 'Hello! ' //プロパティ（引数として渡す値）}, false);</script>

//第2引数に指定するオブジェクトconst myEventListener = {  handleEvent: function(e) {    alert(this.message + 'イベントタイプ：' + e.type );  },  message: 'Hello! '}document.getElementById('btn').addEventListener('click', myEventListener, false);

入力値：

イベント発生回数：

<input type="text" id="textInput" size="30" placeholder="テキストを入力"><input type="button" id="clear" value="Reset"><p>入力値： <span id="output"></span></p><p>イベント発生回数： <span id="countOut"></span></p><script>//id 属性が textInput の要素（テキストフィールド）const textInput = document.getElementById('textInput');//id 属性が output の要素（入力値の出力先）const output = document.getElementById('output');//id 属性が countOut の要素（カウントの出力先）const countOut = document.getElementById('countOut');//カウント（イベントの発生回数）let count = 0;//addEventListener の第2引数に渡すオブジェクトconst eventListenerObj = {  output : output,  //入力値の出力先  count : count,   //カウント（イベントの発生回数）  countOut : countOut, //カウントの出力先  //handleEvent() メソッドを実装  handleEvent: function(e) {    //output の textContent プロパティに入力された値を出力    this.output.textContent = e.target.value;    //発生回数を1増加    this.count ++;    //countOut の textContent プロパティに発生回数を出力    this.countOut.textContent = this.count;  }};textInput.addEventListener('input', eventListenerObj, false);//id 属性が clear の要素に click イベントを設定document.getElementById('clear').addEventListener('click', ()=> {  //テキストフィールドの value や出力先のテキストを空に  textInput.value = '';  output.textContent = '';  countOut.textContent = '';  //※オブジェクトのカウントを 0 に  eventListenerObj.count = 0;}, false);</script>

<script>const textInput = document.getElementById('textInput');const output = document.getElementById('output');const countOut = document.getElementById('countOut');let count = 0;const eventListener = (e)=> {  output.textContent = e.target.value;  count ++;  countOut.textContent = count;}/* //function 文の場合function eventListener(e) {  output.textContent = e.target.value;  count ++;  countOut.textContent = count;}*/textInput.addEventListener('input', eventListener, false );document.getElementById('clear').addEventListener('click', ()=> {  textInput.value = '';  output.textContent = '';  countOut.textContent = '';  count = 0;}, false);</script>

let eventTimer;//操作（イベント）を停止して 200ms 経過したら終了と判定const interval = 200;window.addEventListener('イベント', (e) => {  if (eventTimer !== false) {    clearTimeout(eventTimer);  }  eventTimer = setTimeout( () => {    // イベントが終了したら行う処理  }, interval);});

let eventTimer;//操作（イベント）を停止して 200ms 経過したら終了と判定const interval = 200;window.addEventListener('イベント', (e) => {  clearTimeout(eventTimer);  eventTimer = setTimeout( () => {    // イベントが終了したら行う処理  }, interval);});

<p>ウィンドウ幅：<span id="resize_event_output"></span></p><script>  const resizeEventOutput = document.getElementById('resize_event_output');  // window の表示領域の幅を取得して表示  resizeEventOutput.textContent = window.innerWidth;  let myTimer = false;  window.addEventListener('resize', (e) => {    if (myTimer !== false) {      clearTimeout(myTimer);    }    myTimer = setTimeout(function() {      //e.target（window）の表示領域の幅を取得して表示      resizeEventOutput.textContent = e.target.innerWidth;      //または resizeEventOutput.textContent = window.innerWidth;    }, 200);  });</script>

let eventTimer;const interval = 300;window.addEventListener('イベント', (e) => {  // eventTimer が 0 でなければ何もしない（0はfalse）  if ( eventTimer ) return ;  eventTimer = setTimeout( () => {    // eventTimer に 0 を設定    eventTimer = 0 ;    // 間引いて実行する処理  }, interval);});

<p>通常イベントの発生回数： <span id="normal_count_output"></span></p><p>間引いたイベントの発生回数： <span id="reduced_count_output"></span></p><script>  const normal_count_output = document.getElementById('normal_count_output');  const reduced_count_output = document.getElementById('reduced_count_output');  let eventTimer;  const interval = 300;  var count1 = 0 ;  var count2 = 0 ;  window.addEventListener('scroll', (e) => {    count1 ++;    normal_count_output.textContent = count1;    if ( eventTimer ) return ;    eventTimer = setTimeout( () => {      eventTimer = 0 ;      count2 ++;      reduced_count_output.textContent = count2;    }, interval);  });</script>

//passive オプションがサポートされているかどうかの真偽値let passiveSupported = false;try {  const options = {    get passive() {      passiveSupported = true;  //passive オプションがサポートされていれば true      return false;    }  };  window.addEventListener("test", null, options);  window.removeEventListener("test", null, options);} catch(err) {  passiveSupported = false;}

document.addEventListener('wheel', (e) => {   //イベント処理}, passiveSupported ? { passive: true } : false);

removeEventListener() は登録したイベントリスナーを削除します。

target.removeEventListener(type, listener[, options]);

パラメータ

• type：登録されたイベントを表す文字列。（addEventListener() で指定したイベント名）
• listener：登録時のリスナー関数
• options：登録時に指定した場合は capture/useCapture フラグは一致させる

戻り値

undefined

登録した際のイベント名（type）と関数名（listener）を一致させる必要があります。また、登録時に第3引数の capture/useCapture オプションを指定した場合は、値を一致させる必要があります（capture/useCapture 以外の値は一致していなくてもかまいません）。

var btn = document.getElementById('foo');function hello() {  alert('Hellow World!');}//イベントリスナーを登録btn.addEventListener('click', hello, false);//登録したイベントリスナーを削除btn.removeEventListener('click', hello, false);//または以下でも同じbtn.removeEventListener('click', hello, {capture: false});

var btn = document.getElementById('foo');//イベントリスナーを無名関数で登録btn.addEventListener('click', function() {  alert('Hellow World!');});//（削除できない例）無名関数で登録したイベントリスナーは削除できないbtn.removeEventListener('click', function() {  alert('Hellow World!');});

var btn = document.getElementById('foo');//イベントリスナーを登録して1度実行したら削除btn.addEventListener('click', function hello() {  alert('Hellow World!');  this.removeEventListener('click', hello);});

var btn = document.getElementById('foo');//イベントリスナーを登録btn.addEventListener('click', function hello() {  alert('Hellow World!');});//hello() にアクセスできないのでエラーになるbtn.removeEventListener('click', hello);   //hello is not defined

//イベントを登録する要素を取得var div = document.getElementById('foo');//リスナー関数の引数にはイベントのオブジェクト（以下の場合は event）が渡されるfunction show_target_id(event) {  //イベントオブジェクトの target プロパティの id をコンソールに出力  console.log(event.target.id);  //foo}//要素に click イベントのリスナーを登録div.addEventListener('click', show_target_id);

<div id="foo">Event Area</div><pre id="bar"></pre><script>//イベントを登録する領域の div 要素を取得var div = document.getElementById('foo');//イベントの内容（プロパティ）を表示する領域の pre 要素を取得var pre = document.getElementById('bar');//イベントリスナー関数（イベントオブジェクトは e で渡される）function showEventProps(e) {  var result = [];  result.push("発生元要素：" + e.target.id);  result.push("イベントタイプ： " + e.type);  result.push("ボタン：" + getButtonType(e));  result.push("X座標：" + e.clientX); //MouseEvent プロパティ  result.push("Y座標：" + e.clientY); //MouseEvent プロパティ  result.push("発生時刻（タイムスタンプ）：" + e.timeStamp);  //pre 要素にテキスト出力  pre.textContent = result.join('\n');}//マウスボタンのタイプを返す関数function getButtonType(e) {  //e.button は MouseEvent プロパティ  switch(e.button) {    case 0: return "left";    case 1: return "center";    case 2: return "right";  }}//イベントリスナーを div 要素に登録div.addEventListener('mousedown', showEventProps, false);</script><!-- 出力例発生元要素：fooイベントタイプ： mousedownボタン：leftX座標：61Y座標：28発生時刻（タイムスタンプ）：1087.2500000004948-->

<div id="foo">  <div></div> <div></div> <div></div> <div></div></div><script>//イベントを登録する全ての領域の div 要素を取得var divs = document.getElementById('foo').getElementsByTagName('div');//背景色の配列var colors = ['green', 'blue', 'red', 'yellow', 'orange', 'silver'];//イベントを発生させた要素（event.target）の背景色を変更するリスナー関数function changeBGColor(event) {  //Math.floor(Math.random()*6) は 0～5 のランダムな整数を返します。  event.target.style.backgroundColor = colors[ Math.floor(Math.random()*6) ];  //イベントを発生させた要素（オブジェクト）をコンソールに出力  console.log(event);}//取得した div 要素全てにイベントリスナーを登録for (var i = 0; i < divs.length; i++) {  divs[i].addEventListener('click', changeBGColor);}</script><!-- コンソール出力例（イベントオブジェクト）MouseEvent {isTrusted: true, screenX: 311, screenY: 584, clientX: 226, clientY: 302, …}-->

上記サンプル（同じ色が続くことがあります）

<form>  <div>    <label for="email">Email: </label>    <input id="email" type="text">  </div>  <div>     <input id="submit" type="submit">  </div></form><p class="message"></p><script>//フォーム要素を取得var form = document.forms[0];//Email 入力欄の要素を取得var email = document.getElementById('email');//メッセージを表示する要素を取得var message = document.getElementsByClassName('message')[0];//リスナー関数（Email 入力欄をチェック）function validate(e) {  //Email 入力欄が空の場合  if (email.value === '') {    //デフォルトの動作（フォームの送信）を停止    e.preventDefault();    //メッセージを表示    message.textContent = 'Email を入力してください';  }}//フォーム要素にイベントリスナーを登録form.addEventListener('submit', validate);</script>

<div id="foo">Foo  <div id="bar">Bar</div></div>

var foo = document.getElementById("foo");var bar = document.getElementById("bar");function fooAlert(e) {  alert("foo: 上位要素のリスナ");}function barAlert(e) {  alert("bar: 下位要素のリスナ");}foo.addEventListener('click', fooAlert);bar.addEventListener('click', barAlert);

var foo = document.getElementById("foo");var bar = document.getElementById("bar");function fooAlert(e) {  alert("foo: 上位要素のリスナ");}function barAlert(e) {  alert("bar: 下位要素のリスナ");  e.stopPropagation();  //バブリングを抑止}foo.addEventListener('click', fooAlert);bar.addEventListener('click', barAlert);

<table id="myTable">  <caption>Sample Table</caption>  <tr>      <th>TH</th>      <th>TH</th>      <th>TH</th>    </tr>  <tr>    <td>1</td>    <td>2</td>    <td>3</td>  </tr>  ・・・中略・・・</table><!--以下は発生したイベントの target と currentTarget の値を出力するための p 要素--><p>event.target のタグ <span id="event_target"></span></p><p>event.currentTarget のタグ <span id="event_currentTarget"></span></p>

// id 属性が myTable の table 要素const myTable = document.getElementById('myTable');//対象の td 要素の親要素の table にイベントリスナーを登録myTable.addEventListener('click', (e) => {   //クリックイベントが発生した要素（e.target）のタグ名を出力（確認用：通常は不要）  document.getElementById('event_target').textContent = e.target.tagName;  //イベントリスナーを登録した要素（e.currentTarget）のタグ名を出力（確認用：通常は不要）  document.getElementById('event_currentTarget').textContent = e.currentTarget.tagName;  // クリックイベントが発生した要素を変数 target に代入  const target = e.target;  // クリックイベントが発生した要素が td 要素でなければ何もしない  if (target.tagName != 'TD') return;  // 要素の背景色を変更  if(target.style.backgroundColor ==='pink') {    //背景色が pink なら背景色を削除    target.style.backgroundColor = null;  }else{    //背景色が pink なら背景色を pink に    target.style.setProperty('background-color', 'pink');  }});

<div id="myRadio">  <input type="radio" name="color" value="green" id="radioGreen">  <label for="radioGreen"> Green </label>  <input type="radio" name="color" value="blue" id="radioBlue">  <label for="radioBlue"> Blue </label>  <input type="radio" name="color" value="red" id="radioRed">  <label for="radioRed"> Red  </label></div><p>選択された項目の値 : <span id="checkedItems"></span></p><script>  //ラジオボタンの親要素の div 要素  const myDiv = document.getElementById('myRadio');  // 選択された項目の値を出力する id が checkedItems の span 要素  const checkedItems = document.getElementById('checkedItems');  //div 要素に change イベントのリスナーを登録  myDiv.addEventListener('change', (e) => {    //イベントが発生した要素を変数に代入    const target = e.target;    //イベントが発生した要素の type 属性が radio で name 属性が color であれば    if(target.type === 'radio' && target.name === 'color') {      //イベントが発生した要素の value を span 要素に出力      checkedItems.textContent = target.value;      //span 要素の親要素（p 要素）の文字色を value の値に      checkedItems.parentElement.style.color = target.value;    }  });</script>

<div id="myCheckbox">  <label><input type="checkbox" name="checkValue" value="1"> value 1</label>  <label><input type="checkbox" name="checkValue" value="2"> value 2</label>  <label><input type="checkbox" name="checkValue" value="3"> value 3</label></div><p>操作結果 : <span id="checkedResult"></span></p><button type="button" id="addCheckbox">Add</button><button type="button" id="removeCheckbox">Remove</button>

//チェックボックスの親（祖先）要素const myCheckbox = document.getElementById('myCheckbox');//メッセージ（操作結果）を表示する要素const checkedResult = document.getElementById('checkedResult');//チェックボックスを追加するボタン要素const addCheckbox = document.getElementById('addCheckbox');//チェックボックスを削除するボタン要素const removeCheckbox = document.getElementById('removeCheckbox');//チェックボックスの親要素にイベントリスナーを登録myCheckbox.addEventListener('change', (e) => {  //イベントが発生した要素  const target = e.target;  //イベントが発生した要素の type 属性が checkbox で name 属性が checkValue であれば  if(target.type === 'checkbox' && target.name === 'checkValue') {    if(target.checked === true) { // checked プロパティが true であれば選択された      checkedResult.textContent = target.value + ' が選択されました。';    }else{      checkedResult.textContent = target.value + ' が解除されました。';    }  }});// label 要素のカウント（長さ）let labelCount = document.querySelectorAll('#myCheckbox label').length;//チェックボックスを追加するボタンにイベントリスナーを登録addCheckbox.addEventListener('click', () => {  // label 要素を生成  const label = document.createElement('label');  // label 要素のカウントを1増加  labelCount++;  // 生成した label 要素の HTML にチェックボックスを設定（value と表示する文字列に label 要素のカウントを設定）  label.innerHTML = `<input type="checkbox" name="checkValue" value="${labelCount}"> value ${labelCount}`;  //親要素に生成した label 要素を追加  myCheckbox.appendChild(label);});//チェックボックスを削除するボタンにイベントリスナーを登録removeCheckbox.addEventListener('click', () => {  //すべての label 要素を取得  const  labels = document.querySelectorAll('#myCheckbox label');  //取得した label 要素の最後の要素が存在すれば  if(labels[labels.length -1]) {    //最後の label 要素を削除してカウントを1減らす    labels[labels.length -1].remove();    labelCount--;  }else{    checkedResult.textContent = "削除する項目がありません";  }});

var anchors_array = Array.from(document.getElementsByTagName('a'));  //配列

var anchors_array = Array.prototype.slice.call( document.getElementsByTagName('a'));  //配列

var anchors_array = [...document.getElementsByTagName('a')];alert(Array.isArray(anchors_array));  //true

<script>  //script 要素を作成  let myScript = document.createElement('script');  //script 要素に src を設定（任意のドメインから任意のスクリプトがロード可能）  myScript.src = "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js";  //body 要素の最後にスクリプト（script 要素）を追加  document.body.appendChild(myScript);  //以下は head 要素にスクリプト（script 要素）を追加する場合  //document.head.appendChild(myScript);  //以下は古い書き方（document.head をサポートしていない場合）  //document.getElementsByTagName("head")[0].appendChild(myScript);</script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

<script>  //script 要素を作成  let myScript = document.createElement('script');  //script 要素に src を設定（任意のドメインから任意のスクリプトがロード可能）  myScript.src = "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js";  //body 要素の最後にスクリプト（script 要素）を追加  document.body.appendChild(myScript);  //スクリプトの読み込みが完了したら（script の load イベントを登録）  myScript.addEventListener('load', function() {    // 読み込んだスクリプト（Lodash.js）を使って処理を実行    const users = [      { id: 1, name: 'Mike' },      { id: 2, name: 'David' },      { id: 3, name: 'Lisa' },      { id: 4, name: 'Maria' },    ];    const user = _.find(users, { id: 3 });    console.log(user.name); //Lisa と出力される  });</script>

<script>  let myScript = document.createElement('script');  myScript.src = "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js";  document.body.appendChild(myScript);  // onload を使う  myScript.onload = function() {    // 読み込んだスクリプト（Lodash.js）を使って処理を実行    const users = [      { id: 1, name: 'Mike' },      { id: 2, name: 'David' },      { id: 3, name: 'Lisa' },      { id: 4, name: 'Maria' },    ];    const user = _.find(users, { id: 3 });    console.log(user.name); //Lisa  };</script>

<script>  //link 要素を作成  let myStyle = document.createElement('link');  //rel 属性を stylesheet に設定  myStyle.rel = "stylesheet";  //href 属性を設定  myStyle.href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css";  //head 要素にスタイルシート（link 要素）を追加  document.head.appendChild(myStyle);  myStyle.addEventListener('load', function() {    console.log('スタイルを読み込みました');  })</script>

window.onload = function() {    //処理の記述};

window.onload = function() {  console.log('hello foo!');};window.onload = function() {  console.log('hello bar!');};window.onload = function() {  console.log('hello baz!'); //hello baz!};//最後の hello baz! のみが出力される

window.addEventListener('load', function(){  console.log('hello foo!');  //hello foo!});window.addEventListener('load', function(){  console.log('hello bar!');  //hello bar!});window.addEventListener('load', function(){  console.log('hello baz!');  //hello baz!});