前端技术对JavaScript中DOM的学习

DOM

目录

DOM树结构

  1. 根节点（Root Node）：在HTML文档中，<html>元素是整个DOM树的根节点。它包含了文档的所有其他部分。
  2. 元素节点（Element Node）：这些节点对应了HTML或XML文档中的标签，如<body>、<p>等。元素节点可以有子节点，包括其他元素节点、文本节点或注释节点等。
  3. 文本节点（Text Node）：这些节点包含了元素或属性中的文本内容。在HTML文档中，<p>Hello, world!</p>中的"Hello, world!"就是一个文本节点。
  4. 属性节点（Attribute Node）：虽然在现代的DOM实现中，属性通常不直接表现为DOM树中的节点（它们是通过元素节点的属性或方法来访问的），但在早期的DOM规范中，属性被视为节点。在更现代的实践中，我们通过元素节点的属性（如element.getAttribute()或element.setAttribute()）来操作属性。
  5. 注释节点（Comment Node）：这些节点表示HTML或XML文档中的注释，例如<!-- 这是一个注释 -->。
  6. 文档节点（Document Node）：这代表了整个文档，它是DOM树中的顶级节点，虽然它本身不直接显示在树状图中，但它是访问整个DOM树的入口点。

示例：

复制代码
<!DOCTYPE html>  
<html>  
<head>  
    <title>示例页面</title>  
</head>  
<body>  
    <p>这是一个段落。</p>  
</body>  
</html>

对应的DOM树结构会是这样的：

  • Document（文档节点，非直接显示）
    • html（元素节点，根节点）
      • head（元素节点）
        • title（元素节点）
          • 文本节点（内容为“示例页面”）
      • body（元素节点）
        • p（元素节点）
          • 文本节点（内容为“这是一个段落。”）

通过DOM API，我们可以访问、修改或删除这个树中的任何节点，从而动态地改变网页的内容和结构。

获取DOM对象

1.通过ID获取：如果你知道元素的ID，可以使用document.getElementById()方法。这是最直接且常用的方法之一。

复制代码
var element = document.getElementById("myElementId");

这里，"myElementId"是你要获取的元素的ID。

2.通过类名获取：如果你想要获取具有特定类名的所有元素，可以使用document.getElementsByClassName()方法。注意，这个方法返回的是一个HTMLCollection，即使只有一个匹配的元素也是如此。

复制代码
var elements = document.getElementsByClassName("myClassName");  
// 访问第一个元素  
var firstElement = elements[0];

3.通过标签名获取：如果你想要获取文档中所有的特定标签（如<p>、<div>等），可以使用document.getElementsByTagName()方法。同样，这个方法也返回一个HTMLCollection。

复制代码
var elements = document.getElementsByTagName("p");  
// 访问第一个<p>元素  
var firstParagraph = elements[0];
  1. 通过css选择器获取：现代浏览器支持document.querySelector()和document.querySelectorAll()方法，它们允许你使用CSS选择器来获取DOM元素。querySelector()返回第一个匹配的元素，而querySelectorAll()返回一个NodeList，包含所有匹配的元素。
复制代码
// 获取第一个匹配的元素  
var element = document.querySelector(".myClassName");  
  
// 获取所有匹配的元素  
var elements = document.querySelectorAll(".myClassName");  
// 访问第一个元素  
var firstElement = elements[0];

更新DOM对象

1.修改属性：你可以直接修改DOM元素的属性来更新它。例如，修改元素的className、style、textContent等。

复制代码
// 修改元素的类名  
var element = document.getElementById("myElementId");  
element.className = "newClassName";  
  
// 修改元素的样式  
element.style.color = "red";  
  
// 修改元素的文本内容  
element.textContent = "新的文本内容";

2.替换内容：使用innerHTML属性可以替换元素内部的所有内容，包括子元素和文本。但请注意，这可能会导致性能问题，并且如果内容包含用户输入，还可能引起XSS攻击。

复制代码
// 替换元素内部的所有内容  
element.innerHTML = '<p>新的HTML内容</p>';

插入DOM对象

你可以使用appendChild()、insertBefore()等方法来插入新的子节点，或者使用removeChild()来删除子节点。

复制代码
// 创建一个新的元素  
var newElement = document.createElement("div");  
newElement.textContent = "新元素";  
  
// 将新元素添加到现有元素的末尾  
element.appendChild(newElement);  
  
// 或者，在指定元素之前插入新元素  
var referenceElement = document.getElementById("referenceElementId");  
element.insertBefore(newElement, referenceElement);

删除DOM对象

使用removeChild()来删除子节点。

复制代码
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

HTML 文档中

元素包含两个子节点 (两个

元素):

复制代码
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

查找 id="div1" 的元素:

复制代码
var parent = document.getElementById("div1");

查找 id="p1" 的

元素:

复制代码
var child = document.getElementById("p1");

从父元素中移除子节点：

复制代码
parent.removeChild(child);

以下代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）：

复制代码
var child = document.getElementById("p1");
posted @   BingBing爱化学-04044  阅读(9)  评论(0)  编辑  收藏  举报
相关博文：
· 前端技术对html的学习2
· 前端技术对JavaScript的事件学习
· 04_JavaScript DOM编程_基础篇
· DOM的相关操作
· JavaScript中的DOM
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 葡萄城 AI 搜索升级：DeepSeek 加持，客户体验更智能
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
点击右上角即可分享
微信分享提示