HTML | DOM 参数对象

当使用 JavaScript 操作 HTML 页面时，常常需要使用到 HTML | DOM 参数对象。

HTML | DOM 参数对象提供了许多有用的属性和方法，我们可以通过这些属性和方法来获取或者修改 DOM 元素的属性和内容，或者动态地创建、添加、删除元素。

HTML | DOM 参数对象的属性

HTML | DOM 参数对象的属性，提供了对应属性的值或者状态。

innerHTML

innerHTML 属性用来获取或设置一个 HTML 元素的内容，即其包含的 HTML 代码。

const element = document.getElementById("example");
console.log(element.innerHTML);  // 输出元素的 HTML 内容
element.innerHTML = "新的 HTML 内容";  // 设置元素的 HTML 内容

textContent

textContent 属性用来获取或设置一个 HTML 元素的文本内容，即其包含的文本字符串。

const element = document.getElementById("example");
console.log(element.textContent);  // 输出元素的文本内容
element.textContent = "新的文本内容";  // 设置元素的文本内容

className

className 属性用来获取或设置一个 HTML 元素的 class 属性值。

const element = document.getElementById("example");
console.log(element.className);  // 输出元素的 class 属性值
element.className = "new-class";  // 设置元素的 class 属性值

id

id 属性用来获取或设置一个 HTML 元素的 id 属性值。

const element = document.getElementById("example");
console.log(element.id);  // 输出元素的 id 属性值
element.id = "new-id";  // 设置元素的 id 属性值

value

value 属性用来获取或设置一些 HTML 元素，比如 input、textarea 的值属性值。

const input = document.getElementById("example");
console.log(input.value);  // 输出 input 的 value 属性值
input.value = "新的 value 值";  // 设置 input 的 value 属性值

HTML | DOM 参数对象的方法

HTML | DOM 参数对象的方法，提供了对应方法的行为。

getElementById()

getElementById() 方法可以通过元素的 ID 获取到该元素的 HTML | DOM 参数对象。

const element = document.getElementById("example");
console.log(element);  // 输出元素的 HTML | DOM 参数对象

getElementsByClassName()

getElementsByClassName() 方法可以通过 class 名称获取到所有符合条件的元素的 HTML | DOM 参数对象。

const elements = document.getElementsByClassName("example");
console.log(elements);  // 输出符合条件的元素数组的 HTML | DOM 参数对象

getElementsByTagName()

getElementsByTagName() 方法可以通过标签名称获取到所有符合条件的元素的 HTML | DOM 参数对象。

const elements = document.getElementsByTagName("div");
console.log(elements);  // 输出符合条件的元素数组的 HTML | DOM 参数对象

removeChild()

removeChild() 方法可以用来删除一个元素的子节点。

const element = document.getElementById("example");
const child = element.firstElementChild;
element.removeChild(child);  // 删除子节点

createElement()

createElement() 方法可以用来动态地创建一个元素。

const element = document.createElement("div");
element.textContent = "新创建的元素";
document.body.appendChild(element);  // 将新创建的元素添加到页面中

参考文献

• JavaScript HTML DOM