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