JS HTML 对象 - Javascript

在Javascript中，HTML对象是一种特殊的DOM对象，代表所有可在HTML页面中呈现的元素。

创建HTML对象

我们可以使用Javascript来创建HTML对象，例如：

let div = document.createElement('div');

这里我们创建了一个div元素，并将其存储在div变量中。现在，我们可以使用这个变量来操作这个元素，例如修改它的样式或添加子元素。

操作HTML对象

我们可以使用HTML对象来修改元素的样式、内容或属性，例如：

div.style.backgroundColor = 'red';
div.innerText = 'Hello world!';

这里，我们将div元素的背景颜色设置为红色，然后将它的文本内容设置为"Hello world!"。我们还可以使用setAttribute方法来设置元素的其他属性：

div.setAttribute('id', 'my-div');

这将在div元素上添加一个id属性，其值为my-div。

选择HTML对象

我们可以使用Javascript来选择HTML页面中的任何元素，无论是通过它们的标签名称、类名还是ID。例如：

let div = document.querySelector('div');
let myElem = document.querySelector('#my-elem');
let myClass = document.querySelectorAll('.my-class');

这里，我们使用querySelector和querySelectorAll方法来选择元素。querySelector选择一个单一元素，而querySelectorAll选择所有匹配的元素。我们可以通过标签名称、类名或ID来选择元素。

添加事件

最后，我们可以使用Javascript来为HTML元素添加事件，例如：

let myButton = document.querySelector('#my-button');
myButton.addEventListener('click', function() {
    alert('Button clicked!');
});

这里，我们选择一个ID为my-button的按钮元素，然后使用addEventListener方法添加一个单击事件。当该按钮被单击时，将弹出一个警告框。

总的来说，Javascript中的HTML对象为我们提供了强大的工具来操作HTML页面中的元素，并使我们能够自由地创建、选择、修改和添加事件。