Minh họa về thuộc tính,phương thức thường gặp trong dom javascript
★ Tham khảo: Dịch vụ thiết kế và phát triển website
★ Tham khảo: Khóa học thiết kế, dàn trang của Quốc Bửu Group
★ Tham khảo: Khóa học lập trình website của Quốc Bửu Group
Tổng hợp các thuộc tính cơ bản thường dùng trong DOM (javascript)
+ innerHTML: Trả về mã HTML bên trong phần tử áp dụng, tất cả các đánh dấu và nội dung bên trong sẽ được thay thế.
+ attributes: Thuộc tính này trả về các thuộc tính như id, name, type, title, href, attr,...
+ className: Thông tin về tên thuộc tính class của phần tử, có thể gán class cho phần tử bạn muốn áp dụng.
VD sử dụng thuộc tính dom
<div id="showInner"></div>
<span id="clickMe">Show</span>
$("#clickMe").click(function(){
document.getElementById("showInner").innerHTML = "Hello: Quốc Bửu Group";
});
//đoạn mã trên khi click vào nút "Show" sẽ thêm vào thẻ div có id "showInner" nội dung "Hello: Quốc Bửu Group"
var qb = document.getElementById("test").innerHTML;
document.getElementById("show").innerHTML = qb ;
Tổng hợp các phương thức DOM cung cấp để thao tác trên đối tượng html.
+ getElementById(): Truy xuất đến một phần tử html thông qua id của nó.
+ getElementsByName(): Truy xuất đến một phần tử html thông qua name của nó (lấy phần tử theo tên, chính là thuộc tính name trong thẻ).
+ getElementsByTagName(): Truy xuất đến một phần tử html thông qua tên thẻ html.
+ createElement(): Khởi tạo đối tượng mà không liên quan đến các thẻ HTML đã được hiển thị từ trước đó.
+ appendChild(): Dùng để thêm vào vị trí cuối cùng của đối tượng một thẻ HTML nào đó.
+ insertBefore(): Được dùng để thêm một Node vào đằng trước một node con nào đó.
+ removeChild(): Được dùng để xóa một node con ra khỏi node hiện tại.
+ replaceChild(): Dùng để thay thế một node con nào đó bằng một node khác mới hoàn toàn.
VD minh họa phương thức thường gặp trong DOM
<div id="txtNote">Nội dung đoạn ghi chú</div>
<div id="txtChange"></div>
var note = document.getElementById("txtNote").innerHTML;
document.getElementById("txtChange").innerHTML = "Thêm: "+note+ " vào thẻ txtChange";
var qb = document.getElementById('content');
alert(qb)
//đoạn mã trên lấy tất cả nội dung thẻ txtNote sau đó bỏ vào thẻ txtChange
<div name="txtNote">Nội dung đoạn ghi chú</div>
<div name="txtChange"></div>
var note = document.getElementsByName("txtNote")[0].innerHTML;
document.getElementsByName("txtChange")[0].innerHTML = "Thêm: "+note+ "vào thẻ txtChange bằng getElementsByName";
//đoạn mã trên lấy tất cả nội dung thẻ có name txtNote sau đó bỏ vào thẻ có name là txtChange
<p>Đoạn văn một</p>
<p>Đoạn văn hai</p>
<p>Đoạn văn ba</p>
document.getElementsByTagName("p")[0].innerHTML = "Hello world";
//Đoạn mã trên lấy phần tử thẻ p đầu tiên sau đó thêm vào đoạn text "Hello world'
<span onclick="addPara()">Click thêm</span>
function addPara() {
var para = document.createElement("p");
para.innerText = "Đoạn văn thêm";
document.body.appendChild(para);
}
//Đoạn mã trên thêm một thẻ p có nội dung "Đoan văn thêm" vào khi click nút "Click thêm"
<span onclick="addThemList()">Click thêm</span>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
function addThemList() {
var newItem = document.createElement("li");
var textnode = document.createTextNode("Nước khoáng");
newItem.appendChild(textnode);
var list = document.getElementById("myList");
list.insertBefore(newItem, list.childNodes[0]);
}
//Đoạn mã trên thêm vào một thẻ li có nội dung "Nước khoáng" vào đầu của list có id là myList
<span onclick="removeLi()">Xóa li</span>
<ul id="myList">
<li id="myLI">Coffee</li>
</ul>
var item = document.getElementById("myLI");
function removeLi() {
item.parentNode.removeChild(item);
}
//Đoạn mã trên xóa thẻ li có id là myLi khỏi danh sách khi click vào nút "Xóa li"
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<span onclick="thayDoiLi()">Thay đổi</span>
function thayDoiLi() {
var textnode = document.createTextNode("Water");
var item = document.getElementById("myList").childNodes[0];
item.replaceChild(textnode, item.childNodes[0]);
}
//Đoạn mã trên thay đổi thẻ li đầu tiên một thẻ li khác với nội dung "Nước khoáng" khi click vào nút "Thay đổi"
Chúc các bạn thành công trong công việc !
Nhấc máy lên và gọi cho chúng tôi để được tư vấn về khóa học thiết kế website với PHP và MYSQL online tại 63 tỉnh thành, mọi thông tin tư vấn xin vui lòng gửi về email quocbuugroup@gmail.com hoặc các phương tiện khác bên dưới.
* Quốc Bửu Group luôn luôn lắng nghe, tiếp nhận và xử lý một cách triệt để, xin vui lòng gọi số hotline ở phía trên để chúng tôi hỗ trợ bạn.
Thuộc tính, phương thức thường gặp trong DOM (Javascript)
Bạn đang cần tư vấn dịch vụ, than phiền dịch vụ hoặc đóng góp ý kiến?
Quốc Bửu Group luôn luôn lắng nghe, tiếp nhận và xử lý một cách triệt để, xin gọi số hotline ở phía trên hoặc gửi thông tin yêu cầu bên dưới, chúng tôi sẽ liên hệ với bạn trong thời gian sớm nhất có thể.
Để yêu cầu tư vấn dịch vụ hoặc sản phẩm, Quý khách vui lòng điền vào trường lời nhắn những thông tin sau: Mã sản phẩm, tên sản phẩm, thông tin sản phẩm... để chúng tôi hỗ trợ một cách chính xác.
Văn phòng: 67/9 Đường TA04, Phường Thới An, Quận 12, TP. Hồ Chí Minh
Hotline: 0937.587.087
Email: quocbuugroup@gmail.com
Website: www.quocbuugroup.com
Mã số thuế: 0316095304
Thời gian làm việc: Từ thứ 2 - thứ 7, 08h00 - 17h00
Tại Bình Dương: 230 Bạch Đằng, Phường Lái Thiêu, Thuận An, Bình Dương
Tại Long An: 124 Lê Cao Dòng, Phường 2, Tân An, Long An
Tại Bình Thuận: 407 đường DT 720, Xã Suối Kiết, Tánh Linh, Bình Thuận
Tại Tiền Giang: Số 24 ấp 1, Xã An Thái Trung, Cái Bè, Tiền Giang
Tại Đồng Nai: Lô F, KCN Long Khánh, Xã Bình Lộc, Thị Xã Long Khánh, Đồng Nai
Tại Đắk Lắk: Y Wang, Ea Tam, Thành phố Buôn Ma Thuột, Đắk Lắk
Họ và tên *
Số điện thoại *
Địa chỉ
Lời nhắn *
Mã đơn hàng *
Số điện thoại *