JAVASCRIPT: CH10

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:
Subscribe to: Posts (Atom)