Web Design Leaves

<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>

stylesheet.insertRule( rule[, index] )

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 + 左右 padding
console.log('offsetWidth : ' + sampleBox1.offsetWidth);  //230

//offsetHeight = CSS height + 上下 border + 上下 padding
console.log('offsetHeight : ' + sampleBox1.offsetHeight);  //130

//offsetWidth = CSS width + 左右 padding
console.log('clientWidth : ' + sampleBox1.clientWidth);  //220

//offsetWidth = CSS width + 上下 padding
console.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 width
console.log('offsetWidth : ' + sampleBox2.offsetWidth);  //200

//offsetHeight = CSS height
console.log('offsetHeight : ' + sampleBox2.offsetHeight);  //100

//clientWidth = CSS width - 左右 border
console.log('clientWidth : ' + sampleBox2.clientWidth);  //190

//clientHeight = CSS height - 上下 border
console.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);  //134
console.log(sampleBox3.clientWidth);  //124 （左右ボーダーの分 10px 小さい）

//小数値
console.log(sampleBox3.getBoundingClientRect().width); //133.828125
</script>

#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>

<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>
<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 要素は取得されない）
Title

This 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>

//引数に文字列を受け取り特殊文字を変換する関数 h()
function h(str){
  return str.replace(/&/g, '&')
    .replace(/"/g, '"')
    .replace(/'/g, ''')
    .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>

<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);

targetElement.insertAdjacentText(position, text);

targetElement.insertAdjacentElement(position, element);

var dupNode = node.cloneNode(deep);

<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>

<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>

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

//リスナーを登録する要素を取得
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('一度だけアラートを表示します');
});

<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>

<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);

<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() {
  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!
});