DOM(Document Object Model)是HTML或XML文档的编程接口,它把整个文档表示为一个树形结构,开发者可以通过DOM提供的API来操作这个树形结构,实现对文档的增删改查等操作。下面是DOM常见的操作以及对应的代码示例:
获取元素
可以通过document对象的各种方法获取文档中的元素,例如getElementById、getElementsByClassName、getElementsByTagName等。示例代码如下:
// 获取id为"myDiv"的元素
const myDiv = document.getElementById("myDiv");
// 获取class为"myClass"的所有元素
const myElements = document.getElementsByClassName("myClass");
// 获取所有p元素
const pElements = document.getElementsByTagName("p");
创建元素
可以使用createElement方法创建新的元素节点,使用appendChild方法将新元素添加到文档中。示例代码如下:
// 创建一个新的div元素,并设置其id属性为"myNewDiv"
const newDiv = document.createElement("div");
newDiv.id = "myNewDiv";
// 将新的div元素添加到body元素中
document.body.appendChild(newDiv);
修改元素属性
可以通过元素的属性来修改元素的属性值。示例代码如下:
// 获取id为"myDiv"的元素,并将其背景颜色设置为红色
const myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";
// 将id为"myDiv"的元素的文本内容修改为"Hello World"
myDiv.textContent = "Hello World";
修改元素内容
可以通过innerHTML属性来修改元素的HTML内容,或者通过textContent属性来修改元素的文本内容。示例代码如下:
// 获取id为"myDiv"的元素,并将其HTML内容修改为"<h1>Hello World</h1>"
const myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "<h1>Hello World</h1>";
// 将id为"myDiv"的元素的文本内容修改为"Hello World"
myDiv.textContent = "Hello World";
删除元素
可以使用removeChild方法从文档中删除元素。示例代码如下:
// 获取id为"myDiv"的元素,并从文档中删除它
const myDiv = document.getElementById("myDiv");
myDiv.parentNode.removeChild(myDiv);