私の時間の中で私は自分の欲しいものをコンピュータにするために、IDEで面白い言葉を書いている間、私は現金のために少しのウェブをかき集めていました.
私は私のプログラムの中でscrapeし、整理したいページの特定の部分をターゲットにする方法を忘れていた.
以下のように、私は将来のあなたとあなたと共有するいくつかのメモをまとめています.
私たちが働くことができる少しのboilerplate htmlから始めましょう.

<div class="grandparent" id="grandparent-id">
<!-- top level grandparent -->
    <div class="parent"> <!-- first parent -->
        <div class="child" id="child-one"></div> <!-- child 1 -->
        <div class="child"></div> <!-- child 2 -->
    </div>
    <div class="parent"> <!-- second parent -->
        <div class="child"></div> <!-- child 3 -->
        <div class="child" id="child-four"></div> <!-- child 4 -->
    </div>
</div>

IDを取得する

ページあたり1つのユニークなID名だけがあります.したがって、getelement ( singular )を呼び出します.

const grandparent = document.getElementById("grandparent-id")

クラス名で要素を得る

get element (複数)はDOM (上記のHTMLの親)から要素のhtmlcollectionを返します.ただし、このコレクションでArrayメソッドを使用しようとすると、エラーが発生します.

返される要素の配列を配列内でラップすることで、これを回避できます.

const parent = Array.from(document.getElementsByClassName("parent"))

クエリセレクタ

これにより、CSSセレクタを使用してDOMをターゲットとすることで、単一の要素(DOMツリーに現れる最初のもの)が得られます.

const grandparent = document.querySelector("#grandparent-id") // id
const grandparent = document.querySelector(".grandparent") // class

クエリセレクタ

idで要素を得るのと同様に、これはクエリにマッチするすべての要素を与えます.しかし、これはnodelistを返します.

const grandparent = document.querySelectorAll("#grandparent-id") // id
const grandparent = document.querySelectorAll(".grandparent") // class

子要素の選択

まず、トップ祖父母ノードを対象とします.そこから、我々は下にすべての子供たちをつかむことができます.
通常、私たちは通常、私たちにNodelistを与えるQuerysElectorを使用していますが、子供たちを呼ぶとき、我々はHTMLCollectionを取り戻します!迷惑です.
返される子から配列を作成する必要があります.

const grandparent = document.querySelector(".grandparent")
const parents = Array.from(grandparent.children)
const parentOne = parents[0] // etc

また、親の子供にドリルダウンすることができます

const children = parentOne.children

親要素の選択

我々はすでに子供のレベルにまっすぐに行って、親をスキップするためにすでに捕らえたNodelistsの上でqueryselectorを使用することができます.

const childFour = document.querySelector("#child-four")
const parent = childFour.parent

最寄り祖父母要素の選択

これはqueryselectorと非常によく似ていますが、DOMを下げる代わりに上向きに動きます.
これは、渡されたセレクタを持つ最も近い要素を見つけるためにDOMを動かすCSS引数をとります.

const childFour = document.querySelector("#child-four")
const grandparent = childFour.closest(".grandparent")

半分のドムダウン

我々はすでに子供のレベルにまっすぐに行って、親をスキップするためにすでに捕らえたNodelistsの上でqueryselectorを使用することができます.

const grandparent = document.querySelector(".grandparent")
const childOne = grandparent.querySelector(".child")

兄弟の前の選択+次

これは、あなたが現在あるところからの次の要素を得ます.上下に行く代わりに、私たちは、DOMを横切って行くようです.

const childOne = document.querySelector("#child-one")
const childTwo = childOne.nextElementSibling

const childFour = document.querySelector("#child-four")
const childThree = childFour.previousElementSibling