DOM trong JAVASCRIP (Giới thiệu DOM)- Part2
Trong bài này, mình xin tiếp tục giới thiệu thêm thành phần của DOM nữa. Đó là DOM dùng để xử lý CSS với các thao tác thay đổi CSS bằng JavaScrip và xử lý các hiệu ứng để làm website động ở client. Mình xin giới thiệu luôn cú pháp của JQuery để giúp các bạn có thể nắm luôn được cách sử dụng JQ - ...
Trong bài này, mình xin tiếp tục giới thiệu thêm thành phần của DOM nữa. Đó là DOM dùng để xử lý CSS với các thao tác thay đổi CSS bằng JavaScrip và xử lý các hiệu ứng để làm website động ở client. Mình xin giới thiệu luôn cú pháp của JQuery để giúp các bạn có thể nắm luôn được cách sử dụng JQ - Thay đổi CSS bằng JavaScript
Bạn không thể dùng DOM HTML để thiết lập hay xóa bỏ CSS được mà phải thông qua một đối tượng khác là style. Đối tượng style này sẽ chứa tất cả các thuộc tính của CSS và chúng ta sẽ dễ dàng thao tác chúng bằng cú pháp riêng
1, Thiết lập CSS bằng JavaScript
document.getElementById('object').style.css = 'something';
$(elementObject).css("attributes", "something");
2, Lấy giá trị CSS bằng JavaScript
var value = document.getElementById('object').style.cssName;
` var value = $$"elementObject").css("atttibutes")
Note: Trường hợp các thuộc tính có dấu gạch ngang như: "font-size", "line-height", "margin-bottom"... thì thuộc tính đó sẽ có tên là "fontSize", "lineHeight", "marginBottom"... (nghĩa là sẽ bỏ dấu gạch ngang và viết hoa ký tự đầu tiên của chữ thứ hai)
VD:
var value = document.getElementById("object").style.fontSize = "something"; var value = document.getElementById("object").style.lineHeight = "something"; var value = document.getElementById("object").style.marginBottom = "something";
Note: Những thuộc tính nếu chưa thiết lập CSS cho nó thì khi bạn lấy giá trị sẽ là một giá trị rỗng.
- Ví dụ thay đổi CSS bằng JavaScript, JQuery
VD 1:
<html> <body> <script language="javascript"> function change_background(){ $("message").css("background", "red"); } function change_color(){ $("message").css("color", "blue"); } function change_height(){ $("message").css("height", "500px"); } function change_font_size(){ $("message").css("fontSize", "500px"); } </script> <div id="message"> DOM CSS JQuery </div> <input type="button" value="Change backgroud" onclick="change_background()"/> <input type="button" value="Change color" onclick="change_color()"/> <input type="button" value="Change height" onclick="change_height()"/> <input type="button" value="Change fontsize" onclick="change_font_size()"/> </body> </html>
VD 2:
<html> <body> <script language="javascript"> function validate() { // Lấy giá trị input var username = document.getElementById("username").value; var password = document.getElementById("password").value; // Lấy đối tượng message var message = document.getElementById("message"); // Validate if (username == "" || password == "") { message.innerHTML = "Bạn chưa nhập đầy đủ thông tin!"; message.style.color = "red"; } else { message.innerHTML = "Chúc mừng ban, validate thành công!"; message.style.color = "blue"; } } </script> Username: <input type="text" value="" id="username" /> <br/> Username: <input type="password" value="" id="password" /> <br/> <div id="message"></div> <input type="button" value="Login" onclick="validate()"/> </body> </html>
` DOM EventListener trong JavaScript
Những dạng bài này chúng ta hay gọi là DHTML, nghĩa là HTML động có các hiệu ứng thay đổi giao diện bằng cách sử dụng javascript kết hợp với giá trị CSS của HTML. Tất cả các thuộc tính của CSS được lưu trong đối tượng style.
Một thành phần nữa của DOM là DOM EventListener trong JavaScript, đó là phương thức addEventListener() và removeEventListener() dùng để thêm/xóa hành động cho một sự kiện.
1, Phương thức addEventListener()
Chúng ta đã học cách sử dụng JavaScript để thêm một sự kiện vào một đối tượng HTML nhưng sử dụng cú pháp gán bình thường. Tuy nhiên, có một cách cao siêu hơn đó là sử dụng phương thức addEventListener() để thêm một sự kiện vào đối tượng HTML.
elementObject.addEventListener('eventName', function(e){code});
$(elementObject).click(function(){code})
eventName: tên của sự kiện bỏ đi chữ on, ví dụ click, change, …
function: hàm sẽ được chạy khi sự kiện eventName được kích hoạt
VD:
<html> <body> <input type="text" id="input"> <div id="result"></div> <script language="javascript"> $("#input").keyup(function(){ $("#result").html($("#input").val()); }); </script> </body> </html>
Note: Mỗi sự kiện có thể có nhiều hành động nên bạn có thể bổ sung hành động cho một sự kiện với cú pháp tương tự như trên.
VD 2:
<html> <body> <input type="text" id="input"> <div id="result"></div> <script language="javascript"> var input = document.getElementById("input"); var result = document.getElementById("result"); input.addEventListener("keyup", function(){ result.innerHTML = input.value; }); input.addEventListener("keyup", function(){ if(input.value.length > 5){ alert("Bạn nhập nhiều hơn 5 ký tự"); } }); </script> </body> </html>
Thêm sự kiện cho đối tượng window
Đối tượng window được ví như cửa sổ trình duyệt browser nên nó sẽ có một số sự kiện riêng, điển hình là sự kiện resize browser. Như vậy với phương thức addEventListener() ta cũng có thể thêm sự kiện cho window.
<html> <body> <h4>Bạn hãy zoom trình duyệt</h4> <div id="result"></div> <script language="javascript"> window.addEventListener("resize", function(){ document.getElementById("result").innerHTML = "Bạn vừa zoom Browser"; }); </script> </body> </html>
Truyền tham số vào Event trong phương thức addEventListener()
Muốn truyền tham số vào event thì bạn bắt buộc phải tạo một hàm khác rồi gọi nó từ phương thức addEventListener().
VD:
// Lấy đối tượng var button = document.getElementById("btn"); // Thêm sự kiện cho đối tượng button.addEventListener('click', function(){ do_something(2, 3); }); function do_something(a, b){ alert( a + b); }
2, Phương thức removeEventListener()
Nếu như phương thức addEventListener() dùng để thêm một hành động cho một sự kiện thì phương thức removeEventListener() lại có tác dụng ngược lại, nó sẽ xóa đi một hành động đã được gán cho một sự kiện.
Ví dụ bạn gán hành động validate form cho sự kiện submit của form, sau đó bạn không muốn validate nữa thì sẽ có hai giải pháp: một là bạn sẽ phải xóa đi đoạn code validate đó và hai là bạn chỉ cần sử dụng phương thức removeEventListener() để xóa hành động validate.
object.removeEventListener("event", some_action);
$(elementObject).removeEventListener(event, function, useCapture)
VD:
// Lấy đối tượng var object = document.getElementById("something"); // Hành động validate function do_validate(){ // do something } // Thêm hành động vào sự kiện click object.addEventListener("click", do_validate); // Xóa hành động validate vào sự kiện click object.removeEventListener("click", do_validate);
VD 2:
<html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").on("click", function(){ $(this).css("background-color", "pink"); }); $("button").click(function(){ $("p").off("click"); }); }); </script> <body> <p>Click this paragraph to change its background color.</p> <p>Click the button below and then click on this paragraph (the click event is removed).</p> <button>Remove the click event handler</button> </body> </html>
- DOM Node trong JavaScript
Mình đã giới thiệu khá nhiều về DOM như DOM Element, DOM HTML, DOM CSS nhưng có lẽ bạn vẫn chưa hiểu được bản chất của các đối tượng trả về khi sử dụng DOM Element để truy vấn là DOM Node. Vì thế trong bài này, chúng ta sẽ tìm hiểu khái niệm DOM Node thông qua các ví dụ và bạn cũng sẽ biết một số phương thức thường được sử dụng trong DOM Node là gì ?.
1, DOM Node – document.createElement()
Khi bạn sử dụng DOM Element để truy vấn tới một đối tượng HTML nào đó thì kết quả trả về sẽ là một object và object đó được gọi là DOM Node.
var node = document.getElementById("some-id");
var node = $("#some-id")
Với cách này bắt buộc phải tồn tại một đối tượng HTML đang hiển thị trên website thì mới khởi tạo thành công. Nếu bạn muốn tạo một node mới hoàn toàn, không liên quan tới những thẻ HTML đang hiển thị trên website thì đơn giản là chúng ta sẽ sử dụng phương thức document.createElement() với tham số truyền vào là tên của thẻ HTML cần tạo.
var p = document.createElement("p");
var p = $.create("p");
Sau khi khởi tạo xong, bạn hoàn toàn có thể sử dụng các phương thức và thuộc tính của DOM HTML, DOM CSS.
p.innerHTML = "DOM Node"
Để thêm node này vào trang web, chúng ta sử dụng phương thức appendChild. Giả sử muốn thêm vào thẻ body thì làm như sau:
document.getElementsByTagName('body')[0].appendChild(p);
$("body").append(p);
VD:
<html> <body> <script language="javascript"> // Tạo mới một thẻ p var p = document.createElement("p"); // Thêm nội dung HTML vào thẻ p p.innerHTML = "DOM Node" // Đưa thẻ P vào trong thẻ body document.getElementsByTagName('body')[0].appendChild(p); </script> </body> </html>
2, DOM Node – document.createTextNode()
Text node là một node đặc biệt, nó không phải là một thẻ HTML thông thường mà chỉ là một chuỗi (string) nên thông thường chúng ta sử dụng nó để thay thế cách gán thông thường node.innerHTML.
VD:
<html> <body> <script language="javascript"> // Tạo mới một thẻ p var p = document.createElement("p"); // Tạo text node var text = document.createTextNode("DOM Node"); // Thêm nội dung HTML vào thẻ p p.appendChild(text); // Đưa thẻ P vào trong thẻ body document.getElementsByTagName('body')[0].appendChild(p); </script> </body> </html>
3, DOM Node – các phương thức khác
Phương thức appendChild()
Dùng để thêm (bổ sung) vào vị trí cuối cùng của đối tượng một thẻ HTML nào đó.
VD:
<html> <body> <div id="TOP">Xin chào các bạn!</div> <input type="button" value="Append" id="btn-append"/> <script language="javascript"> // Lấy button var button = document.getElementById("btn-append"); // Thêm sự kiện click cho button button.addEventListener("click", function(){ // Tạo mới một thẻ h1 var h1 = document.createElement("h1"); // Thêm nội dung HTML vào thẻ h1 h1.innerHTML = "DOM Node" // Đưa thẻ h1 vào trong thẻ div có id=TOP document.getElementById('TOP').appendChild(h1); }); </script> </body> </html>
Phương thức insertBefore()
Được dùng để thêm một node vào đằng trước một node con nào đó. Phương thức này có hai tham số truyền vào insertBefore(node_insert, node_child), trong đó:
node_insert là node bạn muốn thêm vào. node_child là node con mà bạn muốn thêm vào đằng trước nó.
VD:
<html> <body> <div id="content"> <h5>Xin chào các bạn</h5> <h5>chúc vui vẻ khi học bài</h5> </div> <input type="button" value="View" id="btn-view"/> <script language="javascript"> // Lấy button var button = document.getElementById("btn-view"); // Thêm sự kiện click cho button button.addEventListener("click", function(){ // Tạo mới một thẻ h1 var h1 = document.createElement("h1"); // Thêm nội dung HTML vào thẻ h1 h1.innerHTML = "DOM Node" // Lấy thẻ ngoài cùng var element = document.getElementById("content"); // Lấy thẻ cần isertBefore var element_child = document.getElementsByTagName("h5")[1]; // Insert Before element.insertBefore(h1, element_child); }); </script> </body> </html>
Phương thức removeChild()
Được dùng để xóa một node con ra khỏi node hiện tại.
VD:
<html> <body> <div id="content"> <h5>DOM DOM DOM</h5> </div> <input type="button" value="Remove" id="btn-remove"/> <script language="javascript"> // Lấy button var button = document.getElementById("btn-remove"); // Thêm sự kiện click cho button button.addEventListener("click", function(){ // Lấy thẻ cần remove var need_remove = document.getElementsByTagName("h5")[0]; // Remove document.getElementById("content").removeChild(need_remove); }); </script> </body> </html>
Phương thức replaceChild()
Dùng để replace (thay thế) một node con nào đó bằng một node khác mới hoàn toàn. VD:
<html> <body> <div id="content"> <h5>DOM DOM DOM</h5> </div> <input type="button" value="Replace" id="btn-replace"/> <script language="javascript"> // Lấy button var button = document.getElementById("btn-replace"); // Thêm sự kiện click cho button button.addEventListener("click", function(){ // Tạo mới một thẻ var p = document.createElement("h1"); p.innerHTML = "Xin chào!"; // Lấy thẻ cần replace var replace = document.getElementsByTagName("h5")[0]; // Replace document.getElementById("content").replaceChild(p, replace); }); </script> </body> </html>
Như vậy là mình đã giới thiệu xong về DOM trong JavaScrip. Các bạn có thể tham khảo ở http://www.w3schools.com/js/ để tìm hiểu sâu hơn và JS.
