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>
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>
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>
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>
-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>
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>
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!
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
6 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
6 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
Dương Dương
3 năm trước