jQueryを使わないでDOM操作するためのメモ

jQuery を使わないで素の JavaScript を使ってDOM操作をしたくなったので、その痕跡を書き残しておきます。

---

＊要素の取得

HTML

  <div id="id_1" class="content">
    <div id="id_2" class="article">
      <p>Test</p>
    </div>
  </div>

jQuery

  const e1 = $('#id_1');
  const e2 = $('.content');
  const e3 = $('div');
  const e4 = $('#id_1 .article');

PureJS

  // getElement
  const e1 = document.getElementById('id_1');                 //HTMLElement
  const e2 = document.getElementsByClassName('content');      //HTMLCollection
  const e3 = document.getElementsByTagName('div');            //HTMLCollection
  const e4 = document.getElementById('id_1').getElementsByClassName('article');
  
  // querySelector
  const q1 = document.querySelector('#id_1');          //HTMLElement
  const q2 = document.querySelectorAll('.content');    //NodeList
  const q3 = document.querySelectorAll('div');
  const q4 = document.querySelectorAll('#id_1 .article');

---

＊子要素の取得

HTML

  <div id="id_1" class="content">
    <div id="id_2" class="article">
      <p>Test1</p>
    </div>
    <div id="id_3" class="article">
      <p>Test2</p>
    </div>
  </div>

jQuery

  const id = $('#id_1');
  const ch1 = id.children();
  const ch2 = id.children().first();
  const ch3 = id.children().last();

PureJS

  const id = document.getElementById('id_1');
  const ch1 = id.children;           //HTMLCollection
  const ch2 = id.firstElementChild;
  const ch3 = id.lastElementChild;

---

＊親要素の取得

HTML

 <div id="id_1" class="content">
   <div id="id_2" class="article">
     <p>Test</p>
   </div>
 </div>

jQuery

  const p1 = $('#id_2').parent();

PureJS

  const p1 = document.getElementById('id_2').parentNode;

---

＊クラス名の取得

HTML

 <div id="id_1" class="content"></div>

jQuery

  const id = $('#id_1').attr('class');

PureJS

  const name = document.getElementById('id_1').className;

---

＊クラス名の存在チェック

HTML

 <div id="id_1" class="content"></div>

jQuery

  const isExist = $('#id_1').hasClass('content');

PureJS

  const isExist = document.getElementById('id_1').classList.contains('content');   //true

---

＊クラスの削除/追加

HTML

 <div id="id_1" class="content"></div>

jQuery

  let id = $('#id_1');
  id.removeClass('content');
  id.addClass('content');

PureJS

  let id = document.getElementById('id_1');
  id.classList.remove('content');
  id.classList.add('content');

---

＊属性の取得

HTML

 <div id="id_1" name="content1" class="content"></div>

jQuery

  let content = $('.content');
  const id = content.attr('id');
  const name = content.attr('name');

PureJS

  let content = document.querySelector('.content');
  const id1 = content.id;
  const id2 = content.getAttribute('id');
  const name1 = content.name;
  const name2 = content.getAttribute('name');

---

＊要素の追加（前）

HTML

 <div id="id_1" class="content">
   <div id="id_2" class="article"></div>
 </div>

jQuery

  $('.content').prepend('<div id="id_3" class="article"></div>');

PureJS

  let newDiv = document.createElement('div');
  newDiv.className = 'article';
  newDiv.id = 'id_3';
  let parent = document.querySelector('.content');
  let div2 = document.querySelector('.content .article');
  parent.insertBefore(newDiv, div2);

---

＊要素の追加（後ろ）

HTML

 <div id="id_1" class="content">
   <div id="id_2" class="article"></div>
 </div>

jQuery

  $('.content').append('<div id="id_3" class="article"></div>');

PureJS

  let newDiv = document.createElement('div');
  newDiv.className = 'article';
  newDiv.id = 'id_3';
  let div2 = document.querySelector('.content .article');
  div2.appendChild(newDiv);

---

＊子要素の追加

HTML

 <div id="id_1" class="content">
   <div id="id_2" class="article">
   </div>
 </div>

jQuery

  $('.content > :first').append('<div id="id_3" class="article"></div>');

PureJS

  let newDiv = document.createElement('div');
  newDiv.className = 'article';
  newDiv.id = 'id_3';
  let content = document.querySelector('.content');
  content.firstElementChild.appendChild(newDiv);

---

＊イベントの追加

HTML

 <div id="id_1" class="content"></div>

jQuery

  $('.content').on('click', function(){
    alert('hoge!');
  });

PureJS

document.querySelector('.content').addEventListener('click', function(){
     alert('hoge!')
  })

---

＊NodeListの取得

HTML

  <div id="id_1" class="content">
    <div id="id_2" class="article">
      <p>Test1</p>
    </div>
    <div id="id_3" class="article">
      <p>Test2</p>
    </div>
  </div>

PureJS

 const lists = document.querySelectorAll('.article');    //NodeList(静的)
 const list1 = lists[0];
 
 const id = document.getElementById('id_2');
 const childNodes = id.childNodes;  //NodeList(動的)
 const content = id.parentNode;     //HTMLElement

---

＊繰り返し処理

HTML

  <div id="id_1" class="content">
    <div id="id_2" class="article">
      <p>Test1</p>
    </div>
    <div id="id_3" class="article">
      <p>Test2</p>
    </div>
  </div>

jQuery

 $('.content .article').each(function(index, element){
   console.log($(element));
 })

PureJS

 const lists = document.querySelectorAll('.content .article')  //NodeList(静的)
 
 Array.prototype.forEach.call(lists, function(data) {
   console.log('data');
 });
 
 [].forEach.call(lists, function(data) {
   console.log('data');
 });
 
 //配列への変換
 const arrayList1 = [].slice.call(lists);
 const arrayList2 = Array.from();        //IE非対応

---

＊jQueryオブジェクトからDOM要素への変換

 const dom =$('.content').get(0);

---

＊DOM要素からjQueryオブジェクトへの変換

 const jq = $(document.querySelector('.content'));

---

＊所感

改めて jQuery の便利さを実感しました。ただ jQuery が裏側で何をしているか知るためには素の javaScript を理解していたほうが良いと思います。

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email