配列と配列で重複チェック【JavaScript】

■はじめに

2つ以上の配列があり、A配列にB配列の要素が重複しているか?重複している場合はどれが重複しているのか?

を調べる方法を記載します。

「filter」関数を使用しての実装になります。

■手順

A配列にB配列の要素重複確認

const arrayA = ['Apple', 'Google', 'Facebook', 'Zoom', 'Slack'];
const arrayB = ['Apple', 'Facebook'];
const result = arrayA.filter(item => arrayB.includes(item));
console.log(result); // ["Apple", "Facebook"]

A配列にB配列とC配列の要素重複確認

const arrayA = ['Apple', 'Google', 'Facebook', 'Zoom', 'Slack'];
const arrayB = ['Apple', 'Facebook'];
const arrayC = ['Google'];
const result = arrayA.filter(item => arrayB.includes(item) || arrayC.includes(item));
console.log(result); // ["Apple", "Google", "Facebook"]

HTML要素の取得方法、親子要素の取得方法【JavaScript】

■はじめに

ピュアなJavaScriptを使用したHTMLの要素の取得方法と、親子要素の取得方法を記載します。

■HTML要素の取得方法

以下のHTMLを元に、要素を取得する方法を記載します。

<div id="sample" class="test">
</div>

取得方法は以下

//タグ指定での取得
document.getElementsByTagName('div');
// id指定での取得
document.getElementById('sample');
//class指定での取得
document.getElementsByClassName('test');

■親子要素の取得方法

以下のHTMLを元に、要素を取得する方法を記載します。

<div id="sample" class="test">
<div id="sampleOne" class="testOne">
<h1>HELLO</h1>
<h1>HELLO ONE</h1>
<h1>HELLO TWO</h1>
</div>
</div>

取得方法は以下

//親要素
element.parentNode;
//子要素
element.firstElementChild; //最初の子要素
element.lastElementChild;  //最後の子要素
element.children; //子要素リスト
//1つ前の要素
element.previousElementSibling;
//1つ後の要素
element.nextElementSibling;

クリップボードに文字列をコピーする方法

■手順

以下の関数の第一引数にコピーしたい文字列を渡すことでクリップボードへコピーできます。

function copyText(target){
// コピー用の仮テキストエリア作成
const txtarea = document.createElement("textarea");
txtarea.textContent = target;
// bodyに仮テキストエリアを設定
const body = document.getElementsByTagName("body")[0];
body.appendChild(txtarea);
// コピー
txtarea.select();
document.execCommand('copy');
// コピー用の仮テキストエリア削除
body.removeChild(txtarea);
}