Khi bạn đã lựa chọn được phần tử trong DOM [chọn phần tử trong DOM], bạn có thể thay đổi thuộc tính liên quan đến phần tử, ví dụ thay đổi nội dung bằng thuộc tính innerHTML
[phần tử HTML có những thuộc tính gì]
Ví dụ: phần tử HTML Như vậy bạn thấy thông qua JavaScript bạn có thể thay đổi mọi thuộc tính của phần tử HTMLSome link
Đổi style phần tử [CSS]
Some link
0 của các phần tử HTML có thể được thay đổi thông qua JavaScript, để thay đổi truy cập vào thuộc tính Some link
0 và thay đổi các thông số yêu cầu:
Nội dung Ví dụ
Ví dụ trên đã thay đổi
Some link2 và
Some link3 của phần tử thẻ
Some link4
Tất cả các thuộc tính
Some link5 đều có thể cập nhật bằng JavaScript. Điều bạn cần nhớ là không được sử dụng ký hiệu
Some link6 trong tên thuộc tính, mà bạn cần chuyển tên dạng
Some link5 thành dạng tên
Some link8 ví dụ: trong
Some link5 thuộc tính
0 thì trongNội dung Ví dụ
1 thuộc tính này làNội dung Ví dụ
2Nội dung Ví dụ
Bạn có thể dùng JavaScript để tạo mới phần từ HTML sau đó chèn vào trang web. Đây là các cách giúp bạn tạo mới một phần tử HTML
document.createElement[tag_name]
tạo ra phần tử có thẻ tag_name
như a
, p
, div
...0Tạo ra một phần tử bằng cách nhân bản phần tử chỉ ra [nội dung ví dụ
KẾT QUẢ
1]nội dung ví dụ
KẾT QUẢ
2tạo phần tử tử văn bảnnội dung ví dụ
KẾT QUẢ
3 HTMLnội dung ví dụ
KẾT QUẢ
var node = document.createTextNode["Tạo ra một phần tử"]; var linknode = document.createElement["a"]; linknode.href="//xuanthulab.net/"; linknode.innerText="xuanthulab.net";
Ví dụ trên sẽ tạo ra một nút text, nhưng nó chưa hiện thị cho đến khi bạn gắn phần tử đó vào HTML document để nó là phần tử con của một phần tử nào đó, có một số cách để gắn phần tử tạo ra từ JavaScript vào DOM HTML
4Thêm phần tửnội dung ví dụ
KẾT QUẢ
5 vào phần tửnội dung ví dụ
KẾT QUẢ
1 nó trở thành phần tử con sau cùng củanội dung ví dụ
KẾT QUẢ
1nội dung ví dụ
KẾT QUẢ
8Chèn phần tửnội dung ví dụ
KẾT QUẢ
5 nằm phía trướcnội dung ví dụ
KẾT QUẢ
0
This is a paragraph.
This is another paragraph.
1Thay thế phần tử
This is a paragraph.
This is another paragraph.
2 bằng phần tử
This is a paragraph.
This is another paragraph.
5nội dung ví dụ
KẾT QUẢ
Ví dụ sau tạo ra một phần tử đoạn văn p
sau đó chèn nó vào phần tử div
đang có sẵn trong DOM HTML
KẾT QUẢnội dung ví dụ
KẾT QUẢ
Loại bỏ phần tử
Để loại bỏ phần tử HTML, bạn chọn phần tử cha rồi sử dụng phương thức
6
This is a paragraph.
This is another paragraph.
This is a paragraph.
This is another paragraph.
Ví dụ trên sẽ xóa bỏ phần tử đoạn văn thứ nhất
Bạn có thể sử dụng thủ thuật lấy thuộc tính
7 để bỏ qua bước tìm phần tử cha trong DOM:
This is a paragraph.
This is another paragraph.
8
This is a paragraph.
This is another paragraph.
This is a paragraph.
This is another paragraph.
Thay thế phần tử
Để thay thể một phần tử bằng một phần tử khác dùng cú pháp element.replaceChild[newNode, oldNode]. Trong đó
1 là nút chanội dung ví dụ
KẾT QUẢ