HTML DOM 访问
HTML DOM(Document Object Model)指的是文档对象模型,表示HTML页面的结构,包括页面元素及其属性。
HTML DOM访问指的是通过编程方式访问HTML文档中的元素及其属性,包括获取元素、修改元素、删除元素等。
HTML DOM操作分为以下几个步骤:
- 获取文档对象 在JavaScript中,可以通过以下语句获取文档对象:
var doc = document;
- 获取元素对象 可以使用以下方法获取元素对象:
- 通过元素的id获取:
document.getElementById("elementId")
- 通过元素的标签名获取:
document.getElementsByTagName("tagName")
- 通过元素的class名获取:
document.getElementsByClassName("className")
- 通过CSS选择器获取:
document.querySelector("selector")
或document.querySelectorAll("selector")
- 修改元素属性 可以通过以下方法修改元素的属性:
- 获取元素对象后,可以通过直接设置其属性来修改。
var element = document.getElementById("elementId");
element.className = "newClass";
element.style.color = "red";
- 也可以使用
setAttribute()
和removeAttribute()
方法来修改属性和移除属性。
var element = document.getElementById("elementId");
element.setAttribute("title", "newTitle");
element.removeAttribute("disabled");
- 操作元素内容 可以通过以下方法来操作元素的内容:
- 获取元素的文本内容:
element.textContent
或element.innerText
var element = document.getElementById("elementId");
var text = element.textContent;
- 设置元素的内容:
element.innerHTML
或element.outerHTML
var element = document.getElementById("elementId");
element.innerHTML = "<span>new content</span>";
- 创建和删除元素 可以通过以下方法来创建和删除元素:
- 创建元素:
document.createElement("tagName")
var newElement = document.createElement("div");
- 插入元素:
parentElement.appendChild(childElement)
或parentElement.insertBefore(newElement, referenceElement)
var parent = document.getElementById("parentId");
var child = document.createElement("div");
parent.appendChild(child);
var parent = document.getElementById("parentId");
var newElement = document.createElement("div");
var referenceElement = document.getElementById("referenceId");
parent.insertBefore(newElement, referenceElement);
- 删除元素:
parentElement.removeChild(childElement)
var parent = document.getElementById("parentId");
var child = document.getElementById("childId");
parent.removeChild(child);
以上是HTML DOM访问的基本操作。虽然操作简单,但在页面交互和动态效果实现中起着至关重要的作用。