Chương 10: DOM trong javascript

10.1. DOM là gì?

DOM là viết tắt của chữ Document Object Model (tài liệu mô hình đối tượng). 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ó.

10.2. DOM elements trong Javascript

Trong phần 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.

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>Tailieucntt.org 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">TAILIEUCNTT.ORG</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>Tailieucntt.org 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">TAILIEUCNTT.ORG</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>Tailieucntt.org 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">TAILIEUCNTT.ORG</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>Tailieucntt.org 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">TAILIEUCNTT.ORG</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>Tailieucntt.org 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">TAILIEUCNTT.ORG <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>Tailieucntt.org 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">TAILIEUCNTT.ORG

    <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>

10.3. DOM HTML trong javascript

Lấy nội dung trong thẻ HTMl và thay đổi nó.

- Lấy nội dung

Để lấy nội dung bên trong thẻ HTML chúng ta sử dụng cú pháp:

element.innerHTML

Trong đó: element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
VD:

//lấy nội dung của thẻ có id = hello

var content = document.getElementById('hello').innerHTML;

//in ra nội dung của thẻ đó.

alert(content);

- Thay đổi nội dung

Để thay đổi nội dung cho thẻ HTML đó thì các bạn chỉ sử dụng cú pháp:

element.innerHTML = 'Giá trị mới';

-Trong đó: element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
VD:

//thay đổi nội dung của thẻ có id = hello

document.getElementById('hello').innerHTML = 'Học javascript cơ bản';

- Lấy và thay đổi nội dung dưới dạng văn bản.

Nếu như bạn muốn lấy nội dung text, hay thay đổi nội dung dưới dạng dữ liệu thô thì các bạn chỉ cần thay thuộc tính innerHTML thành innerText.
VD: Lấy nội dung text của thẻ HTML.

//lấy nội dung của thẻ có id = hello

var content = document.getElementById('hello').innerText;

//in ra nội dung của thẻ đó.

alert(content);

VD: Thay đổi nội dung của một thẻ HTML dưới dạng thô.

//thay đổi nội dung của thẻ có id = hello

var content = document.getElementById('hello').innerText = '<b>Học javascript cơ bản</b>';

Tạo và lấy nội dung của các attribute trong thẻ HTML.

- Tạo ra các attribute cho thẻ HTML

Để tạo ra các attribute có các thẻ HTML chúng ta sử dụng cú pháp:

element.setAttribute('attrName','attrValue');

Trong đó:

element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
attrName là tên của attribute mà các bạn muốn tạo ra.
attrValue là giá tri của attribute các bạn muốn set.

VD: tạo ra attribute có tên là data-id và có giá trị = 5.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Tailieucntt.org javascript</title>

</head>

<body>

    <div id="hello" data-id='javascript'>  Chào mừng các bạn đến với <a href="http://.com">website học lập trình online</a> </div>

    <div class="toidicode">TAILIEUCNTT.ORG

    </div>

    <script type="text/javascript">

        //tạo ra data-id cho thẻ có id = hello

        document.getElementById('hello').setAttribute('data-id','5');

    </script>

</body>

</html>

- Lấy ra giá trị của các attribute

Để lấy ra giá trị của các attribute trong thẻ HTML chúng ta sử dụng cú pháp:

element.getAttribute('AttrName');

Trong đó:

element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
AttrName là tên của attribute mà các bạn muốn lấy.

VD: lấy ra giá trị data-id của thẻ HTML có id= hello.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Tailieucntt.org javascript</title>

</head>

<body>

    <div id="hello" data-id='javascript'>  Chào mừng các bạn đến với <a href="http://.com">website học lập trình online</a> </div>

    <div class="toidicode">TAILIEUCNTT.ORG

    </div>

    <script type="text/javascript">

        //lấy nội dung data-id của thẻ có id = hello

        var content = document.getElementById('hello').getAttribute('data-id');

        //in ra thông nội dung lấy được.

        alert(content);

    </script>

</body>

</html>

10.4. DOM CSS trong javascript

Cú Pháp

Để CSS cho các thẻ HTMl bằng javascript các bạn dùng cú pháp:

element.style.propertyName = value;

Trong đó:

element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
propertyName là tên thuộc tính CSS các bạn muốn xét.
value là giá trị của thuộc tính đó.

-Và để lấy ra giá trị của thuộc tính css các bạn sử dụng cú pháp:

element.style.propertyName;

Trong đó:

element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
propertyName là tên thuộc tính CSS các bạn muốn lấy.

Ví Dụ

