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

why

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

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

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

dev.to のサイトの場合

$("#search-link")

<a class="c-link c-link--icon-alone c-link--block m:hidden " id="search-link" aria-label="Search" href="/search">
省略
</a>

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

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

dev.to のサイトの場合

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

<a class="c-cta c-cta--branded mr-2 whitespace-nowrap js-policy-article-create" href="/new">
            Create Post
</a>

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

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

'Create Post'

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

$(".js-policy-article-create").innerText = "優勝"

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

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

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

$$(".crayons-story__title")

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

$$ を使うと

(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]

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

$$(".crayons-story__title").map((it) => it.innerText)

(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'
]