ور رفتن با DOM - قسمت اول

ور رفتن با DOM
ور رفتن با DOM

دوستان سلام قراره تو این سری پست ها با 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 ور میریم.