VD1: Mình sẽ xét color=red cho thẻ HTML có id=series.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Tailieucntt.org javascript</title>

</head>

<body>

    <div>Các series học lập trình tại tailieucntt.org</div>

    <ul>

        <li class="list">Học HTML</li>

        <li id="series">Học CSS</li>

        <li class="list">Học javascript</li>

        <li class="series">Học jquery</li>

    </ul>

    <script type="text/javascript">

        //tìm đến thẻ HTML có id = series và css

        document.getElementById('series').style.color = 'red';

    </script>

</body>

</html>

VD2: Lấy ra giá trị của thuộc tính css.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Tailieucntt.org javascript</title>

</head>

<body>

    <div>Các series học lập trình tại tailieucntt.org</div>

    <ul>

        <li class="list">Học HTML</li>

        <li id="series" style="background: red;">Học CSS</li>

        <li class="list">Học javascript</li>

        <li class="series">Học jquery</li>

    </ul>

    <script type="text/javascript">

        //tìm đến thẻ HTML có id = series và lấy thông số của thuộc tính background

        var value = document.getElementById('series').style.background;

        //hiển thị ra giá trị

        alert(value);

    </script>

</body>

</html>

Chú ý

-Đối với các thuộc tính có dấu gạch nối ngăn ở giữa như: margin-top, margin-bottom,... Các bạn chuyển về dạng viết liền theo chuẩn lưng lạc đà.
VD:

margin-top thành marginTop
background-color thành backgroundColor
......

10.5. DOM event trong javascript

Thêm sự kiện bằng HTML attribute

Các hàm onClick, onMouseover,.... dùng để bắt các sự kiện và thực thực thi hành động bằng javascript. Và giá trị của các thẻ này là code javascript.
VD: Xuất ra thông báo 'bạn vừa click' khi click vào thẻ div sau:

<div id="series" onclick="alert('Bạn vừa click')">Học CSS</div>

Tương tự các bạn cũng có thể gọi hàm trong attribute đó.
VD: Khi rê chuột vào thẻ div sau thì sẽ gọi hàm show().

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Tailieucntt.org javascript</title>

</head>

