ECMAScript/tools/jQuery/tips/脱jQueryメモ - 豚吐露＠wiki

脱jQueryメモ

DOM操作

	jQuery	Vanilla JS	memo
create tag	var tr = $("<tr></tr>");	var tr = document.createElement("tr");
create dom from HTML	$('<div><p>inner html.</p></div>') var div = $('<div></div>'); div.html('<p>inner html.</p');	var dom = document.createElement('div'); dom.insertAdjacentElement('beforeend', '<p>inner html.</p>') dom.innerHTML = '<p>inner html.</p>';	html文字列からDOMを作りたい場合、必ず親要素が別に無いとダメ。 insertAdjacentElementとinnerHTMLどちらも得られる結果は同じなので、innerHTMLの方が使い勝手良いかも。 insertAdjacentElementの位置指定は、以下4種類あるが、対象がroot要素の場合、『beforebegin』と『afterend』は指定できない。 - beforebegin： 対象の直前。 - afterbegin： 対象の最初の子要素。 - beforeend： 対象の最後の子要素。 - afterend： 対象の直後。
search from Elements	$('table').find('#list')	document.getElementsByTagName('table').querySelectorAll('#list') document.getElementsByTagName('table').querySelector('#list')	取得対象が複数か否かでSelectorAllとSelectorを使い分ける必要がある。

object操作

	jQuery	Vanilla JS	memo
extend	$.extend(a, b); $.extend({}, a, b);	object.assign(a, b); object.assign({}, a, b);	aにbのobjectをmergeする。 第1引数のobjectにmergeするので、aがoverwriteされる。嫌だったら、第1引数に空のobjectを渡せば良い。

---

更新日： 2022年06月14日 (火) 16時14分22秒