getElementsByTagName

الدرس 7 من 13 في دورة دوال JavaScript DOM على Coddy.

تعيد الدالة getElementsByTagName() مصفوفة من كافة العناصر التي لها اسم وسم HTML مطابق (على سبيل المثال، div، p، span)، مما يسمح لك باستهداف أنواع معينة من العناصر عبر الصفحة. تعمل هذه الدالة تماماً مثل الدالة getElementsByClassName().

const paragraphs = document.getElementsByTagName("p");

هذه هي الطريقة التي يمكننا بها جلب كافة وسوم p في المتغير paragraphs. لإجراء تغييرات على كافة الفقرات، يتعين علينا التكرار عبر هذا المتغير.

التحدي

سهل

لقد تم تزويدك بكود HTML.

باستخدام JavaScript فقط، قم بتعديل جميع الفقرات لتحتوي على النص “Updated text”.

جرّب بنفسك

<!DOCTYPE html>
<html>
    <body>
        <h1>Welcome to Random HTML!</h1>
        <p>This is a randomly generated HTML file. Here's a mix of different elements:</p>
        <ul>
            <li>This is an unordered list item.</li>
            <li>This is another unordered list item.</li>
        </ul>
        <p>Below are the four randomly generated paragraphs:</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ligula sit amet convallis sodales.</p>
        <p>Nulla facilisi. Nulla eget metus vitae ligula aliquam rhoncus.</p>
        <p>Maecenas feugiat ultricies nisi, id auctor purus laoreet at.</p>
        <p>Curabitur vitae dictum arcu, ac fermentum ligula. Duis feugiat arcu non tincidunt posuere.</p>
        <blockquote>
            <p>This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </blockquote>
        <p>Thank you for exploring this random HTML file!</p>
        <script src="script.js"></script>
    </body>
</html>

جميع دروس دوال JavaScript DOM

1مقدمة

مقدمة Document Object Model

2طرق DOM (١)

getElementById تعديل نمط العنصر getElementsByClassName التكرار والمعالجةgetElementsByTagNamequerySelector

3طرق DOM الجزء الثاني

querySelectorAll addEventListener innerHTML createElement و appendChild تبديل classList