DOM编程

var parent = document.getElementById("parentDiv");
var child = document.getElementById("childDiv");
parent.removeChild(child);  // 删除 childDiv 元素

DOM 编程简介

DOM（文档对象模型，Document Object Model） 是一个浏览器为网页提供的编程接口，它将 HTML 和 XML 文档解析成一个层次化的树结构，使开发者能够通过编程的方式动态地访问、操作和修改文档的内容、结构和样式。

1. DOM 的结构

• 树形结构: HTML 文档在 DOM 中被表示为节点树，文档的每个部分（标签、属性、文本内容等）都被表示为一个节点。这种结构允许程序以分层的方式访问和修改文档的各个部分。
  • 根节点: document 是 DOM 树的根节点，它代表整个 HTML 页面。
  • 元素节点: HTML 标签（如 <div>, <p>, <a> 等）是 DOM 树中的元素节点。
  • 文本节点: HTML 标签中的内容（如 Hello World）是文本节点。

2. DOM 的主要功能

• 访问元素: 可以通过各种方法访问 HTML 文档中的特定元素或节点，例如通过 getElementById、getElementsByClassName、querySelector 等。
• 修改元素: 可以动态改变页面的内容、样式、属性等。例如，可以更改文本、添加或删除元素、修改元素的 CSS 样式。
• 响应事件: DOM 允许绑定事件处理器，使网页能够对用户的输入或操作作出反应，例如点击按钮、移动鼠标或输入内容。

 

3. 常见的 DOM 操作

• 获取元素:

使用 document 对象的方法来查找和获取页面中的元素。

直接查找：

• document.getElementById("id"): 通过元素的 id 查找元素。
• document.getElementByTagName("TagName")：根据标签名获取多个同名元素。
• document.getElementByName("Name")：根据name属性值获取多个元素
• document.getElementByClassName("ClassName")：根据class属性获取多个元素

间接查找：

1. 通过父元素找到子元素

假设我们有一个嵌套的结构，并且想从父元素开始查找其子元素：

HTML:

<div id="parent"><p class="child">Child 1</p><p class="child">Child 2</p>
</div>

     // 获取父元素var parent = document.getElementById("parent");// 获取父元素的所有子元素var children = parent.children;  // 获取所有子元素，不包括文本节点// 打印第一个子元素的内容console.log(children[0].textContent);  // 输出 "Child 1"// firstElementChild 是用于获取某个元素的第一个子元素（不包括文本节点和空白节点）console.log(parent.firstElementChild); // 输出 "Child 1"// lastElementChild 是用于获取某个元素的最后一个子元素（不包括文本节点和空白节点）console.log(parent.lastElementChild);

2.通过子元素获取其父元素

常用的方法是 parentNode 或 parentElement。这两个属性都可以用于获取某个元素的父节点或父元素。两者的区别在于：

• parentNode：返回父节点（包括文本节点等所有类型的节点）。
• parentElement：只返回父元素节点（仅限 HTML 元素，不包括文本节点）。

示例代码：

HTML 结构：

<div id="parent"><p id="child">This is a child element.</p>
</div>

通过 JavaScript 获取父元素：

1. 使用 parentNode：

   // 获取子元素
   var child = document.getElementById("child");// 通过子元素获取父元素
   var parent = child.parentNode;// 输出父元素
   console.log(parent);  // 输出 <div id="parent">...</div>
   

2. 使用 parentElement：

   // 获取子元素
   var child = document.getElementById("child");// 通过子元素获取父元素
   var parent = child.parentElement;// 输出父元素
   console.log(parent);  // 输出 <div id="parent">...</div>
   

parentNode 和 parentElement 都

可以用于获取父元素，通常情况下它们的返回结果是相同的（即 HTML 元素）。

如果想要确保只获取父元素而不是其他类型的节点，建议使用 parentElement，因为它只会返回父元素节点。

 

3. 通过兄弟元素查找

如果知道某个元素，我们可以通过它的兄弟元素来找到其他相邻的元素：

<ul><li id="item1">Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

// 获取第一个列表项
var firstItem = document.getElementById("item1");// 获取下一个兄弟元素
var nextItem = firstItem.nextElementSibling;// 打印下一个兄弟元素的内容
console.log(nextItem.textContent);  // 输出 "Item 2"

•  对元素进行操作

1. 修改元素内容:

使用 textContent 或 innerHTML 属性修改元素的文本或 HTML 内容。

textContent/ innerText只能识别文本

innerHTML ：同时可以识别HTML代码

element.textContent = "New text": 修改元素的文本内容。element.innerHTML = "<p>New content</p>": 修改元素的 HTML 内容。

• 修改元素属性:

