DOM در javascript

درس بعدی ||||| درس قبلی

جهت دسترسی به هر قسمت از صفحه وب از طریق id و با تابع getElemetById انجام می شود. برای نمونه برای دسترسی به یک div که مقدار d1 برای id آن تعریف شده است بصورت زیر عمل می شود:

document.getElementById('d1').innerHTML="Hello";

همانطوریکه مشاهده می شود مقدار Hello در ابزار با id با نام d1 قرار می گیرد.گاهی برخی از ابزارها نظیر ابزارهای div خود دارای ابزارهای دیگری هستند مانند زیر:

<div id="d1">
            <p>paragraph</p>
            <h1>Welcome</h1>
            <span>Hi</span>
            <p>aaa</p>
        </div>

همانطوریکه می بینید سه تگ p ، h1 و span در تگ div با id با نام d1 قرار گرفته اند. برای دسترسی به هریک از آنها از دستور getElementByTagName استفاده می شود. برای مثال دستور زیر لیست تگ های p موجود در div با id با نام d1 را در متغیر آرایه ای para ذخیره می کند:

var para=document.getElementById('d1').getElementsByTagName('p');

مثال: صفحه وبی طراحی کنید که با کلیک بر یک دکمه تمامی تگ های p موجود در دستور div با کد بالا به رنگ آبی تبدیل شوند:

<html>
   <head>
       <style>
           div{
               width: 200px;
               height: 200px;
               background-color: chartreuse;
           }
       </style>
       <script type="text/javascript">
            function change(){
                //document.getElementById('d1').innerHTML="Hello";
                var para=document.getElementById('d1').getElementsByTagName('p');
                for(var i=0;i<para.length;i++){
                    para[i].style.color="blue";
                }
                    
            }
            
       </script>
   </head>
   <body>
       <input type="button" value="change something" onclick="change()">
        <div id="d1">
            <p>paragraph</p>
            <h1>Welcome</h1>
            <span>Hi</span>
            <p>aaa</p>
        </div>
   </body>
</html>