دسترسی به عنصرهای HTML از طریق جاوااسکریپت

1) getElementsByTagName

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

document.getElementsByTagName("p")

استفاده می کنیم. توجه کنید که این تابع آرایه ای از تگ های مورد نظر را برمی گرداند.

  مثال:  

    <p id="text">Click the button to change me.</p>
    <button onclick="changeText()">click me</button>
    <script>
        function changeText() {
	    document.getElementsByTagName("p")[0].innerHTML = "I am changed";
	}
    </script>
    
    

2) getElementById

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

  مثال:  

    <p id="text">Please READ ME.</p>
    <button onclick="read()">click me</button>
    <script>
        function read() {
            document.getElementById("text").style.fontSize = "40px";
        }
    </script>

3) getElementsByClassName

اگر بخواهیم عناصر را با استفاده از اسم کلاس آن ها انتخاب کنیم از این تابع استفاده می کنیم. این متد اسم کلاس را به عنوان ورودی می گیرد و آرایه ای از عنصرها را برمی گرداند.

  مثال:  

  <p>This is an <span class="important">important</span> announcement.</p>
  <p>Please <span class="important">pay attention</span>.</p>
  <p>Please read this <span class="important">carefully</span>.</p>
  <button onclick="attention()">pay attention</button>
  <script>
    function attention() {
      let x = document.getElementsByClassName("important");
      for(let i = 0; i < x.length; i++) {
        x[i].style.color = "red";
      }
    }
  </script>

4)  querySelectorAll

برای این که عناصر را با کمک سلکتورهای CSS انتخاب کنیم از این متد استفاده می کنیم. این متد سلکتور انتخابی را به عنوان ورودی می گیرد و آرایه ای از عناصر را به عنوان خروجی برمی گرداند.

  مثال:  

  <div class="row">
      <div class="col-1">col-1</div>
      <div class="col-2">col-2</div>
      <div class="col-1">col-1</div>
      <div class="col-1">col-1</div>
      <div class="col-3">col-3</div>
    </div>
    <button onclick="oneline()">Line the DIVs</button>
  <script>
    function oneline() {
      var elms = document.querySelectorAll('[class^="col-"]');
      for(let i = 0; i < elms.length; i++) {
        elms[i].style.float = "left";
        }
      }
  </script>