Trong bài này chúng ta sẽ tìm hiểu đến DOM Element Javascript, ta sẽ học cách truy xuất đến một thẻ HTML bất kì thông qua các thuộc tính như Show
 Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. DOM element trong Javascript là tổng hợp những hàm như getElementById, getElementsByTagName, getElementsByClass và querySelectorAll. Nhưng hàm này có công dụng là truy xuất đến các thẻ trong tài liệu html. Cụ thể như sau. 1. Sử dụng getElementById để tìm theo IDĐể truy xuất tới một thẻ HTML theo ID ta sử dụng cú pháp sau: var element = document.getElementById('idname');// Lấy thẻ input
var element = document.getElementById('website');
// Lấy giá trị của thẻ input
document.write(element.value);2. Sử dụng getElementsByTagName để tìm theo tên thẻ htmlTên thẻ HTML chính là tên các thẻ như Bài viết này được đăng tại [free tuts .net] var element = document.getElementsByTagName('tagname');// Lấy thẻ input
var element = document.getElementsByTagName('input');
// Lấy giá trị của thẻ input
document.write(element[0].value);Bạn có hiểu ý nghĩa của đoạn code 3. Sử dụng getElementsByClassName để tìm theo tên classĐể tìm các thẻ HTML có class nào đó thì ta dùng cú pháp sau: var element = document.getElementsByClassName('input');Tương tự như tìm theo tên thẻ HTML, thì tìm theo tên class sẽ trả về một mảng các object nên bạn sẽ phải sử dụng cú pháp truy xuất mảng để chọn đúng đối tượng muốn lấy. // Lấy thẻ input
var element = document.getElementsByClassName('website');
// Lấy giá trị của thẻ input
document.write(element[0].value);4. Sử dụng querySelectorAll để tìm theo CSS selectorKhi chọn các thẻ HTML theo class thì thường sẽ trả về hàng loạt các kết quả nên đôi khi sẽ có những kết quả mà ta không muốn lấy. Chính vì vậy javascript DOM có một phương thức kết hợp với CSS Selector để truy vấn có độ chính xác cao hơn, đó chính là hàm querySelectorAll. Và đây là cú pháp sử dụng: var element = document.querySelectorAll("selector css");Ví dụ: Mình có một đoạn mã HTML như sau: <html>
<body>
<input type="text" value="thẻ không cần lấy" class="website"/>
<div>
<input type="text" value="Thẻ Cần Lấy" class="website"/>
<input type="text" value="thẻ không cần lấy"/>
</div>
</body>
</html>Câu hỏi đặt ra là làm thế nào có thể chọn đúng một thẻ input nằm trong thẻ div và có Trước tiên ta quay
lại chút với CSS Selector đã nhé. Trong CSS để chọn thẻ input nằm trong thẻ Chỉ cần đưa css selector này vào hàm querySelectorAll là ta có được kết quả cần lấy. var element = document.querySelectorAll("div input.website");Và có một lưu ý tương tự là kết quả sẽ trả về một mảng các Objects. Lời kết: Trên là 4 cách thông thường chúng ta hay sử dụng trong javascript để truy xuất tới một thẻ HTML bất kì. Nếu sau này làm việc với jQuery thì bạn không cần phải nhọc nhằn như thế nữa mà nó có những phương thức ngắn gọn hơn rất nhiều. 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 JavaScript</title> <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 Header</button> <script> function myFunction() { document.getElementById("message").outerHTML = "<h3 id='message_change'>Hello JS</h3>"; } </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 JS</h3> <button onclick="myFunction()">Thay đổi Header</button> <script> function myFunction() { document.getElementById("message").outerHTML = "<h3 id='message_change'>Hello JS</h3>"; } </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. <!-- Ta có thuộc thẻ input có 4 thuộc tính type, id, onclick, value --> <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 header</h2> <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 header</h2> Đó, 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 Java</li> <li id="active">Học JavaScript</li> <li>Học PHP</li> <li>Học Pyton</li> <li>NIIT - ICT Hà Nội</li> </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>A</li><li>B</li><li>C</li></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>JavaScript</li> <li>Java Full Stack</li> <li>PHP Full Stack</li> </ul> <button onclick="themKhoaHoc()">Thêm Khóa học</button> 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ọc</button> 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:
|
