آموزش جاوا اسکریپت قسمت دهم

آموزش جاوا اسکریپت

شئ document  :

در این قسمت می خوایم در مورد شئ document صحبت کنیم اگر با DOM آشنا هستید که خیلی خوبه اما اگر چیزی نمی دونید به لینک  http://www.w3schools.com/js/js_htmldom.asp برید و در مورد DOM مطالعه کنید .

من فایل index.html را به شکل زیر تغییر می دهم :


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Darkoobweb</title>
</head>
<body>

<p>Salam man hooman hastam.</p>
<p>Chetori hooman man pouria hastam.</p>
<p>Man injaaaaam.</p>
<p>Barname nevisi khailiii bahaleee.</p>

<div>
<p>Darkoob web taghdim mikonad.</p>
</div>

<script src="index.js"></script>
</body>
</html>

در کد بالا مشاهده می کنید که تگ اسکریپت را در پایین صفحه قرار دادم ، یکی از دلایل که این کار را انجام دادم این است که مرورگر صفحه html  را از بالا به پایین می خواند پس اگر تگ اسکریپتم را بالا قرار دهم مرورگر زمانی را نیاز دارد تا کدهای جاوا اسکریپت من را لود کند قبل از اینکه کدهای body را بخواند پس باعث می شود لود صفحه html من زمان برشود صفحه کند لود شود.

دلیل دگه اینکه اگر درکدهای جاوا اسکریپت با المنت های صفحه html  کار داشته باشم ، باید آن المنت ها لود شود تا کد من به آنها دست رسی پیدا کند ، پس اگر من تگ اسکریپتم را بالا قرار دهم هنوز تگ های p لود نشده اند تا کدهای js من با آنها ارتباط برقرار کنند ، پس در این شرایط بهترین جا برای تگ اسکریپت همان پایین است.

در کدهای js من میخوام محتوای تگ های p را یکی نمایش دهم ، به کد زیر دقت کنید:


(function () {

var elementHayeP = document.getElementsByTagName("p");

for (var i = 0; i < elementHayeP.length; i++) {

alert(elementHayeP[i].innerHTML);

}

})();

یک متغییر به نام elementHayeP ایجاد کردم و تمام تگ های p که در صفحه html وجود دارد را با دستور document.getElementByTagName داخل این متغییر ریختم ، چیزی که متد getElementByTagName به من بر می گرداند شبیه یک آرایه است ، در واقع آبجکتی به نام NodeList را به من بر می گرداند.

سپس یک حلقه for ساختم و با innerHTML محتوای هر p را نمایش دادم .

حالا اگر من فقط محتوای یک تگ p  خواص را نیاز داشته باشم چطور ؟ خوب اول یک id به آن تگ اختصاص می دهم .


<p id="darkoob">Darkoob web taghdim mikonad.</p>

سپس درindex.js این کد را می نویسم.


(function () {

var elementHayeP = document.getElementById("darkoob").innerHTML;
alert(elementHayeP);

})();

برای پیدا کردن تگ p خواصی که می خواستم از متد getElementById استفاده کردم و برای گرفتن محتوای آن تگ از innerHTML استفاده شده.

متد دیگری هم هست که می توانیم ازآن استفاده کنیم و آن querySelector و querySelectorAllاست ،  getElementTagNameوgetElementById سریع تر از querySelector وquerySelectorAllاست برای هیمن من از این متدها استفاده نمی کنم ، می تونید در موردquerySelector کمی تحقیق کنید.

در قسمت بعدی شما را با ساخت Element و Attributes آشنا می کنم.

درباره نویسنده

پوریا

سلام ، من پوریا هستم با جاوا آشنایی دارم به هوش مصنوعی و امنیت علاقه مندم و امید وارم آموزش هایی که در وب سایت قرار می دم برای شما مفید باشه ، موفق باشید {^}

نظر دهید

Click here to post a comment

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *