以下是一些常见的 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