JavaScript - DOM Element

19/03/2019, 4:51 PM | 19/03/2019, 5:01 PM | 702 | 021

Bài này chúng ta sẽ tìm hiểu về DOM Element và học cách truy xuất đến các thẻ HTML thông qua các thuộc tính id, class, name, tên thẻ và Selecter.
1. Tìm thẻ HTML theo id
Để truy xuất tới một thẻ qua id ta dùng cú pháp sau:

document.getElementById("idName")

Trong đó : idName là id của thẻ HTML mà ta cần trùy xuất tới
Ví dụ :

Xem DEMO

<html>
    <head>
        <title></title>
        <script language="javascript">
            function EditText(){

                // tìm thẻ có id="MyName" 
                var IdName = document.getElementById("MyName");
				// alert ra text của thẻ đó
                alert(IdName.innerText);
            }
            
       </script>
    </head>
    <body>
      <p id="MyName">vnfree.net</p>
      
      <input type="button" onclick="EditText()" value="Get Text" />
    </body>
</html>

2. Tìm thẻ HTLM theo class
Tìm thẻ HTML theo class có cú pháp như sau :

document.getElementsByClassName('className');

Trong đó: className là tên class của thẻ bạn muốn tìm.
Lưu ý : tìm thẻ theo className sẽ trả về một mảng các object chứ không phải một object như getElementById nữa. Bởi vì trong tài liệu HTML nhiều thẻ có thể sẽ dùng chung class. Ta xét ví dụ sau :

Xem DEMO

<html>
    <head>
        <title></title>
        <script language="javascript">
            function EditText(){

                // tìm thẻ có class="vnfree" 
                var getClass = document.getElementsByClassName("vnfree");
				// alert ra text của thẻ đó
                alert(getClass[0].innerText);
            }
            
       </script>
    </head>
    <body>
      <div id="MyName" class="vnfree">chào bạn đến với vnfree.net</div>
      
      <input type="button" onclick="EditText()" value="Get Text" />
    </body>
</html>

Như bạn thấy ở ví dụ trên có đoạn code : getClass[0].innerText nghĩa là lấy object đầu tiên trong mảng trả về
Nếu bạn để ý kĩ có thể thấy ta viết getElementsByClassName thay vì getElementByClassName, chữ "s" thể hiện sẽ trả về nhiều giá trị hay một mảng object. Trong tìm kiếm theo id là getElementById không có chữ "s" vì nó trả về giá trị duy nhất.
3. Tìm thẻ HTML theo tên thẻ
Tìm theo tên thẻ có cú pháp như sau :

document.getElementsByTagName('tagName');

Trong đó tagName là tên thẻ bạn muốn truy xuất như div, a, span....
Tương tự như tìm kiếm theo class thì tìm theo tên thẻ cũng trả về một mảng các kết quả, vì trong tài liệu HTML có thể có nhiều thẻ giống nhau.
Ví dụ :

Xem DEMO

<html>
    <head>
        <title></title>
        <script language="javascript">
            function EditText(){

                // tìm thẻ p trong tài liệu
                var getTagName = document.getElementsByTagName("p");
				// alert ra text của thẻ đó
                alert(getTagName[4].innerText);
            }
            
       </script>
    </head>
    <body>
      <div id="MyName" class="vnfree">chào bạn đến với vnfree.net</div>
      <p>thẻ p thứ 0</p>
	  <p>thẻ p thứ 1</p>
	  <p>thẻ p thứ 2</p>
	  <p>thẻ p thứ 3</p>
	  <p>thẻ p thứ 4 . Have a nice day !</p>
	  
      <input type="button" onclick="EditText()" value="Get Text" />
    </body>
</html>

Bạn thấy ví dụ trên getElementsByTagName sẽ trả về một mảng các object, mình lấy object thứ 5 để alert()

4. Tìm thẻ HTML theo cú pháp Selecter CSS
Đây là một cách tìm thẻ khá mạnh, nó giúp tìm kiếm một cách chính xác hơn, loại bỏ những kết quả không mong muốn. Cú pháp như sau :

document.querySelectorAll('select')

Ví dụ : Ta sử dụng querySelecterAll để lấy text của thẻ p nằm trong cặp thẻ <div>

Xem DEMO

<html>
    <head>
        <title></title>
        <script language="javascript">
            function EditText(){

                // tìm thẻ p trong tài liệu theo cú pháp selecter css
                var getTagName = document.querySelectorAll("div p.vnfree");
				// alert ra text của thẻ đó
                alert(getTagName[0].innerText);
            }
            
       </script>
    </head>
    <body>
      <div id="MyName" class="vnfree">chào bạn đến với vnfree.net</div>
	  <p class="vnfree">vnfree.net</p>
      <div>
			<p class="vnfree">Have a nice day !</p>
	  </div>
	  
      <input type="button" onclick="EditText()" value="Get Text" />
    </body>
</html>

querySelecterAll cũng trả về một mảng các object.

Ngoài ra bạn cũng có thể tìm kiếm thẻ HTML theo kiểu lồng các getElement như sau :
Ví dụ :

Xem DEMO

<html>
    <head>
        <title></title>
        <script language="javascript">
            function EditText(){
                // lấy thẻ có id="MyName"
		var IDName = document.getElementById("MyName");
		// Lấy các thẻ p trong thẻ có id="MyName"
		var TagP = IDName.getElementsByTagName("p");
		// In ra thẻ p thứ 3
		alert(TagP[3].innerText);
            }
            
       </script>
    </head>
    <body>
      <div id="MyName" class="vnfree">
	   <p>Number 0</p>
	   <p>Number 1</p>
           <p>Number 2</p>
	   <p>Number 3  Have a nice day !</p>
      </div>
	  
      <input type="button" onclick="EditText()" value="Get Text" />
    </body>
</html>

Trên đây là những cách hay sử dụng để truy xuất đến các thẻ HTML. Nếu nắm chắc bạn sẽ dễ dàng thao tác với các thẻ HTML. Chúc bạn lập trình vui vẻ.