JavaScript-----操作DOM对象

技术2024-06-16 76

前言

了解完BOM对象的操作后，我们今天继续谈一谈关于DOM对象的操作。

1. DOM对象

浏览器网页是一个DOM的树形结构。JavaScript对它的操作主要有4个方面：

[1] 遍历Dom节点 (查询) 获取的方式有三种，对应于我们CSS的选择器。通过标签名，类名获取到的是一个数组，通过id获取到的才是唯一一个元素。

getElementsByTagName(); //通过标签名获取 getElementById(); //通过Id获取 getElementsByClassName(); //通过类名获取

具体例子：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="father"> <h1>标题一</h1> <p id = "p1">p1</p> <p class = "p2">p2</p> </div> <script> //对应css选择器 //当下标为0获取的是我们的第一个元素 var h1 = document.getElementsByTagName("h1")[0]; var p1 = document.getElementById("p1"); var p2 = document.getElementsByClassName("p2")[0]; var father = document.getElementById("father"); //获得父节点下的所有字节点 var childrens =father.children; </script> </body> </html>

[2] 更新Dom节点 (修改) 操作文本的方法有两个: innerText（遇到特殊字符不转义）和 innerHTML(遇到特殊字符可以转义) 相关实例：

<div id ="id1"> </div> <script> var id1 = document.getElementById("id1"); id1.innerText = '456' //修改文本的值 id1.innerHTML = '<strong>123</strong>' //可以解析Html文本标签 </script>

操作css的相关方法：

id1.style.color='red'; //属性使用字符串包裹（颜色） id1.style.fontSize = '50px'; // - 转驼峰命名问题 (字体大小) id1.style.padding ='2em'; // 边距

[3] 删除 Dom节点（删除）删除节点的步骤：先获得父节点，再通过父节点删除自己。使用removeChild(节点)

<div id="father"> <h1>标题一</h1> <p id = "p1">p1</p> <p class = "p2">p2</p> </div> <script> /*获取要删除的节点*/ var p1 = document.getElementById("p1"); /*获取它的父节点*/ var parent = p1.parentElement; /*使用removeChild进行删除*/ parent.removeChild(p1); </script>

删除节点是一个动态的过程。父节点可能有多个子节点，删除children的时候，下标是时刻变化的，所以一定要注意循环的书写。

[4] 添加一个Dom节点 (添加) 在上面修改的例子中，我们知道如果获取到的某个Dom节点是空的，就可以通过innerHTML或innerText增添一个元素。但是如果这个Dom节点元素已经存在了，再这样写就会产生覆盖。(所以下面会排除这种情况) <1> 移动节点 append() 把js节点移动到div中。

<p id = "js">JavaScript</p> <div id = "list"> <p id = "se">JavaSE</p> <p id = "ee">JavaEE</p> <p id = "me">JavaME</p> </div> <script> var js = document.getElementById("js"); //已存在的节点 var list = document.getElementById("list"); list.append(js); </script>

运行后的结果：实现位置的变更还可以使用

insertBefore(newItem,existingItem);

document.getElementById(“myList”).insertBefore(Water,Coffee); 插入之前：插入之后： <2> 创建一个新标签，实现插入。

createElement() 创建一个子元素 appendChild() 扩展一个字节点