Hướng dẫn dùng xelements JavaScript
Show
4. Thao tác với DOM trong JavaScriptThao tác với DOM trong JavaScript là gì? Thao tác, tương tác với DOM hiểu ra cũng đơn giản như thế này: "A, thằng áo đỏ kia. Bây giờ mày sẽ mặc áo xanh" Đó, Thao tác với DOM chỉ đơn giản là gọi đến thằng nào đó và bắt nó làm gì đó. :D Với JavaScript, bạn có đầy đủ các công cụ để thao tác với các phần tử DOM. Nói chung, tất cả những gì mà HTML có, JavaScript đều có thể tác động, thay đổi được chúng:
Bên dưới đây mình sẽ giới thiệu một số thuộc tính thường sử dụng nhiều nhất trong DOM. 4.1. Thao tác với DOM sử dụng thuộc tính idThuộc tính
Để hiểu cách sử dụng thuộc tính id để thao tác với DOM thì hãy xem xét ví dụ sau: Ví dụ thay đổi id <p id="message">Chào mừng các bạn đến với lập trình JavaScript căn bản!p> <script> var id = document.getElementsByTagName("p")[0].id = "xinChao"; //in ra id của p document.write(document.getElementById("xinChao").id); script> body> Trong mã HTML thì rõ ràng chúng ta đặt Nhưng khi chạy trên trình duyệt, bạn sẽ thấy thẻ Câu lệnh này: var id = document.getElementsByTagName("p")[0].id = "xinChao"; Viết liền như thế có thể sẽ làm bạn hơi khó hiểu. Vì thế, mình sẽ viết lại như sau: Đầu tiên, // Lấy các phần tử p trong tài liệu var arrays_p = document.getElementsByTagName("p"); Bây giờ chúng ta có Và bạn còn nhớ cách truy cập mảng trong JavaScript rồi chứ? > Nếu không thì đọc lại bài Mảng trong JavaScript này nhé. Ở ví dụ trên mình đã cố tình để thẻ Thế nên, nó sẽ là phần tử đầu tiên trong mảng chúng ta lấy được. Tiếp theo, ta sẽ gán
// Gán lại giá trị id cho phần tử p đầu tiên arrays_p[0].id = "xinChao"; Cách làm này có vẻ là hơi rắc rối nhỉ. Có cách nào làm khác không? Có. Phương thức <p id="message">Chào mừng các bạn đến với lập trình JavaScript căn bản!p> <br /> <script> var p = document.getElementById("message"); // Thay đổi id p.id = "xinChao"; script> Thử chạy trên trình duyệt để xem kết quả bạn nhé. Bây giờ, chúng ta đã nhắm đến chính xác phần tử Vì sử dụng phương thức 4.2. Thao tác với DOM sử dụng thuộc tính classNameSử dụng thuộc tính Ví dụ, ta có file HTML như sau: <head> <title>DOM trong JavaScripttitle> <style> .red { color: red; } style> head> <body> <p class="normal" id="message">Chào mừng các bạn đến với lập trình JavaScript căn bản!p> <button onclick="myFunction()">Nhấn vào để thành màu đỏbutton> <script> function myFunction() { var x = document.getElementsByTagName("p")[0]; x.className = "red"; } script> body> html> Sau khi click vào nút thì class > Nếu bạn quên cách tạo hàm thì xin mời học lại bài Hàm trong JavaScript bạn nhé. Nhưng lưu ý, cách làm này sẽ thay thế toàn bộ class trong phần tử p. Để thêm được nhiều class thì đơn giản bạn chỉ cần tách các class bởi dấu cách như thế này: 4.3. Thao tác với DOM sử dụng thuộc tính tagNameThuộc tính tagName trả về tên của phần tử mà bạn nhắm tới. Ví dụ: <p id="message">Chào mừng các bạn đến với lập trình JavaScript căn bản!p> <script> var tag_name = document.getElementById("message").tagName; //in ra tên thẻ của p chính là p document.write(tag_name); script> 4.4. Thao tác với DOM sử dụng thuộc tính innerHTMLThuộc tính innerHTML (bên trong HTML) trả về mã HTML bên trong phần tử hiện tại. Đoạn mã HTML này là chuỗi kí tự chứa tất cả phần tử bên trong, bao gồm các node phần tử và node văn bản. Ví dụ: <p id="message">Chào mừng các bạn đến với lập trình JavaScript căn bản!p> <p id="messages1">p> <script> var value = document.getElementById("message").innerHTML; document.getElementById("messages1").innerHTML = value; script> Đoạn mã này đơn giản là lấy nội dung trong phần tử này và gán nó vào phần tử khác. 4.5. Thao tác với DOM sử dụng thuộc tính outerHTMLTrả về mã HTML của phần tử hiện tại. Có thể hiểu là outerHTML = tagName + innerHTML Ví dụ, đây là tất cả mà outerHTML có thể lấy được. <p id="message">Chào mừng các bạn đến với lập trình JavaScript căn bản!p> Ví dụ: Thay thế phần tử h2 thành h3 <h2 id="message">Xin chào các bạn đến với lập trình JavaScript căn bản!h2> <button onclick="myFunction()">Thay đổi Headerbutton> <script> function myFunction() { document.getElementById("message").outerHTML = " } script> Như vậy, JavaScript sẽ tìm và thay thế toàn bộ h2 thành nội dung mà chúng ta gán cho nó. Có nghĩa là sau khi bất vào nút <h3 id='message_change'>Hello JSh3> <button onclick="myFunction()">Thay đổi Headerbutton> <script> function myFunction() { document.getElementById("message").outerHTML = " } script> 4.6. Thao tác với DOM sử dụng thuộc tính attributesThuộc
tính này sẽ trả về tập các thuộc tính của phần tử bạn nhắm đến mà nó nó như: Ví dụ: Đầu tiên ta có HTML như sau. <input type="button" id="btn" onclick="myFunction()" value="nhấn để xem" /> <p id="text">p> Bây giờ, ta có hàm như sau: function myFunction() { var x = document.getElementById("btn").attributes[3].name; document.getElementById("text").innerHTML = x; } script> Cũng như mảng, thuộc tính này bắt đầu đếm từ 4.7. Thao tác với DOM sử dụng thuộc tính styleThuộc tính style được sử dụng để thiết lập CSS cho phần tử được nhắm đến. Ví dụ: <h2 id="myH1">Thay đổi màu của headerh2> <button onclick="myFunction()">Nhấn nút này để chuyển sang màu đỏbutton> <script> function myFunction() { // Thay đổi màu của thẻ H1 document.getElementById("myH1").style.color = "red"; } script> Trong đó:
Nếu tên thuộc tính có từ 2 từ trở lên: Ví dụ trong CSS bạn biết Lưu ý: Từ từ đầu tiên viết thường, các từ tiếp theo viết HOA chữ cái đầu tiên, không có dấu gạch ngang như trong CSS. Ví dụ. Trong CSS ta viết như thế này: Nhưng khi thiết lập qua document.getElementById("myH1").style.backgroundColor = "red"; Ví dụ thiết lập viền cho phần tử (thuộc tính CSS có nhiều giá trị): document.getElementById("myH1").style.border = "1px solid blue"; Khi thực hiện thành công, <h2 id="myH1" style = "border: 1px solid blue">Thay đổi màu của headerh2> Đó, với DOM, bạn có thể thiết lập CSS cho phần tử mà không cần mở đến file CSS. 4.8. Một số thuộc tính quan hệTrong cây DOM, có rất nhiều các node có quan hệ với nhau như node cha, node anh chị em, node đầu tiên trong nhóm, node cuối cùng trong nhóm... Tóm lại, các mối quan hệ như thế này đều có các thuộc tính tương ứng để cho phép bạn sử dụng.
Ví dụ ta có HTML: <li>Học Javali> <li id="active">Học JavaScriptli> <li>Học PHPli> <li>Học Pytonli> <li>NIIT - ICT Hà Nộili> ul> <div id="ketQua">div> Bây giờ, ta
chọn đến node cha của thẻ // Nhắm đến phần tử cha của phần tử id = active let x = document.getElementById("active").parentNode; console.log(x.nodeName); // Kết quả: UL Đối với các thuộc tính quan hệ khác thì cũng tương tự.
Ví dụ, trong trường hợp trên, ta lấy các phần tử li của thẻ ul // Lấy các node con của phần tử ul let y = document.getElementById("khoaHoc").childNodes; // Kiểm tra xem lấy được bao nhiêu node console.log(y.length); // Kết quả: 11 > Lưu ý: Trong DOM, tất cả các phần của tài liệu, chẳng hạn như phần tử, thuộc tính, văn bản, v.v đều tính là node Do đó, tính cả các thẻ
Ví dụ ta có HTML: <ul id="khoaHoc"><li>Ali><li>Bli><li>Cli>ul> <div id="ketQua">div> Lấy phần tử đầu tiên trong // Lấy nội dung của thẻ li đầu tiên var list = document.getElementById("khoaHoc").firstChild.innerHTML; // Gán nội dung lấy được vào thẻ div document.getElementById("ketQua").innerHTML = list; > Lưu ý: Nếu có khoảng trống ở trước phần tử đầu tiên (dấu cách, xuống dòng, tab...) thì kết quả trả về là Vẫn còn rất nhiều các phần tử quan hệ như thế này. Bạn có thể đọc kỹ thêm tại đây. Bên dưới đây mình có giải thích thêm một chút về một số node hay được sử dụng.
Mỗi node trên cây DOM đều có 6 thuộc tính quan hệ để giúp bạn truy xuất gián tiếp theo vị trí của node :
4.9. Một số phương thức phổ biến để thao tác với DOM khácNhư bạn đã biết, thông qua JavaScript chúng ta đã lấy được các phần tử HTML, thay đổi thuộc tính, thêm thuộc tính cho nó. Ngoài ra bạn cũng có thể:
Dưới đây là ví dụ thực hiện cho cả 3 phương thức trên. HTML: <li>JavaScriptli> <li>Java Full Stackli> <li>PHP Full Stackli> ul> <button onclick="themKhoaHoc()">Thêm Khóa họcbutton> Bây giờ ta sẽ tạo một hàm để thêm một khóa học mới: //Tạo thêm một đối tượng li var node = document.createElement("li"); // Tạo một text node var textnode = document.createTextNode("Full Stack DEV"); // Thêm text node vào node li vừa tạo node.appendChild(textnode); // Thêm phần tử vừa tạo vào cuối ul document.getElementById("khoaHoc").appendChild(node); } Bạn thử chạy trên trình duyệt xem. Kết quả như thế nào? Có thể thêm node thì cũng có thể xóa node với phương thức removeChild() Đầu tiên, ta thêm một button nữa: <button onclick="xoaKhoaHoc()">Xóa Khóa họcbutton> Sau đó ta tạo một hàm xóa node đầu tiên trong ul: // Chọn đến danh sách khóa học let kh = document.getElementById("khoaHoc"); // Xóa phần tử con đầu tiên kh.removeChild(kh.childNodes[0]); } Khi bấm vào nút Nhân tiện, tham khảo một số khóa học Lập trình tại NIIT - ICT Hà Nội để học lập trình web nhanh hơn:
|