DOM操作(Document Object Model 文档对象模型)指的是通过JavaScript来操作网页的结构和内容。DOM提供了一种以文档树形式表示HTML或XML文档的方式,可以使用JavaScript来访问和修改网页的元素、属性和文本内容,且提供了一系列的函数和对象来实现增、删、改、
一、节点
DOM节点是HTML文档中的各个元素和文本的表示。在DOM树中,每个元素、文本和注释都被表示为一个节点对象。DOM节点是一个对象,它有属性和方法用于操作和控制该节点。
DOM节点可以分为以下几种类型:
元素节点(Element Node):表示HTML文档中的HTML元素,如<div>、<p>等。元素节点可以有子节点和属性。通过标签名来访问元素节点。
文本节点(Text Node):表示HTML文档中的文本内容,如文本节点内的文字、空格等。文本节点是元素节点的子节点,通过textContent属性来访问文本节点的内容。
属性节点(Attribute Node):表示HTML元素的属性,如class、id、src等。属性节点是元素节点的属性,通过getAttribute()和setAttribute()方法来获取和设置属性的值。
文档节点(Document Node):表示整个HTML文档,即根节点。文档节点是最顶层的节点,可以通过document对象来访问。
现在知道了解了节点,接下来可以通过操作DOM节点,可以实现对HTML文档的增删改查等操作,灵活控制页面的内容和样式。
二、节点的获取
在JavaScript中,可以使用各种方法来获取DOM节点。以下通过例子来展示一些常见的方法:
在htm页面l<body>标签下创建三个p标签 ,接下来通过操作JS来展示方法:
<p class="pp">我是段落1</p>
<p class="pp">我是段落2</p>
<p class="pp" id="p3">我是段落3</p>
1. getElementsByTagName(tagName):通过元素的标签名获取节点。该方法返回一个节点列表,表示所有具有指定标签名的元素(若有多个相同标签,返回含有多个节点的类数组对象)。
例如:
const p1 = document.getElementsByTagName("p");
console.log(p1);
console.log(p1[0]);
console.log(p1[1]);
运行结果:
2. getElementsByClassName(className):通过元素的类名获取节点。该方法返回一个节点列表,表示所有具有指定类名的元素(若有多个相同class,返回含有多个节点的类数组对象)。
例如:
const p2 = document.getElementsByClassName("pp");
console.log(p2);
console.log(p2[0]);
console.log(p2[1]);
console.log(p2[2]);
运行结果:
3. getElementById(id):通过元素的id属性获取节点。该方法返回一个节点对象,该对象表示具有指定id的元素。
例如:
const p3 = document.getElementById("p3");
console.log(p3);
运行结果:
4. querySelector(selector):通过CSS选择器获取单个节点。该方法返回一个节点对象,表示匹配指定CSS选择器的第一个元素(返回第一个匹配上的节点)。
例如:
const p5 = document.querySelector(".pp");
console.log(p5);
运行结果:
5. querySelectorAll(selector):通过CSS选择器获取多个节点。该方法返回一个节点列表(NodeList对象),表示匹配指定CSS选择器的所有元素(包含所有匹配给定选择器的节点)。
例如:
const p4 = document.querySelectorAll(".pp");
console.log(p4);
console.log(p4[0]);
console.log(p4[1]);
console.log(p4[2]);
运行结果:
6. parentNode:通过节点的parentNode属性获取其父节点。(补充)
例如:
var childNode = document.getElementById("p3");
var parentNode = childNode.parentNode;
console.log(parentNode); // 输出父节点对象
// 修改父节点的样式
parentNode.style.backgroundColor = "red";
运行结果:
<body>标签背景样式也变成了红色
7. childNodes:通过节点的childNodes属性获取其子节点列表。(补充)
例如:
var parentNode = document.getElementById("p3");
var childNodes = parentNode.childNodes;
console.log(childNodes); // 输出子节点的集合
运行结果:
三、 节点的属性修改
要修改节点的属性,可以通过以下几种方式,下面通过实例来展示:
实验一、 查看属性和修改属性
首先在htm页面l<body>标签下创建节点以供操作
<p class="pp" id="p3">我是段落3</p>
1.根据id获取节点
const p = document.getElementById("p3");
console.log(p);
通过getElementById方法获取了一个id为"p3"的节点对象,由控制台输出
2.查看标签节点的属性
console.log(p.id);
console.log(p.className);
由控制台输出节点对象的id属性(id)和class属性(className)
3.修改节点的id属性
3.1 直接通过节点对象的属性来进行修改
p.id = "_p_3";
console.log(p.id);
3.2 使用setAttribute方法来修改节点的属性。这个方法接受两个参数,第一个参数是要修改的属性名,第二个参数是要修改的属性值
p.setAttribute("id", "newId");
console.log(p.id);
4.修改节点的class属性
p.className = "pp jj yy xx";
console.log(p.className);
实验二、 classList对象的操作
首先在htm页面l<body>标签下创建节点以供操作
<p class="pp jj yy xx" id="p4">我是段落4</p>
1.根据id获取节点
通过getElementById方法获取了一个id为"p4"的节点对象
const p4 = document.getElementById("p4");
console.log(p4.classList);
console.log(p4.classList[0]);
2.为classList添加一个新的class名
p4.classList.add("zz");
console.log(p4.classList);
3.为classList移除一个class名
p4.classList.remove("xx");
console.log(p4.classList);
4. 检查classList中是否存在某个class名,返回布尔值。
console.log(p4.classList.contains("jj"));
console.log(p4.classList.contains("xx"));
实验三.、 其他属性的查看与修改(以<img>标签为例)
首先在htm页面l<body>标签下创建节点以供操作
<img src="./img_src/logo.png" alt="图片加载失败" id="img1">
通过getElementById方法获取了一个id为"img1"的节点对象,
然后使用 i.src = "./img_src/logo1.png"修改
const i = document.getElementById("img1");
i.src = "./img_src/logo1.png"; // 修改src属性
四、节点的创建与插入
创建节点
1. createElement(tagName): 创建一个具有指定标签名的元素节点。
示例:
//创建一个<p>标签节点
var p4 = document.createElement("p");
2. createTextNode(text): 创建一个包含指定文本内容的文本节点。
示例:
//创建一个文本节点
var t4 = document.createTextNode("我是段落5");
3. createAttribute(attribute):用于创建一个属性节点。
示例:
var a4 = document.createAttribute("class"); // 创建属性节点
a4.value = "fruit"; // 为属性节点赋值
插入节点
1. appendChild(node): 将一个节点插入到另一个节点的子节点列表的末尾。
示例:
//将文本节点作为子节点,加入新建的<p>标签节点下面
p4.appendChild(t4);
2. setAttributeNode(node):将一个属性节点添加到元素节点中。
示例:
//将属性节点插入新建的<p>标签节点
p4.setAttributeNode(a4);
通过getElementsByTagName方法获取了一个标签为"body"的节点对象,将已经配置号的<p>标签节点,作为子节点,插入body节点中
const body_node = document.getElementsByTagName("body")[0];
body_node.appendChild(p4);
这样一个节点就创建好啦!
五、CSS样式的修改
要修改元素的CSS样式,可以使用元素的style属性。style属性是一个对象,可以通过其属性来修改元素的CSS样式。
示例:
首先创建节点及其属性以供操作
<head>
<style>
.box{
width: 50%;
height: 200px;
color:blue;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="box" id="div1">利用js修改CSS样式</div>
</body>
首先通过document.getElementById方法获取到id为"div1"的元素。然后,通过元素的style属性来修改元素的背景颜色、文字颜色和字体大小。可以直接给style属性的属性赋值,将其值设置为对应的CSS样式值。
var e = document.getElementById("div1");
e.style.backgroundColor = "red";
e.style.color = "white";
e.style.fontSize = "30px";
运行结果:
还有另一种方法也可以修改CSS样式:直接修改该节点的CSS代码
利用反引号来解决过长字符串的换行问题,以提高阅读性(反引号:英文输入法下,按左上角那个键)
var e = document.getElementById("div1");
e.style.cssText =
`
background-color: gray;
color:green;
font-size: 50px;
`;
运行结果: