Help us understand the problem. What is going on with this article?

最近の要素・ノード操作型メソッド事情

はじめに

JavaScript もどんどん進化し、ライブラリ等を使わずにネイティブな記述だけでもいろんな処理が書けるようになってきています。
実際に使うかどうかはおいておき、今こんなのがあるよというやつです。

※以下、jQuery を使わない書き方を「ネイティブ」と表現しています

jQuery っぽいメソッド

もう最近では jQuery を使わないことの方が多い気がします。
なんか気づいたら jQuery で使っていたメソッドのようなものがネイティブで書けるようになってます。

.closest()

.closest() といえば、直近の祖先の要素を取得するやつです。
ネイティブでは Element.closest() として実装されています。

HTML
<div class="target">
  <div class="target">
    <div>
      <div id="grandchild"></div>
    </div>
  </div>
</div>
jQuery
var target = $('#grandchild').closest('.target');
target.prop({ id: 'grandparent' });
JavaScript
const target = document.getElementById('grandchild').closest('.target');
target.id = 'grandparent';

これは両方とも以下になります。

HTML
<div class="target">
  <div class="target" id="grandparent">
    <div>
      <div id="grandchild"></div>
    </div>
  </div>
</div>

.prepend().append()

.prepend().append() といえば、前者が指定した要素の最後に要素を挿入、後者が指定した要素の最初に要素を挿入するやつです。
ネイティブでそれぞれ ParentNode.prepend()ParentNode.append() というメソッドとして実装されています。

Node.appendChild()ParentNode.append() の違いは返り値です。
返り値については、前者は挿入される要素・ノードなのに対して、後者は undefined です。

HTML
<div id="target">
  <p>ABCDEFG</p>
</div>
jQuery
const target = $('#target');

// .prepend()
const span = $('<span>');
target.prepend(span);

// .append()
const div = $('<div>');
target.append(div);
JavaScript
const target = document.getElementById('target');

// .prepend()
const span = document.createElement('span');
target.prepend(span);

// .append()
const div = document.createElement('div');
target.append(div);

これは両方とも以下になります。

HTML
<div id="target">
  <span></span>
  <p>ABCDEFG</p>
  <div></div>
</div>

引数で複数指定が可能

.prepend().append() は引数を増やすことで複数の要素・ノードを挿入できます。

HTML
<div id="target">
  <p>ABCDEFG</p>
</div>
JavaScript
const target = document.getElementById('target');

const span01 = document.createElement('span');
const div01 = document.createElement('div');

target.prepend(span01, div01, '12345');

const span02 = document.createElement('span');
const div02 = document.createElement('div');

target.append(span02, div02, '67890');

結果は

HTML
<div id="target">
  <span></span>
  <div></div>
  12345
  <p>ABCDEFG</p>
  <span></span>
  <div></div>
  67890
</div>

ちょっと気をつけたいのが .prepend() ですね。引数で複数指定した場合は、引数の順番のまま挿入されます。

テキストの場合の挙動の違い

一見すると同じように見えますが、テキストの場合は jQuery とネイティブで違いが出てきます。
.append() で例を見ます。

HTML
<div id="test">
  <p>ABCDEFG</p>
</div>
JavaScript
const list = document.getElementById('test');

// jQuery
$(list).append('<p>jQuery</p>');

// native
list.append('<p>native</p>');

結果は……

HTML
<div id="test">
  <p>ABCDEFG</p>
  <p>jQuery</p>
  &lt;p&gt;native&lt;/p&gt;
</div>

jQuery ではHTML文字列として扱われ、ネイティブではテキストノードとして扱われます。

ネイティブでHTML文字列として挿入したい場合は element.insertAdjacentHTML で代用できます。

JavaScript
const list = document.getElementById('test');
list.insertAdjacentHTML('beforeend', '<p>native</p>');

仕様

ParentNode.append() - Web API | MDN
ParentNode.prepend() - Web API | MDN

.before().after()

.before().after() といえば、前者が指定した要素の前に要素を挿入、後者が指定した要素の後ろに要素を挿入するやつです。
ネイティブでそれぞれ ChildNode.before()ChildNode.after() というメソッドとして実装されています。

