Đối tượng HTML DOM Hình được sử dụng để duyệt lại phần tử HTML
Cú pháp
Sau đây là cú pháp để tạo một đối tượng Hình -
var p = document.createElement("FIGURE"); Ví dụ
Sau đây là cách bạn có thể tạo đối tượng Hình -
<!DOCTYPE html>
<html>
<head>
<script>
function createFigure(){
var fig = document.createElement("FIGURE");
fig.setAttribute("id", "Figure1");
document.body.appendChild(fig);
var i = document.createElement("IMG");
i.setAttribute("src", "https://www.tutorialspoint.com/servlets/images/servletsmini-logo.jpg");
i.setAttribute("width", "250");
i.setAttribute("height", "200");
i.setAttribute("alt", "Eiffel Tower");
fig.appendChild(i);
}
</script>
</head>
<body>
<h2>HTML DOM figure object</h2>
<button onclick="createFigure()">CREATE</button><br><br>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút TẠO -
Trong ví dụ trên -
Đầu tiên chúng tôi đã tạo một nút CREATE sẽ thực thi hàm createFigure () khi người dùng nhấp vào -
<button onclick="createFigure()">CREATE>/button><br><br>
Hàm createFigure () tạo phần tử hình bằng phương thức createElement () của đối tượng tài liệu. Sử dụng setAttribute (), chúng tôi đặt id của phần tử figure và cuối cùng gắn nó vào phần thân của document bằng phương thức appendChild (). Sau đó, chúng tôi tạo một phần tử khác img để đưa hình ảnh vào bên trong phần tử figure.
Sử dụng phương thức setAttribute (), chúng tôi đặt các giá trị src, width, height và alt của phần tử img. Cuối cùng, phần tử img được thêm vào dưới dạng phần tử con của phần tử figure bằng phương thức appendChild () -
function createFigure(){
var fig = document.createElement("FIGURE");
fig.setAttribute("id", "Figure1");
document.body.appendChild(fig);
var i = document.createElement("IMG");
i.setAttribute("src", "EiffelTower.jpg");
i.setAttribute("width", "250");
i.setAttribute("height", "200");
i.setAttribute("alt", "Eiffel Tower");
fig.appendChild(i);
}