اين صفحه به شما نشان ميدهد كه چگونه عناصرHTML را در يك صفحه HTML پيدا كرده وبه آن دسترسي داشته باشيد.
اغلب، ميخواهيد با جاوااسكريپت عناصرHTML را دستكاري كنيد .براي اينكار اول بايد عناصر را پيدا نموده وسپس آنرا دستكاري نمائيد .براي پيدا كردن چندين روش وجود دارد:
آسانترين راه براي پيدا كردن عناصرHTML استفاده از شناسه آنهاست .
مثال ـ پيدا كردن عناصر باid="intro"
const element = document.getElementById("intro");
اگر عنصر پيدا شود، متد عنصر را بعنوان شئ برگشت ودرelement قرار ميدهد .اگرعنصر وجود نداشته باشد، برگشتيnull ميباشد .
مثال ـ پيداكردن عناصر<p>
const element = document.getElementsByTagName("p");
مثال ـ در اين مثال اول عنصر باid="main"را پيداكرده و سپس روي آن عناصر <p> پيدا ميكند.
const x = document.getElementById("main"); const y = x.getElementsByTagName("p");
اگر ميخواهيد همه عناصر با نام كلاس مشابه پيدانمائيد، از getElementByClassName( )استفاده كنيد .
مثال ـ دراين مثال همه عناصر باclass="intro" را پيدا ميكند .
const x = document.getElementsByClassName("intro");
توجه ـ بيشتر نتايج برگشتي متدهايDOM آرايه هستند.
اگر ميخواهيد تمام عناصرHTML را كه با انتخابگرهاي CSS مشخص شده مطابقت دارند
مثال ـ در اين مثال ليست همه عناصر<p> باclass="intro" را پيدا ميكند.
const x = document.querySelectorAll("p.intro");
مثال ـ در اين مثال عنصر فرم باid="frm1" را در مجموعه فرم ها پيدا ميكندوتمام مقادير عناصر رانمايش ميدهد.
const x = document.forms["frm1"]; let text = ""; for (let i = 0; i < x.length; i++) { text += x.elements[i].value + "<br>"; }
اشياءHTML زير با مجموعه اشياء قابل دسترس هستند .
| ويژگي | شــرح | تلاش
دراجرا |
|---|---|---|
| document.anchors | همه عناصر <a>كه داراي ويژگي نامند برگشت ميدهد . | |
| document.body | عنصر<body> سند را برگشت ميدهد . | |
| document.embeds | همه عناصر<embed> را برگشت ميدهد . | |
| document.forms | همه عناصر<form> را برگشت ميدهد . | |
| document.head | همه عناصر<head> رابرگشت ميدهد . | |
| document.images | همه عناصر<img> را برگشت ميدهد . | |
| document.links | همه تگ هاي<a> , <area> را كه ويژگي herfدارند برگشت ميدهد. | |
| document.scripts | همه عناصر<script> را برگشت ميدهد . | |
| document.title | عنصر<title> رابرگشت ميدهد . | |
| document.documentElement | عنصر<html> را برگشت ميدهد. | |