سلکتورها در جاوا اسکریپت - JavaScript DOM Selectors

به نام خدا با عرض سلام و ادب خدمت دوستان گرامی از سری آموزش های جاوا اسکریپت با مبحث سلکتورها در جاوا اسکریپت در خدمت شما خواهیم بود با ما همراه باشید.

جاوا اسکریپت معمولاً برای دریافت یا تغییر محتوا یا مقدار عناصر HTML در صفحه و همچنین برای اعمال برخی افکت‌ها مانند نمایش، پنهان کردن، انیمیشن‌ها و …استفاده می‌شود.اما، قبل از اینکه بتوانید هر اقدامی را انجام دهید، باید عنصر HTML مورد نظر را پیدا یا انتخاب کنید.

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

سلکت عناصر اصلی

تاپترین عناصر در یک سند HTML مستقیماً به وسیله پراپرتی هایdocument در دسترس هستند.برای مثال، عنصر <html> با پراپرتی document.documentElement قابل دسترسی است.همچنین عنصر <head> با پراپرتی document.head و عنصر <body> با ویژگی document.body قابل دسترسی است.به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Select Topmost Elements</title>
</head>
<body>
    <script>
    // Prints lang attribute value of html element
    document.write(document.documentElement.getAttribute("lang")); // Prints: en
    document.write("<br>");
    
    // Set background color of body element
    document.body.style.background = "yellow";
    
    // Prints tag name of the head element's first child
    document.write(document.head.firstElementChild.nodeName); // Prints: meta
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Select Topmost Elements</title>

</head>

<body>

// Prints lang attribute value of html element

document.write(document.documentElement.getAttribute("lang")); // Prints: en

document.write("<br>");

// Set background color of body element

document.body.style.background = "yellow";

// Prints tag name of the head element's first child

document.write(document.head.firstElementChild.nodeName); // Prints: meta

</script>

</body>

</html>

دقت کنید اگر document.body قبل از تگ<body> استفاده شود.به جای عنصر null، body را برمی گرداند.از آنجا که در نقطه ای که اسکریپت در آن اجرا می شود، تگ <body> توسط مرورگر پارس نشده، بنابراین document.body در آن نقط null می باشد.

برای درک بهتر این موضوع به مثال زیر توجه کنید.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Access body Element from Different Location</title>
    <script>
        document.write("From HEAD: " + document.body); // Prints: null (since <body> is not parsed yet)
    </script>
</head>
<body>
    <hr>
    <script>
        document.write("From BODY: " + document.body); // Prints: HTMLBodyElement
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Access body Element from Different Location</title>

document.write("From HEAD: " + document.body); // Prints: null (since <body> is not parsed yet)

</script>

</head>

<body>

<hr>

document.write("From BODY: " + document.body); // Prints: HTMLBodyElement

</script>

</body>

</html>

انتخاب عناصر به وسیله ID

با متد ()getElementById می توانید یک عنصر را بر اساس ایدی منحصر به فرد آن انتخاب کنید. این ساده ترین راه برای یافتن یک عنصر HTML در درخت DOM است.

مثال زیر عنصری را با اتریبیوت ایدی id="mark" انتخاب و و رنگ بک گراند ان را به رنگ زرد تغیر می دهد.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Select an Element by its ID Attribute</title>
</head>
<body>
    <p id="mark">This is a paragraph of text.</p>
    <p>This is another paragraph of text.</p>

    <script>
    // Selecting element with id mark 
    var match = document.getElementById("mark");
     
    // Highlighting element's background
    match.style.background = "yellow";
    </script> </body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Select an Element by its ID Attribute</title>

</head>

<body>

<p id="mark">This is a paragraph of text.</p>

<p>This is another paragraph of text.</p>

// Selecting element with id mark

var match = document.getElementById("mark");

// Highlighting element's background

match.style.background = "yellow";

</script> </body>

</html>

متد ()getElementById اگر عنصر مطابق با ایدی مورد نظر پیدا کند را به عنوان یک شی برمی گرداند و اگر عنصر منطبقی در سند پیدا نشود، null را برمی گرداند.

توجه: هر عنصر HTML می تواند یک ویژگی id داشته باشد. مقدار این ویژگی باید در یک صفحه منحصر به فرد باشد، یعنی هیچ دو عنصر در یک صفحه نمی توانند ایدی یکسانی داشته باشند.

انتخاب عناصر به وسیله نام کلاس (Class Name)

به طور مشابه، می‌توانید از متد ()getElementsByClassName برای انتخاب تمام عناصر دارای نام کلاس خاص استفاده کنید. این متد یک شی آرایه مانند از تمام عناصر فرزند را که همه نام های کلاس داده شده را دارند را برمی گرداند. به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Select Elements by Class Name</title>
</head>
<body>
    <p class="test">This is a paragraph of text.</p>
    <div class="block test">This is another paragraph of text.</div>
    <p>This is one more paragraph of text.</p>
    <hr>

    <script>
    // Selecting elements with class test
    var matches = document.getElementsByClassName("test");
        
    // Displaying the selected elements count
    document.write("Number of selected elements: " + matches.length);
     
    // Applying bold style to first element in selection
    matches[0].style.fontWeight = "bold";
        
    // Applying italic style to last element in selection
    matches[matches.length - 1].style.fontStyle = "italic";
        
    // Highlighting each element's background through loop
    for(var elem in matches) {  
        matches[elem].style.background = "yellow";
    }
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Select Elements by Class Name</title>