HTML
<p id="target">ABCDEFG</p>
jQuery
const target = $('#target');

// .before()
const span = $('<span>');
target.before(span);

// .after()
const div = $('<div>');
target.after(div);
JavaScript
const target = document.getElementById('target');

// .before()
const span = document.createElement('span');
target.before(span);

// .after()
const div = document.createElement('div');
target.after(div);

これは両方とも以下になります。

HTML
<span></span>
<p id="target">ABCDEFG</p>
<div></div>

引数で複数指定が可能

.before().after() は引数を増やすことで複数の要素・ノードを挿入できます。

HTML
<p id="target">ABCDEFG</p>
JavaScript
const target = document.getElementById('target');

const span01 = document.createElement('span');
const div01 = document.createElement('div');

target.before(span01, div01, '12345');

const span02 = document.createElement('span');
const div02 = document.createElement('div');

target.after(span02, div02, '67890');

結果は

HTML
<span></span>
<div></div>
12345
<p id="target">ABCDEFG</p>
<span></span>
<div></div>
67890

テキストの場合の挙動の違い

.prepend().append() の時と同じように、テキストの場合は jQuery とネイティブで違いが出てきます。

HTML
<p id="target">ABCDEFG</p>
JavaScript
const target = document.getElementById('target');

// jQuery
$(target).after('<p>jQuery</p>');

// native
target.after('<p>native</p>');

結果は……

HTML
<p id="target">ABCDEFG</p>
<p>jQuery</p>
&lt;p&gt;native&lt;/p&gt;

jQuery ではHTML文字列として扱われ、ネイティブではテキストノードとして扱われます。

ネイティブでHTML文字列として挿入したい場合は element.insertAdjacentHTML で代用できます。

JavaScript
const target = document.getElementById('target');
target.insertAdjacentHTML('afterend', '<p>native</p>');

仕様

ChildNode.before() - Web API | MDN
ChildNode.after() - Web API | MDN

.remove()

.remove() といえば、DOMツリーから要素を取り除く(削除ではない)メソッドです。
ネイティブでは ChildNode.remove() として実装されています。

Node.removeChild() との違いは、指定した要素が removeChild を実行する要素内に存在している必要があります。
要するに、取り除く要素の親要素から実行してあげる必要があります。自分自身を取り除くメソッドではありません。
ChildNode.remove() は、自分自身を取り除くメソッドです。

HTML
<p id="target">ABCDEFG</p>
<p>HIJKLMN</p>
jQuery
$('#target').remove();
JavaScript
document.getElementById('target').remove();

これは両方とも以下になります。

HTML
<p>HIJKLMN</p>

仕様

ChildNode.remove() - Web APIs | MDN

.replaceWith()

.replaceWith() は要素を置換するメソッドで、シンプルな使い方では jQuery とネイティブでは動作的にほぼ同じです。
ChildNode.replaceWith() は jQuery のように引数に関数を使えません。

HTML
<p id="target">ABCDEFG</p>
jQuery
const div = $('<div>');
$('#target').replaceWith(div);
JavaScript
const div = document.createElement('div');
document.getElementById('target').replaceWith(div);

これは両方とも以下になります。

HTML
<div></div>

テキストの場合の挙動の違い

ここまでくればおわかりかと思いますが、他のメソッド同様に挙動が異なります。

HTML
<p id="target01">ABCDEFG</p>
<p id="target02">HIJKLMN</p>
JavaScript
// jQuery
$('#target01').replaceWith('<p>jQuery</p>');

// native
document.getElementById('target02').replaceWith('<p>native</p>');

結果は……

HTML
<p>jQuery</p>
&lt;p&gt;native&lt;/p&gt;

jQuery ではHTML文字列として扱われ、ネイティブではテキストノードとして扱われます。

ネイティブでHTML文字列として挿入したい場合は Element.outerHTML で代用しようと思えばいけます。

JavaScript
const target02 = document.getElementById('target02');
target02.outerHTML = '<p>native</p>';

仕様

ChildNode.replaceWith() - Web APIs | MDN

思ったこと

相変わらずDOM系のメソッドは似たようなものがたくさんあったりしてよくわからんですね……

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした