DEV Community

kaede
kaede

Posted on

Chrome Console で id や class を元にエレメントの取得や変更をする

why

console でかっこよく、DOM を操りたかった。


$("#id") で一致する最初にヒットしたエレメントを選択する

https://www.youtube.com/watch?v=-4ehhOkwEVs

dev.to のサイトの場合

$("#search-link")
Enter fullscreen mode Exit fullscreen mode
<a class="c-link c-link--icon-alone c-link--block m:hidden " id="search-link" aria-label="Search" href="/search">
省略
</a>
Enter fullscreen mode Exit fullscreen mode

search-link の ID を指定してエレメントを取得できた。


$(".className") で一致する最初にヒットしたエレメントを選択する

dev.to のサイトの場合

$(".js-policy-article-create")
Enter fullscreen mode Exit fullscreen mode
<a class="c-cta c-cta--branded mr-2 whitespace-nowrap js-policy-article-create" href="/new">
            Create Post
</a>
Enter fullscreen mode Exit fullscreen mode

これで投稿ボタンの HTML エレメントを取れる
階層の有るものだと中身まで取れる

$(".js-policy-article-create").innerText

'Create Post'
Enter fullscreen mode Exit fullscreen mode

.innerText などで内部のテキストなども取れる。

$(".js-policy-article-create").innerText = "優勝"
Enter fullscreen mode Exit fullscreen mode

表示されている中身を書き換えることもできる。

Image description


$$(".className") で一致したエレメントを全て取れる

同じく dev.to のサイトの場合

$$(".crayons-story__title")
Enter fullscreen mode Exit fullscreen mode

これで記事リストの記事たちのタイトルを取れるのだが

$$ を使うと

(25) [h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title, h3.crayons-story__title]
Enter fullscreen mode Exit fullscreen mode

画面に表示されている記事たちのタイトルが全て取れる

$$(".crayons-story__title").map((it) => it.innerText)
Enter fullscreen mode Exit fullscreen mode
(35) [
'Why is z-index not working?! - Explaining CSS Stacking Context'
'Neuralink: Why should I let them put a chip in my head?'
'How a Hacker Stole $566M USD Exploiting a Code Smell'
'Django Dynamic DataTables - Free Tool (Updated)'
'My portfolio is ready!!'
'Building a PDF Generator using AWS Lambda'
'I got my Hacktoberfest2022 Badge 🎉'
'Scaling & Load-balancing NodeJS Containers with Nginx'
'Day 17-18: The API is on its way...'
'Logging in
a thing we all hate'
'What about off-grid programming?'
'Episode 105: myNewsWrap – SAP and Microsoft'
'DAO: What You Need to Know & How It Benefits Your Business?'
'The LowCode War'
'Hacktoberfest 2022 t-shirt'
'Dynamic Linker Hijacking Experiments - Evasive Techniques (Part 2)'
'Manage Assets Remotely With Clothing Simulator'
'Sending mails in Go the easy way'
'NestJs: Create unit test for service with ropository typeorm (MySql)'
'ReactJS এ কিভাবে Redux ছাড়াই Redux এর মত করে reducer
dispatch
actions ব্যবহার করা যায়'
'16. Leetcode solution in CPP'
"Today's Daily Humor For Devs - Daily Developer Jokes"
'Day 632 : One of Them Days'
'151 days streak on Leetcode🥳🥳🥳🥳'
'Beginner guide on python🐍🐼pandas'
'16 Libraries You Should Know as a React Developer 💯🔥'
'How to Improve Your Webpage Speed for Faster Website'
'JavaScript Capitalize First Letter'
'GCP Anthos Cluster on AWS'
'AWS Copilot'
'Chrome Console 基礎'
'FREE - Learn HTML'
'Angular Dart 基礎 -- Part 01 マウスイベントの処理'
'How to Build Java Applications Today #68'
'NestJs: สร้าง Unit test สำหรับทดสอบ Service ที่ใช้ typeorm + mysql'
]

Enter fullscreen mode Exit fullscreen mode

map すれば、それぞれの中身も取れる。
スクレイピングに使えそう。

https://tools.dojo.cc/tools/comma-to-newline

改行ツールを使ったので文字化けしている。


GUI

https://developer.chrome.com/docs/devtools/dom/

マウス操作でも書き換えられる。
Edit as HTML で要素を増やしたり、
ドラッグアンドドロップで入れ替えできるし

https://developer.chrome.com/docs/devtools/dom/#path

Elements タブで右クリックして、 copy > copy js path で
document.querySelector の文を発行できる。

DBeaver のテーブル画面からクエリを発行するときみたいだ。

Top comments (0)