DOM trong Javascript


Hôm nay ta sẽ học cách dùng javascript truy cập vào các thành phần của 1 trang web ví dụ như thay đổi nội dung 1 thẻ nào đó, hoặc thay đổi màu chữ màu nền dùng javascript, v..v. Như ta đã biết trang web được viết bằng HTML, HTML được thiết kế theo dạng cây, bắt đầu từ document rồi tới thẻ html, trong html sẽ có thẻ head , thẻ body , trong head có title ,và nhiều thẻ khác, rồi trong body thì có những thẻ như h1,h2, div, form, image v..v. Ta sẽ dùng javascript truy xuất các thành phần của trang web.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS Tutorials</title>
</head>
<body>
	<h1>Welcome to javascript</h1>

	<script>
		var myDom = document.all;
		console.log(myDom);
		
	</script>
</body>
</html>

Ta sẽ thấy document.all sẽ trả về tập hợp các thẻ. nếu ta muốn truy cập thẻ đầu tiên

document.all[0]; // Doctype

Thẻ tiếp theo là html

document.all[1]; // html

Nếu ta muốn truy cập trực tiếp và các thẻ như head, body, doctype

document.head; // head
document.body; // body
document.doctype; // doctype

Nếu muốn xem có bao nhiêu phần tử trong document.all

document.all.length;

Nếu trường hợp ta có nhiều link a

<a class="linkStyle1" id="linkGoogle" href="https://google.com">google</a>

<a class="linkStyle2" id="linkDblog24h" href="https://dblog24h.com">dblog24h</a>

Nếu ta muốn truy cập tất cả link

document.links;

Nếu muốn truy cập vào link đầu tiên

document.links[0]; // link đầu

Nếu ta muốn truy cập vào link đầu và lấy ra href, id, class

document.links[0].href; // https://google.com
document.links[0].id ;  // linkGoogle
document.links[0].className; // linkStyle1

Nếu links có nhiều class

<a class="linkStyle1 linkStyle2" id="linkGoogle" href="https://google.com">google</a>

Ta có thể lấy ra tất cả các class bằng className hoặc dùng classList

document.links[0].classList; // DOMTokenList ["linkStyle1", "linkStyle2"] 

Để lấy giá trị của class bằng cách dùng classList


document.links[0].classList.value; // linkStyle1 linkStyle
// giống như khi dùng className
document.links[0].className; // linkStyle1 linkStyle

Truy cập vào class đầu tiên

document.links[0].classList[0]; //linkStyle1

Như vậy ta đã tìm hiểu được cách truy cập vào các thành phần của web dùng javascript.