阅读量:0
JavaScript DOM(Document Object Model)操作是指与HTML文档进行交互的方法。以下是一些常用的DOM操作方法:
获取元素:
getElementById(id)
:通过元素的ID获取元素。getElementsByClassName(className)
:通过元素的类名获取元素集合。getElementsByTagName(tagName)
:通过元素的标签名获取元素集合。querySelector(selector)
:通过CSS选择器获取第一个匹配的元素。querySelectorAll(selector)
:通过CSS选择器获取所有匹配的元素集合。
修改元素内容:
innerHTML
:获取或设置元素的HTML内容。innerText
:获取或设置元素的文本内容。textContent
:获取或设置元素的文本内容(包括子元素)。
修改元素属性:
getAttribute(attributeName)
:获取元素的属性值。setAttribute(attributeName, value)
:设置元素的属性值。removeAttribute(attributeName)
:删除元素的属性。
修改元素样式:
style
:直接通过元素对象的style属性修改样式(不推荐,应使用CSS类)。classList
:操作元素的类名。
操作子元素和兄弟元素:
appendChild(childNode)
:在元素末尾添加子节点。insertBefore(newNode, referenceNode)
:在指定节点之前插入新节点。removeChild(childNode)
:删除指定子节点。replaceChild(newChild, oldChild)
:替换指定子节点。nextSibling
:获取当前节点的下一个兄弟节点。previousSibling
:获取当前节点的上一个兄弟节点。
遍历DOM树:
parentNode
:获取当前节点的父节点。childNodes
:获取当前节点的所有子节点集合(包括文本节点和元素节点)。firstChild
:获取当前节点的第一个子节点。lastChild
:获取当前节点的最后一个子节点。
创建和操作文档片段:
DocumentFragment
:创建一个文档片段,用于临时存储DOM节点,以便一次性添加到文档中。
事件处理:
- 为元素添加事件监听器,如
addEventListener(type, listener)
和attachEvent(type, listener)
(针对IE浏览器)。
- 为元素添加事件监听器,如
操作CSS样式表:
cssText
:获取或设置元素的内联样式。classList.add(className)
、classList.remove(className)
、classList.contains(className)
:操作元素的类名。
模拟用户交互:
click()
、mouseover()
、mouseout()
等方法:模拟用户点击、鼠标悬停等交互行为。
这些方法提供了对HTML文档进行动态操作的能力,使得JavaScript在网页交互和动态内容生成方面非常有用。在使用这些方法时,应注意性能和浏览器兼容性,尤其是在处理大量DOM操作时,可能需要采用优化策略,如使用虚拟DOM库(如React)或批量修改DOM。