</head>

<body>

<p class="test">This is a paragraph of text.</p>

<div class="block test">This is another paragraph of text.</div>

<p>This is one more paragraph of text.</p>

<hr>

// Selecting elements with class test

var matches = document.getElementsByClassName("test");

// Displaying the selected elements count

document.write("Number of selected elements: " + matches.length);

// Applying bold style to first element in selection

matches[0].style.fontWeight = "bold";

// Applying italic style to last element in selection

matches[matches.length - 1].style.fontStyle = "italic";

// Highlighting each element's background through loop

for(var elem in matches) {

matches[elem].style.background = "yellow";

}

</script>

</body>

</html>

انتخاب عناصر به وسیله نام تگ ( Tag Name ) در جاوا اسکریپت

همچنین می توانید با استفاده از متد ()getElementsByTagName عناصر HTML را با نام تگ انتخاب کنید. این متد نیز یک شی آرایه مانند از تمام عناصر فرزند با نام تگ داده شده را برمی گرداند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Select Elements by Tag Name</title>
</head>
<body>
    <p>This is a paragraph of text.</p>
    <div class="test">This is another paragraph of text.</div>
    <p>This is one more paragraph of text.</p>
    <hr>

    <script>
    // Selecting all paragraph elements
    var matches = document.getElementsByTagName("p");
        
    // Printing the number of selected paragraphs
    document.write("Number of selected elements: " + matches.length);
     
    // Highlighting each paragraph's background through loop
    for(var elem in matches) {  
        matches[elem].style.background = "yellow";
    }
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Select Elements by Tag Name</title>

</head>

<body>

<p>This is a paragraph of text.</p>

<div class="test">This is another paragraph of text.</div>

<p>This is one more paragraph of text.</p>

<hr>

// Selecting all paragraph elements

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

// Printing the number of selected paragraphs

document.write("Number of selected elements: " + matches.length);

// Highlighting each paragraph's background through loop

for(var elem in matches) {

matches[elem].style.background = "yellow";

}

</script>

</body>

</html>

انتخاب عناصر به وسیله CSS Selectors در جاوا اسکریپت

شما می توانید از متد ()querySelectorAll برای انتخاب عناصری که با CSS سلکتورهای مشخص شده مطابقت دارند استفاده کنید. CSS سلکتورها یک روش بسیار قدرتمند و کارآمد برای انتخاب عناصر HTML در یک سند ارائه می دهند.

این روش فهرستی از تمام عناصری را که با سلکتورهای مشخص شده مطابقت دارد را برمی گرداند. همانطور که در مثال زیر نشان داده شده است، می توانید آن را درست مانند هر آرایه ای بررسی کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Select Elements with CSS Selectors</title>
</head>
<body>
    <ul>
        <li>Bread</li>
        <li class="tick">Coffee</li>
        <li>Pineapple Cake</li>
    </ul>
        
    <script>
    // Selecting all li elements
    var matches = document.querySelectorAll("ul li");
     
    // Printing the number of selected li elements
    document.write("Number of selected elements: " + matches.length + "<hr>")
     
    // Printing the content of selected li elements
    for(var elem of matches) {  
        document.write(elem.innerHTML + "<br>");
    }
     
    // Applying line through style to first li element with class tick
    matches = document.querySelectorAll("ul li.tick");
    matches[0].style.color= "red";
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Select Elements with CSS Selectors</title>

</head>

<body>

<ul>

<li>Bread</li>

<li class="tick">Coffee</li>

<li>Pineapple Cake</li>

</ul>

// Selecting all li elements

var matches = document.querySelectorAll("ul li");

// Printing the number of selected li elements

document.write("Number of selected elements: " + matches.length + "<hr>")

// Printing the content of selected li elements

for(var elem of matches) {

document.write(elem.innerHTML + "<br>");

}

// Applying line through style to first li element with class tick

matches = document.querySelectorAll("ul li.tick");

matches[0].style.color= "red";

</script>

</body>

</html>

متد ()querySelectorAll همچنین از سودو کلاس های CSS مانندfirst-child, :last-child, :hover و …پشتیبانی می کند.اما برای سودو المنت های CSS مانند before, ::after, ::first-line::و ….این روش همیشه یک لیست خالی برمی گرداند.

به پایان قسمت سلکتورها در جاوا اسکریپت رسیدیم امیدواریم این خش مورد توجه شما قرار گیرد.

سایرمقالات

رویدادها (Event) در جاوا اسکریپت

آرایه ها در جاوا اسکریپت

برای امتیاز به این نوشته کلیک کنید!

[کل: 0 میانگین: 0]

اشتراک‌گذاری

آموزش پیاده سازی کتابخانه والی در برنامه نویسی اندروید نوشته قبل

ویژگی های set و get در جاوا اسکریپت | JavaScript DOM Get Set Attributes نوشته بعد

علی فرجی

علی فرجی هستم، برنامه نویس جاوا اسکریپت و ریکت با بیش از 5 سال تجربه. من عاشق برنامه نویسیم و همیشه به دنبال یادگیری چیزهای جدید هستم.همچنین یکی از بنیانگذار های سایت کدایت ، یک سایت آموزش برنامه نویسی در حوزه جاوا اسکریپت، ریکت، اندروید و ... هستم. امیدوارم بتوانم با دانش و تجربه خود به سایر برنامه نویسان کمک کنم تا در این زمینه پیشرفت کنند.