15-DOM-Element 对象

       在 DOM 树中，每个 HTML 元素都是一个 Element 对象，它们是 Document 对象的子节点。Element 对象表示 HTML 元素，并且有许多属性和方法可以用于操作这些元素的内容和样式。

一些常用的方法/属性

1、innerHTML 属性：用于获取或设置 HTML 元素的内容，包括 HTML 标记。

var myElement = document.getElementById("my-element");
myElement.innerHTML = "<p>This is a paragraph.</p>"; // 设置元素内容
console.log(myElement.innerHTML); // 获取元素内容

2、textContent 属性：用于获取或设置 HTML 元素的文本内容，不包括 HTML 标记。 

var myElement = document.getElementById("my-element");
myElement.textContent = "This is a paragraph."; // 设置元素文本内容
console.log(myElement.textContent); // 获取元素文本内容

3、className 属性：用于获取或设置 HTML 元素的 class 属性值。

var myElement = document.getElementById("my-element");
myElement.className = "new-class"; // 修改元素的 class 属性值
console.log(myElement.className); // 获取元素的 class 属性值

4、style 属性：用于获取或设置 HTML 元素的样式。 

var myElement = document.getElementById("my-element");
myElement.style.color = "red"; // 修改元素的文本颜色为红色

 5、getAttribute() 和 setAttribute() 方法：用于获取或设置 HTML 元素上指定属性的值。

var myElement = document.getElementById("my-element");
myElement.setAttribute("href", "https://www.example.com/"); // 设置元素的 href 属性值
console.log(myElement.getAttribute("href")); // 获取元素的 href 属性值

6、addEventListener() 方法：用于给 HTML 元素绑定事件监听器。

var myElement = document.getElementById("my-element");
myElement.addEventListener("click", function () {
  console.log("Clicked!");
});

---

属性 / 方法	描述
accessKey	设置或返回元素的 accesskey 属性。
addEventListener()	将事件处理程序附加到元素。
appendChild()	向元素添加（附加）新的子节点。
attributes	返回元素属性的 NamedNodeMap。
blur()	从元素中移除焦点。
childElementCount	返回元素的子元素个数。
childNodes	返回元素子节点的 NodeList。
children	返回元素的子元素的 HTMLCollection。
classList	返回元素的类名。
className	设置或返回元素的 class 属性值。