在JavaScript中,你可以使用一系列方法来访问已存在的DOM节点以及创建新的DOM节点。下面是常用的访问和创建DOM节点的方法:
访问已存在的节点:
- getElementById(id):通过元素的id属性获取对应的DOM节点。
var element = document.getElementById('myElement'); - getElementsByClassName(className):通过元素的class属性获取所有具有相同类名的DOM节点,返回一个HTMLCollection对象。
var elements = document.getElementsByClassName('myClass'); - getElementsByTagName(tagName):通过元素的标签名获取所有具有相同标签名的DOM节点,返回一个HTMLCollection对象。
var elements = document.getElementsByTagName('div'); - querySelector(selector):通过CSS选择器选择一个满足条件的DOM节点,返回第一个匹配的元素。
var element = document.querySelector('.myClass'); - querySelectorAll(selector):通过CSS选择器选择所有满足条件的DOM节点,返回一个NodeList对象。
var elements = document.querySelectorAll('div.myClass'); - parentNode 和 childNodes:通过节点的
parentNode属性可以访问其父节点,通过childNodes属性可以访问其子节点列表。 - nextSibling 和 previousSibling:通过节点的
nextSibling属性可以访问下一个兄弟节点,通过previousSibling属性可以访问前一个兄弟节点。
创建新的节点:
- createElement(tagName):创建一个新的HTML元素节点。
var newElement = document.createElement('div'); - createTextNode(text):创建一个包含文本内容的文本节点。
var textNode = document.createTextNode('Hello, World!'); - appendChild(node):将一个已创建的节点作为子节点添加到另一个节点的子节点列表中。
parentElement.appendChild(newElement); - insertBefore(newNode, referenceNode):将一个已创建的节点插入到另一个节点的子节点列表中的指定位置之前。
parentElement.insertBefore(newElement, referenceElement); - replaceChild(newNode, oldNode):用一个已创建的节点替换另一个节点的子节点。
parentElement.replaceChild(newElement, oldElement); - removeChild(node):从父节点中移除指定的子节点。
parentElement.removeChild(childElement);
这些方法允许你在JavaScript中操作和修改DOM树,以实现动态的网页交互和内容更新。