دوستان سلام قراره تو این سری پست ها با DOM ور بریم
خب برای شروع یک صفحه HTML بسازید و اسمشو هر چی دوس داشتین بذارین من میذارم index.html و تگ های زیر را داخلش کپی کنید و در قدم بعدی هم یک فایل js کنارش بسازید با هر اسمی دوست داشتین
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Todo App</title> </head> <body> <h1>Todos</h1> <p>Clean the kitchen</p> <p>Book flights</p> <p>Research museums</p> <p>Walk the dog</p> <p>Finish this course!</p> <script src="./todo-app.js"></script> </body> </html>
خب دیگه وقتش رسیده که با DOM ور بریم
خب من میخوام اولین تگ p را انتخابش کنم واسه این کار داخل فایل js خودتون کد زیر را بنویسین و خروجیش را داخل console مرورگر خودتون ببینین
const paragraph = document.querySelector('p') console.log(paragraph)
منظور از document همون صفحه HTML شما هست و متد querySelector هم اولین عنصری را که داخل پرانتز خواستین ازش را براتون برمیگردونه برای مثال ما اینجا سه تا تگ p داریم به اولین p که رسید کارش تموم میشه و اولین p را برمیگردونه به همین سادگی.
ولی خب شاید یکی از شماها بگه که چطوری همه p ها را انتخاب کنم خب کاری نداره که به جای querySelector بنویس querySelectorAll و حالشو ببر اینطوری همه p ها انتخاب میشن.
خب حالا ما یخورده حال نمیکنیم با تگ های p و میخوایم همشون را حذف کنیم باید چیکار کنیم این کار هم خیلی سادس اینطوری
const paragraphs = document.querySelectorAll('p') paragraphs.forEach(function (paragraph) { paragraph.remove() })
اول میایم همه p ها را انتخاب میکنیم و بعد یه حلقه مینویسم و تک تک p ها را با متد remove که کارش حذف المنت هست حذفشون میکنیم.
در پست های بعدی خیلی بیشتر با DOM ور میریم.
