【JavaScript】親子要素を取得し特定の文字列が含まれているか確認する

概要

先日素のJavaScriptで開発をしていたところ、ターゲットの親子要素を取得、さらに特定の文字があるかどうかを判別したい、というケースがありました。
その時の対応のメモです。

（ぼかしてますが）例としてはtrタグを取得し、その親要素に「リスト」という文字列が含まれているか、ということを把握することをしたかったです。

コード

const target = document.querySelectorAll("tr");//解説１
const hoge = ​target.parentElement.outerHTML;//解説2
const list = hoge.includes('リスト');//解説3

解説

解説1

const target = document.querySelectorAll("tr");//１

querySelectorAll(“tr”)でtrタグがある箇所を取得します

解説2

const hoge = ​target.parentElement.outerHTML;//2

parentElementを使って、1つ上の階層を取得します
オブジェクト型なので文字がわかるように.outerHTMLで取り出しました
（今回の場合はouterHTMLでしたが、textContentなどでも可）

解説3

const list = hoge.includes('リスト');//3

includesを使い対象の文字列があるかどうかを確認します。
「あるかどうか」なので、booleanのtrueかfalseで返ってきます。

補足

parentElementとparentNodeはほぼ一緒だが、一番上HTMLのタグから親を取得しようとした時に、parentElementはnullを返すが、parentNodeはDocumentを返す、というのが違いだそうです。

parentElementは親ですが、子の取得の場合は、childrenまたはchildNodesとなります。