• 直接修改
  • 直接修改属性: 通过 JavaScript 的属性（如 element.id 或 element.value）直接修改或访问元素的标准属性。这种方式操作的是真实 DOM 中的属性值（即绑定在 DOM 对象上的属性），而 setAttribute 和 getAttribute 操作的是 HTML 标记中的属性值。

    <input type="text" id="in1" value="Hello">
    <button onclick="changeAttribute()">改变属性</button>
    

    function changeAttribute() {// 获取页面中 id 为 "in1" 的元素var in1 = document.getElementById("in1");// 获取元素的属性值console.log(in1.type);  // 输出元素的类型（如 "text" 或 "button"）console.log(in1.value); // 输出元素的值// 修改元素的属性值in1.type = "button";    // 将元素的类型改为按钮in1.value = "嗨";       // 将元素的值改为 "嗨"
    }
    

• 间接修改
  • 使用 setAttribute 和 getAttribute 修改或获取元素的属性。 功能: 这两个方法可以用于获取或设置元素的任何属性，无论该属性是否是标准的 HTML 属性

// element.setAttribute("class", "newClass"): 为元素添加或修改 class 属性。
// 设置一个标准属性
element.setAttribute("type", "button");
// 设置一个自定义属性
element.setAttribute("data-custom", "123");// 获取属性
console.log(element.getAttribute("type"));  // 输出 "button"
console.log(element.getAttribute("data-custom"));  // 输出 "123"

• 修改样式:

  element.style.color = "red": 改变元素的文本颜色。

        通过 style 属性动态修改元素的 CSS 样式。

• 事件处理:

使用 addEventListener 方法为元素添加事件监听器，响应用户的交互

为元素添加点击事件：

element.addEventListener("click", function() {alert("Clicked!"); 
})

• 增删元素：

1. 创建元素

 document.createElement(tagName):

 示例：

        用于创建一个新的 HTML 元素。

  tagName 是你要创建的元素类型，比如 div、p、span 等。

// 创建一个新的 <div> 元素
var newDiv = document.createElement("div");// 为新元素设置一些内容或属性
newDiv.textContent = "This is a new div";
newDiv.setAttribute("class", "new-div-class");// 将新创建的元素添加到 DOM 中（见下一节）

2. 将元素添加到 DOM

• element.appendChild(child):

  • 将一个子元素追加到指定元素的最后一个子节点位置。
  • child 是你要添加的元素对象。

var parent = document.getElementById("parentDiv");  // 获取父元素
parent.appendChild(newDiv);  // 将之前创建的 div 添加到父元素中

element.insertBefore(newElement, referenceElement):

• 将新的元素插入到参考元素 referenceElement 之前。
• referenceElement 是已经存在的子元素，newElement 是要插入的新元素。

示例：

var newParagraph = document.createElement("p");
newParagraph.textContent = "Inserted paragraph";var referenceElement = document.getElementById("referenceDiv");
document.body.insertBefore(newParagraph, referenceElement);

3. 替换元素

• parentElement.replaceChild(newChild, oldChild):

  • 替换子元素，用新元素替换指定的现有子元素。
  • newChild 是要插入的新元素，oldChild 是要替换的旧元素。

var newDiv = document.createElement("div");
newDiv.textContent = "This is a new div";var oldDiv = document.getElementById("oldDiv");
oldDiv.parentNode.replaceChild(newDiv, oldDiv);  // 用 newDiv 替换 oldDiv

4. 删除元素

• parentElement.removeChild(child):

  • 从父元素中删除某个子元素。
  • child 是你要删除的子元素，必须是 parentElement 的直接子节点。

  示例：

  var parent = document.getElementById("parentDiv");
  var child = document.getElementById("childDiv");
  parent.removeChild(child);  // 删除 childDiv 元素
  

  element.remove():

• 直接删除当前元素，无需指定父元素。
• 这是现代浏览器中比较常用的方法。

  var element = document.getElementById("childDiv");
  element.remove();  // 直接删除 childDiv 元素
  

5.常见的清空元素的方法

1. innerHTML = ""

• 原理: 将元素的 innerHTML 属性设置为空字符串，清空该元素的所有子元素和内容。
• 优点: 简单快捷。
• 缺点: 会重新解析整个元素，可能对性能有一定影响，尤其是在包含大量子元素的情况下。

var parent = document.getElementById("parentDiv");
parent.innerHTML = "";  // 清空 parentDiv 的所有内容

2.  使用 while 循环移除子元素

• 原理: 通过循环删除元素的第一个子元素，直到该元素不再有子节点。该方法仅操作 DOM，不涉及重新解析 HTML，因此对性能影响较小，适用于较大 DOM 树的清空操作。
• 优点: 逐一删除子节点，对性能相对友好。

  var parent = document.getElementById("parentDiv");// 循环删除子元素
  while (parent.firstChild) {parent.removeChild(parent.firstChild);
  }