Chrome Console で id や class を元にElementの取得や変更をする
왜
console でかっこよく、DOM を操りたかった.
$("#id") で一致する最初にヒットしたElementmentを選択する
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 を指定してElementTを取得できた.
$(".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") 으로 一致したElementを全て取れる
同じく dev.to の사이트의 場合
$$(".crayons-story__title")
これで記事listの記事たちのタイトルを取れるのだが
$$ を使うと
(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'
]
지도 すれば、それぞれの中身も取れる.
skrayping に使えそう.
https://tools.dojo.cc/tools/comma-to-newline
改行ツールを使ったので文字化けしている.
Reference
이 문제에 관하여(Chrome Console で id や class を元にElementの取得や変更をする), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kaede_io/chrome-dev-tools-48b6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)