cssセレクターの変更にかかわらず情報を取得するセレクターの書き方について

Question

https://news.goo.ne.jp/topstories/today/
のサイトの一番上のニュースのaタグのhref属性とaタグに囲われているテキストを取得しようと思っています。
グーグルクロームのcopy selectorを使ってみたところ

###該当のソースコード

#NR-main-in > section > article > article:nth-child(1) > div > div.gn-topics > h4 > a

#NR-main-in > section > article > article:nth-child(3) > div > div.gn-topics > h4 > a

#NR-main-in > section > article:nth-child(3) > div > div.gn-topics > h4 > a

０時の日をまたいだ時点で上記のようにセレクターが変わってしまうのでうまく取得ができません。
セレクターを何にすれば上記の変化にかかわらず取得ができるのでしょうか？
・・・　section >article:first-chils > div > ・・・
のようにしてもエラーが出てしまいました

Comments

[退会済みユーザー]

RSSが提供されているというのに、スクレイピングしようとする意図はなんでしょうか？

[退会済みユーザー]

練習でやっていました

[退会済みユーザー]

性格わる

Answer 1

セレクタは併記できるので, ,で連結したらいかがでしょう？

#NR-main-in > section > article > article:nth-child(1) > div > div.gn-topics > h4 > a,
#NR-main-in > section > article > article:nth-child(3) > div > div.gn-topics > h4 > a,
#NR-main-in > section > article:nth-child(3) > div > div.gn-topics > h4 > a

それですとpythonから呼んだ時にエラーになってしまうんですよね。

では, 途中のsectionとarticle:nth-child(3)をすっ飛ばして記述したら如何でしょう.
>は直系の子セレクタですが, ですと子孫間のノード構成の違いを吸収できます.
(とは言え条件がだんだん緩やかとなるので, 余計なものまで釣ってしまう危険性が増えますが)

#NR-main-in div > div.gn-topics > h4 > a

Comments

[退会済みユーザー]

それですとpythonから呼んだ時にエラーになってしまうんですよね。
それぞれのサイトから一つのセレクターで呼び出すようにしていたので。
一つのセレクターで表すことはできないのでしょうか？

[退会済みユーザー]

飛ばしてしまうと二つ目以降の記事も全部取得してしまうんですよね。
最初の記事だけを取得できないのかなと試行錯誤しているのですが

[defghi1977]

そこはスクリプトを使ってらっしゃるのだから, セレクタで抽出したノードのリストの先頭のみを使うとか,
個々のセレクタを実行し, 何も取れなかったら次のセレクタを試すとか, 手続き的なアプローチの出番では？

[退会済みユーザー]

すいません、おっしゃられていました通りのやり方でできました。ご回答ありがとうございます。

Answer 2

サイトの構成が変わったら問題になるため、セレクターはフルパス指定をせずに取得対象の上位の要素から下に探索行けば良い気がしますが。

let element = document.querySelector(".gn-topics");
let element = document.querySelector(".topics-title");

タグを見たら言語がPythonだった・・・