JavaScript 通过 HTML DOM(文档对象模型)提供了访问和操作 HTML 文档的能力。HTML DOM 是一个树形结构,它表示整个 HTML 文档,每个 HTML 元素都是文档树的节点。通过 JavaScript,你可以通过 DOM 提供的接口来操作 HTML 元素、属性和文本内容。

以下是一些常见的 HTML DOM 操作:

获取 HTML 元素:

1. 通过 ID 获取元素:
   
   var elementById = document.getElementById("myElementId");

2. 通过标签名获取元素:
   
   var elementsByTagName = document.getElementsByTagName("p");

3. 通过类名获取元素:
   
   var elementsByClassName = document.getElementsByClassName("myClassName");

4. 通过选择器获取元素(使用 querySelector):
   
   var elementBySelector = document.querySelector("#myElementId");

操作 HTML 元素:

1. 获取和设置元素的文本内容:
   var element = document.getElementById("myElementId");
   var textContent = element.textContent; // 获取文本内容
   element.textContent = "New Text";     // 设置文本内容

2. 获取和设置元素的 HTML 内容:
   var element = document.getElementById("myElementId");
   var htmlContent = element.innerHTML; // 获取 HTML 内容
   element.innerHTML = "<p>New HTML</p>"; // 设置 HTML 内容

3. 操作元素的属性:
   var element = document.getElementById("myElementId");
   var value = element.getAttribute("src"); // 获取属性值
   element.setAttribute("alt", "New Alt Text"); // 设置属性值

操作 HTML 表单元素:

1. 获取和设置输入框的值:
   var inputElement = document.getElementById("myInputId");
   var inputValue = inputElement.value; // 获取输入框的值
   inputElement.value = "New Value";   // 设置输入框的值

2. 提交表单:
   var formElement = document.getElementById("myFormId");
   formElement.submit(); // 提交表单

这只是一小部分 HTML DOM 的操作示例。通过 HTML DOM,JavaScript 允许你以动态方式操作和修改页面的内容,使得用户与页面的交互更加丰富和动态。


转载请注明出处:http://www.pingtaimeng.com/article/detail/3545/JavaScript