<body>

    <div >Di chuột vào chữ Học css để xem kết quả</div>

    <div id="series" onmouseover="show()">Học CSS</div>

    <script type="text/javascript">

        function show(){

            alert('Bạn vừa rê chuột vào')

    </script>

</body>

</html>

Danh sách các event attribute

Sự kiện	HTML5	Mô tả
onafterprint	√	Kích hoạt sau khi một tài liệu được in
onbeforeprint	√	Kích hoạt trước khi một tài liệu được in
onbeforeonload	√	Kích hoạt trước khi một tài liệu được tải
onerror	√	Kích hoạt khi một lỗi xảy ra
onhaschange	√	Kích hoạt khi một tài liệu đã thay đổi
onload		Kích hoạt khi một tải liệu được tải
onmessage	√	Kích hoạt khi một thông báo được kích hoạt (chạy)
onoffline	√	Kích hoạt khi một tài liệu ở ngoại tuyến (bị ngắt mạng)
ononline	√	Kích hoạt khi một tài liệu ở dạng trực tuyến
onpagehide	√	Kích hoạt khi một cửa sổ bị ẩn
onpageshow	√	Kích hoạt khi một cửa sổ trở lên được nhìn thấy (hiện lên)
onpopstate	√	Kích hoạt khi lịch sử của cửa sổ thay đổi
onredo	√	Kích hoạt khi một tài liệu thực hiện một redo
onresize	√	Kích hoạt khi một cửa sổ được thay đổi lại kích thước
onstorage	√	Kích hoạt khi một tài liệu được tải
onundo	√	Kích hoạt khi một tài liệu thực hiện một undo
onunload		Kích hoạt khi một người sử dụng rời khỏi tài liệu
onclick		Kích hoạt trên con chuột vừa nhấn vào phần tử
ondblclick		Kích hoạt trên con chuột vừa nhấn đúp vào phần tử
ondrag		Kích hoạt khi một phần tử được kéo
ondragend	√	Kích hoạt ở phần cuối của thao tác kéo
ondragenter	√	Kích hoạt khi một phần tử đã được kéo tới một mục tiêu được thả xuống hợp lệ
ondragleave	√	Kích hoạt khi một phần tử rời khỏi một mục tiêu thả xuống hợp lệ
ondragover	√	Kích hoạt khi một phần tử đang được kéo qua một mục tiêu có thể thả xuống hợp lệ
ondragstart	√	Kích hoạt ở phần đầu của một hoạt động kéo
ondrop	√	Kích hoạt khi một phần tử được kéo đang được thả xuống
onmousedown		Kích hoạt khi một nút chuột (chuột trái hay phải) được nhấn
onmousemove		Kích hoạt khi con trỏ chuột di chuyển
onmouseout		Kích hoạt khi con trỏ chuột rời khỏi một phần tử
onmouseover		Kích hoạt khi con trỏ chuột di chuyển qua một phần tử
onmouseup		Kích hoạt khi một nút chuột được thả ra
onmousewheel	√	Kích hoạt khi sử dụng bánh xe chuột
onscroll	√	Kích hoạt khi một thanh cuốn của phần tử được cuốn

Xem Thêm...

Thêm sự kiện bằng javascript

Để thêm sự kiện bằng javascript chúng ta sử dụng cú pháp:

element.eventName = function ()

    //code

Trong đó:

element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
eventName là tên các sự kiện như onclick,onmouseover,...

VD: Thêm sự kiện khi con trỏ chuột chạm vào thẻ html có id='jav'.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Tailieucntt.org javascript</title>

</head>

<body>

    <div >Di chuột vào chữ Học javascript để xem kết quả</div>

    <div id="jav" >Học javascript</div>

    <script type="text/javascript">

        //chọn thẻ có id = jav

        var element = document.getElementById('jav');

        //Thêm sự kiện

        element.onmouseover = function (){

            alert('Bạn vừa di chuột vào');

};

    </script>

</body>

</html>

Trong trường hợp mà đối tượng HTML các bạn chọn có nhiều hơn 1 thì các bạn cần phải chạy một vòng for để duyệt và add sự kiện cho nó.
VD:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Tailieucntt.org javascript</title>

</head>

<body>

    <div >Di chuột vào chữ Học javascript để xem kết quả</div>

    <ul>

        <li class="list">Li 1</li>

        <li class="list">Li 2</li>

        <li class="list">Li 3</li>

        <li class="list">Li 4</li>

        <li class="list">Li 5</li>

        <li class="list">Li 6</li>

        <li class="list">Li 7</li>

    </ul>

    <script type="text/javascript">

        //chọn thẻ có class = list

        var element = document.getElementsByClassName('list');

        //Thêm sự kiện

        for(i=0; i<element.length; i++) {

            element[i].onclick = function () {

                alert('Bạn vừa click vào thẻ ' + this.innerText);

};

    </script>

</body>

</html>

10.6. This trong javascript

This trong javascript là gì?

This trong javascript nó cũng giống như các ngôn ngữ khác, đều là đại diện cho đối tượng hiện tại mà nó đang được sử dụng.
VD: sử dụng this để lấy ra các thông tin của thẻ vừa click.

<!DOCTYPE html>

<html>

<head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>tailieucntt.org</title>

</head>

<body>

        <div>Click vào các button để xem kết quả</div>

        <button onclick="showInfo(this)" > button1</button>

        <button onclick="showInfo(this)" > button2</button>

        <button onclick="showInfo(this)" > button3</button>

        <button onclick="showInfo(this)" > button4</button>

        <script type="text/javascript">

               function showInfo(e)

                       alert(e.innerText);

        </script>

</body>

</html>

-----------
Mục lục:

Chương 1: Giới thiệu javaScript
Chương 2: Biến, hằng trong Javascript
Chương 3: Toán tử trong Javascript
Chương 4: Câu lệnh điều kiện trong Javascript
Chương 5: Vòng lặp trong javascript
Chương 6: Lệnh break, continue trong javascript
Chương 7: Hàm trong javascript
Chương 8: Hiển thị thông báo ra màn hình trong javascript
Chương 9: Mảng trong javascript
Chương 10: DOM trong javascript
Chương 11: Các đối tượng và hàm thường dùng trong JavaScript

Cùng Học IT

JAVASCRIPT: CH10

Chương 10: DOM trong javascript

10.3. DOM HTML trong javascript

10.4. DOM CSS trong javascript

Tìm kiếm nội dung khác:

* Hướng dẫn tự học lập trình: C# | C/C++ | Java | Android | iOS (Swift) | JavaScript | Assembly | Python | PHP

* Chương trình ví dụ: Đồ họa máy tính | Cấu trúc dữ liệu và giải thuật | Toán rời rạc

* Tìm hiểu: Blockchain | Trí tuệ nhân tạo | Thuật toán di truyền | Học máy | Cơ sở dữ liệu | Phương pháp tối ưu

# BÀI VIẾT NỔI BẬT #