QuerySelector và QuerySelectorAll trong Javascript


Hôm nay ta sẽ tìm hiểu về querySelector()querySelectorAll().

querySelctor() có thể dùng với thẻ , class, hoặc id đều được. ví dụ dùng với id

<div id="hello"> Hello javascript</div>

<script>
  var myDiv =document.querySelector('#hello');
  myDiv.style.color = "red";
</script>

Hello javascript

hoặc dùng với class

<div class="hi"> Hello javascript</div>

<script>
  var myDiv =document.querySelector('.hi');
  myDiv.style.color = "green";
</script>

Hello javascript

querySelector() cũng có thể dùng với thẻ cũng được khi đó ta dùng như sau:

<p>Hello</p>
<script>
  var myDiv = document.querySelector('p');
  p.style.color = 'blue'
</script>

Ta xem thêm ví dụ sau nhé.

<ul>
  <li class="list-item">Item 1</li>
  <li class="list-item">Item 2</li>
  <li class="list-item">Item 3</li>
  <li class="list-item">Item 4</li>
</ul>

<script>
  var myList = document.querySelector('.list-item');
  myList.style.color = "red";
</script>

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Ta thấy querySelector() chỉ truy cập vào class đầu tiên thôi, để truy cập vào tất cả class dùng querySelectorAll()

<ul>
  <li class="list-item2">Item 1</li>
  <li class="list-item2">Item 2</li>
  <li class="list-item2">Item 3</li>
  <li class="list-item2">Item 4</li>
</ul>

<script>
  var myList = document.querySelectorAll('.list-item2');
  console.log(myList); // NodeList

  myList.forEach(function(item,index){
     item.style.color = "red";
  });
</script>

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Còn muốn truy cập vào class cuối ta làm như sau

<ul>
  <li class="list-item3">Item 1</li>
  <li class="list-item3">Item 2</li>
  <li class="list-item3">Item 3</li>
  <li class="list-item3">Item 4</li>
</ul>

<script>
  var lastItem = document.querySelector('.list-item3:last-child');
  lastItem.style.color = "red";
</script>

  • Item 1
  • Item 2
  • Item 3
  • Item 4

còn muốn truy cập vào class thứ 3 ta làm như sau

<ul>
  <li class="list-item4">Item 1</li>
  <li class="list-item4">Item 2</li>
  <li class="list-item4">Item 3</li>
  <li class="list-item4">Item 4</li>
</ul>

<script>
  var item = document.querySelector('.list-item4:nth-child(3)');
  item.style.color = "red";
</script>

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Nếu ta muốn các thẻ li lẻ màu xanh lá, các thẻ li chẳn màu cam ta làm như sau:

<button>Demo</button>
<ul>
  <li class="list-item5">Item 1</li>
  <li class="list-item5">Item 2</li>
  <li class="list-item5">Item 3</li>
  <li class="list-item5">Item 4</li>
</ul>

<script>

  // lấy ra li lẻ
  var oddList = document.querySelectorAll('.list-item5:nth-child(odd)');
  
  // lấy ra li chẳn
  var evenList = document.querySelectorAll('.list-item5:nth-child(even)');

  // lẻ
  oddList.forEach(function(item,index){
     item.style.color = "green";
  });
  
  // chẳn
  evenList.forEach(function(item,index){
     item.style.color = "orange";
  });
</script>

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Vậy là ta đã biết cách dùng querySelector() và querySelectorAll() rồi nhé ^_^