详谈javascript中DOM的基本属性

当谈到JavaScript中的DOM（文档对象模型）时，我们需要了解DOM的基本属性。DOM是指在HTML文档中的每个元素都可以视为一个对象，而JavaScript可以用来访问和修改它们。

HTML元素的基本属性

HTML元素的基本属性通常可以通过查询DOM文档来找到。下面是访问HTML元素的基本属性的一些示例。

Element.innerHTML

Element.innerHTML 属性可以用来获取或设置 HTML 元素的内容。

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

div.innerHTML = '这是一个div元素。';

console.log(div.innerHTML); // 输出 '这是一个div元素。'

Element.style

Element.style属性可以让我们访问一个 HTML 元素的样式。使用该属性，我们可以直接修改 HTML 元素的样式，如下面这个例子所示：

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

div.style.backgroundColor = 'red';
div.style.color = 'white';
div.style.padding = '10px';

document.body.appendChild(div);

从HTML文档中选择元素

要在JavaScript中从HTML文档中选择元素，可以使用querySelector()方法或querySelectorAll()方法。

document.querySelector()

document.querySelector()方法允许您选择文档中第一个匹配选择器的元素，并返回它。下面的示例演示如何使用document.querySelector()方法选择ID为my-div的特定元素：

const element = document.querySelector('#my-div');

document.querySelectorAll()

document.querySelectorAll() 允许您通过指定的选择器选择文档中匹配的所有元素，并返回它们。下面的示例演示如何使用document.querySelectorAll()方法选择所有类名为example-class的元素：

const elements = document.querySelectorAll('.example-class');

这些是访问HTML元素和从HTML文档选择元素的基本属性和示例。掌握它们将使你更好地理解JavaScript中的DOM。