HTML DOM trong JavaScript – Thay đổi HTML
HTML DOM cho phép JavaScript thay đổi nội dung của các phần tử HTML. Thay đổi luồng đầu ra HTML JavaScript có thể tạo nội dung HTML động: Date: Mon Aug 28 2017 23:46:59 GMT+0700 (SE Asia Standard Time) Trong JavaScript, document.write() có thể được sử ...
HTML DOM cho phép JavaScript thay đổi nội dung của các phần tử HTML.
Thay đổi luồng đầu ra HTML
JavaScript có thể tạo nội dung HTML động:
Date: Mon Aug 28 2017 23:46:59 GMT+0700 (SE Asia Standard Time)
Trong JavaScript, document.write() có thể được sử dụng để ghi trực tiếp vào dòng đầu ra HTML:
<!DOCTYPE html>
<html>
<body><script>
document.write(Date());
</script></body>
</html>
Không bao giờ sử dụng document.write() sau khi nạp tài liệu. Nó sẽ ghi đè lên tài liệu.
Thay đổi nội dung HTML
Cách đơn giản nhất để sửa đổi nội dung của một phần tử HTML là sử dụng thuộc tính innerHTML. Để thay đổi nội dung của một phần tử HTML, hãy sử dụng cú pháp sau:
document.getElementById(id).innerHTML = new HTML
Ví dụ này thay đổi nội dung của một phần tử <p>:
<html>
<body><p id=”p1″>Hello World!</p>
<script>
document.getElementById(“p1”).innerHTML = “New text!”;
</script></body>
</html>
Phân tích ví dụ trên:
- Tài liệu HTML ở trên chứa một phần tử <p> với id = “p1”
- Sử dụng HTML DOM để lấy phần tử có id = “p1”
- Một JavaScript thay đổi nội dung (innerHTML) của phần tử đó thành “New text!”
Ví dụ này thay đổi nội dung của một phần tử <h1>:
<!DOCTYPE html>
<html>
<body><h1 id=”id01″>Old Heading</h1>
<script>
var element = document.getElementById(“id01”);
element.innerHTML = “New Heading”;
</script></body>
</html>
Phân tích ví dụ trên:
- Tài liệu HTML ở trên chứa một phần tử <h1> với id = “id01”
- Sử dụng HTML DOM để lấy phần tử id = “id01”
- Một JavaScript thay đổi nội dung (innerHTML) của phần tử đó thành “New Heading”
Thay đổi giá trị của một thuộc tính
Để thay đổi giá trị của một thuộc tính HTML, sử dụng cú pháp sau:
document.getElementById(id).attribute = new value
Ví dụ này thay đổi giá trị của thuộc tính src của một phần tử <img>:
<!DOCTYPE html>
<html>
<body><img id=”myImage” src=”smiley.gif”>
<script>
document.getElementById(“myImage”).src = “landscape.jpg”;
</script></body>
</html>
Giải thích ví dụ:
- Tài liệu HTML ở trên chứa một phần tử <img> với id = “myImage”
- Sử dụng HTML DOM để lấy phần tử id = “myImage”
- Một JavaScript thay đổi thuộc tính src của phần tử đó từ “smiley.gif” sang “landscape.jpg”
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
