Toidicode.com

Toidicode.com

BASIC TO ADVANCE

Bài 10: DOM Elements trong javascript

Tiếp tục với series bài này chúng ta sẽ đi tìm hiểu và tác động javascript đến trực tiếp các thẻ HTML trong chương trình.

1, DOM là gì?

-DOM là viết tắt của chữ Document Object Model (dịch ra tiếng việt thì không được hay cho lắm!). Khi mà chúng ta làm việt với DOM thì chúng ta có thể tác động đến các thẻ HTML và các thành phần của nó. Khá hay đúng không nào?

2, DOM elements trong javascript.

-Trong bài này chúng ta sẽ chỉ tìm hiểu cách truy xuất đến các thẻ HTML thông qua class,id và tag, còn các cách thay đổi nội dung chúng ta sẽ tìm hiểu trong các phần sau nhé!

Tìm thẻ HTML thông qua ID

-Để tìm kiếm và truy xuất thông tin của một thẻ HTML theo ID của nó thì chúng ta sử dụng cú pháp:

document.getElementById('idName');

Trong đó: idName là id của thẻ HTML mà chúng ta cần truy xuất tới.

VD: Truy xuất và thông báo ra nội dung của thẻ HTML có id là toidicode.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com javascript</title>
</head>

<body>
<div id="hello">Chào mừng các bạn đến với website học lập trình online</div>
<div id="toidicode">TOIDICODE.COM</div>

<script type="text/javascript">
    var element = document.getElementById('toidicode');
    var content = element.innerHTML;
    alert(content);
</script>
</body>

</html>

Xem Kết Quả

Tìm thẻ HTML thông qua class

-Để tìm thẻ html thông qua class của nó các bạn sử dụng cú pháp như sau:

document.getElementsByClassName('className');

Trong đó: className là tên class của thẻ HTML các bạn muốn tìm.

VD: Tìm và lấy ra nội dung của thẻ HTML có class name là hello.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com javascript</title>
</head>

<body>
<div class="hello">Chào mừng các bạn đến với website học lập trình online</div>
<div class="toidicode">TOIDICODE.COM</div>

<script type="text/javascript">
    var element = document.getElementsByClassName('hello');
    //Lấy ra nội dung của thẻ đầu tiên
    var content = element[0].innerHTML;
    alert(content);
</script>
</body>

</html>

Xem Kết Quả

Tìm thẻ HTML thông qua tagName.

- Để tìm kiếm thẻ HTML có tagName theo ý bạn trong javascript thì các bạn sử dụng cú pháp:

document.getElementsByTagName('tagName');

Trong đó: tagName là tag mà các bạn muốn tìm kiếm và truy xuất nó.

VD:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com javascript</title>
</head>

<body>
<div class="hello">Chào mừng các bạn đến với website học lập trình online</div>
<div class="toidicode">TOIDICODE.COM</div>

<script type="text/javascript">
    var element = document.getElementsByTagName('div');
    //Lấy ra nội dung của thẻ đầu tiên
    var content = element[0].innerHTML;
    alert(content);
</script>
</body>

</html>

Xem Kết Quả

Chú ý

-Đối với tìm thẻ HTML theo class và tag name thì nó sẽ trả về mảng đối tượng với số lượng phần tử bằng với số lượng các thẻ html thảo mãn điều kiện.

VD:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com javascript</title>
</head>

<body>
<div id="hello">Chào mừng các bạn đến với website học lập trình online </div>
<div class="toidicode">TOIDICODE.COM</div>
<p class="toidicode">Bacsic to advance</p>
<script type="text/javascript">
    //chọn tất cả các phần tử có class là toidicode
    var element = document.getElementsByClassName('toidicode');
    //lấy ra số lượng phần tử tìm đc
    var length = element.length;
    alert('Số phần tử có class là toidicode = '+length);
</script>
</body>

</html>

Xem Kết Quả

-Dựa vào đó các bạn có thể duyệt mảng và truy xuất đến từng phần tử trong mảng.

Tìm kiếm thành phần con trong thành phần.

-Để truy xuất đến các thành phần con trong thành phần chúng ta có 2 cách:

Cách 1: Sử dụng lồng giữa các getElement.

VD:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com javascript</title>
</head>

<body>
<div id="hello">Chào mừng các bạn đến với website học lập trình online</div>
<div class="toidicode">TOIDICODE.COM <p class="toidicodes">Bacsic to advance</p></div>

<script type="text/javascript">
    var element = document.getElementsByClassName('toidicode');
    var element1 = element[0].getElementsByClassName('toidicodes');
    alert(element1[0].innerText);
</script>
</body>

</html>

Xem Kết Quả

Cách 2: Sử dụng querySelectorAll().

Cú Pháp:

document.querySelectorAll('select')

Trong đó: select các bạn sử dụng cú pháp như css.

VD:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com javascript</title>
</head>

<body>
<div id="hello">Chào mừng các bạn đến với website học lập trình online </div>
<div class="toidicode">TOIDICODE.COM
    <p class="toidicodes">Bacsic to advance</p>
</div>

<script type="text/javascript">
    //
    var element = document.querySelectorAll('div#hello');
    //lấy ra nội dung của thẻ.
    var content = element[0].innerText;
    alert(content);
</script>
</body>

</html>

Xem Kết Quả

3, Lời kết.

-Qua phần trên mình đã giới thiệu xong đến mọi người cơ bản về DOM elements trong javascript rồi, phía trên mình có sử dụng hàm innerHTML mà chưa giải thích, các bạn tạm thời cứ dùng như thế đã phần sau mình sẽ giải thích về nó.

Đăng ký nhận tin.

Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!

Vũ Thanh Tài

About author
The best way to learn is to share
Xem tất cả bài đăng

6 Comments

Xin chào ạ
Làm sao khi sử dụng document.getElementsByTagName() mà có thể lấy ra được danh sách các thẻ <p> có cũng Class="foo" được ạ

huy

5 năm trước

Trường hợp này sử dụng queryselector cho nhanh nhé bạn.
 

document.querySelectorAll('p.foo')

 

Vũ Thanh Tài

5 năm trước

Chào bạn,

Giả sử mình có đoạn code như trên

<html>
  <body>
    <input type="text" value="hello"/>
    <input type="button" value="click me"/>
    <script language="javascript">
      // Lấy thẻ input text
      var element = document.querySelectorAll("input text");
      
      // Lấy giá trị của thẻ input
      document.write('<h3>Nội dung thẻ cần lấy là: ' + element[0].value + '</h3>');
    </script>
  </body>
</html>

Nếu mình muốn lấy value của input dạng texte thôi, không phải dạng button thì nếu dùng querySelector thì làm như nào vậy ạ? Mình cảm ơn

bi

5 năm trước

Chào bạn, không biết đã đúng ý bạn chưa ạ?

https://toidicode.com/live/?id=728

Vũ Thanh Tài

5 năm trước

Chào bạn, cảm ơn bạn. Đúng ý mình rồi 

bi

5 năm trước

Cho em hỏi nếu ko có innerHTML thì hàm

Dương Dương

3 năm trước

Bình luận

Captcha