Javascript基础-DOM详解

✊不积跬步，无以至千里；不积小流，无以成江海。

DOM获取元素、遍历元素、DOM元素属性

在JavaScript中，可以使用DOM（文档对象模型）来获取、遍历和操作HTML元素及其属性。下面是一些常见的操作：

1. 获取元素：

   可以使用以下方法获取HTML元素：

   • getElementById: 根据元素的ID获取单个元素。
   • getElementsByClassName: 根据类名获取一组元素。
   • getElementsByTagName: 根据标签名获取一组元素。
   • querySelector: 使用CSS选择器获取单个元素。
   • querySelectorAll: 使用CSS选择器获取一组元素。

   示例：

// 获取ID为 "myElement" 的元素
let element1 = document.getElementById("myElement");

// 获取类名为 "myClass" 的一组元素
let elements2 = document.getElementsByClassName("myClass");

// 获取所有的 <div> 元素
let elements3 = document.getElementsByTagName("div");

// 获取第一个匹配的类名为 "myClass" 的元素
let element4 = document.querySelector(".myClass");

// 获取所有匹配的类名为 "myClass" 的元素
let elements5 = document.querySelectorAll(".myClass");

1. 遍历元素：
   可以使用循环或迭代方法来遍历元素集合或父子节点。

// 遍历元素集合
let elements = document.getElementsByClassName("myClass");
for (let i = 0; i < elements.length; i++) {
  // 处理每个元素
  console.log(elements[i].textContent);
}

// 遍历父子节点
let parentElement = document.getElementById("parent");
let childElements = parentElement.children;
for (let i = 0; i < childElements.length; i++) {
  // 处理每个子元素
  console.log(childElements[i].textContent);
}

1. DOM元素属性：
   可以使用属性来获取或修改元素的特性和值。

示例：

let element = document.getElementById("myElement");

// 获取元素属性值
let value = element.getAttribute("attributeName");

// 设置元素属性值
element.setAttribute("attributeName", "attributeValue");

// 移除元素属性
element.removeAttribute("attributeName");

// 获取元素的文本内容
let textContent = element.textContent;

// 设置元素的文本内容
element.textContent = "New Text Content";

在以上示例中，getAttribute 用于获取元素的属性值，setAttribute 用于设置元素的属性值，removeAttribute 用于移除元素的属性，textContent 用于获取或设置元素的文本内容。

文字描述关于dom的定义：

Reference：『developer.mozilla.org/zh-CN/docs/... 』

DOM 是文档对象模型（Document Object Model）的缩写。它是一个用于访问和操作 HTML 文档的标准 API。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。

DOM 由多个 API 构建，它们一起工作。核心 DOM 定义了描述任何文档和其中对象的实体。其他 API 会根据需要对其进行扩展，为 DOM 增加新的特性和功能。例如，HTML DOM API 为核心 DOM 增加了对表示 HTML 文档的支持，而 SVG API 增加了对表示 SVG 文档的支持。

DOM 的主要功能包括：

• 创建和修改 HTML 元素
• 获取和设置 HTML 元素的属性
• 添加和删除 HTML 元素
• 遍历 HTML 元素
• 处理 HTML 事件

DOM 是 JavaScript 中最重要的 API 之一。它允许 JavaScript 程序员与 HTML 文档进行交互，从而创建动态和交互式的 Web 应用程序。

DOM 的组成

DOM 由以下几个部分组成：

• 节点：节点是 DOM 中的基本构建块。每个节点表示 HTML 文档中的一项元素，例如元素、属性、文本节点或注释。
• 对象：节点可以表示为对象。这些对象具有属性和方法，可以用于访问和操作节点。
• 模型：模型是 DOM 的抽象表示。它提供了一种访问和操作节点的方法，而无需考虑它们在 HTML 文档中的实际位置。

DOM 的访问

DOM 可以通过 JavaScript 访问。JavaScript 提供了一系列方法和属性来访问 DOM 中的节点和对象。

DOM 的操作

DOM 可以通过 JavaScript 操作。JavaScript 提供了一系列方法和属性来创建、修改、添加和删除 DOM 中的节点和对象。

DOM 的用途

DOM 可以用于以下用途：

• 创建和修改 HTML 元素
• 获取和设置 HTML 元素的属性
• 添加和删除 HTML 元素
• 遍历 HTML 元素
• 处理 HTML 事件

DOM 的优势

DOM 具有以下优势：

• 它提供了一种标准的方法来访问和操作 HTML 文档。
• 它可以用于创建动态和交互式的 Web 应用程序。
• 它是 JavaScript 中最重要的 API 之一。

DOM 的劣势

DOM 具有以下劣势：

• 它可能很复杂，难以理解。
• 它可能很慢，尤其是在处理大型文档时。

事件绑定

JavaScript中的事件绑定是将事件与特定元素相关联的过程。它代表着在网页中的用户交互时，能够触发JavaScript代码。

事件绑定可以通过斯种方式实现：

• 使用特定的事件属性

常见的事件属性有：

• onclick：单击事件

• onmouseover：鼠标悬停事件

• onmouseout：鼠标离开事件

• onkeydown：键盘按下事件

• onkeyup：键盘释放事件

• 使用addEventListener方法：

  addEventListener方法可以在元素上添加事件监听器，以便在事件触发时执行相应的处理函数。

  示例：

let button = document.getElementById("myButton");

button.addEventListener("click", function() {
  // 处理点击事件
  console.log("Button clicked");
});

在上述示例中，当按钮被点击时，匿名函数将被执行。

• 使用HTML属性：

  也可以通过HTML属性直接指定事件处理函数。

示例：

<button onclick="handleClick()">Click me</button>

//javascript
function handleClick() {
  // 处理点击事件
  console.log("Button clicked");
}

在上述示例中，点击按钮时将调用名为 handleClick 的函数。

• 使用事件委托：

  事件委托是一种技术，可以将事件处理程序附加到父元素上，而不是直接附加到每个子元素上。这样可以减少事件处理程序的数量，并且在动态添加/移除子元素时仍然有效。

示例：

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

//javascript
let list = document.getElementById("myList");

list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    // 处理列表项点击事件
    console.log("List item clicked:", event.target.textContent);
  }
});

在上述示例中，通过在父元素上绑定点击事件，可以捕获到列表项的点击事件，并执行相应的处理函数。

总结

这些是常见的事件绑定方法，可以根据需要选择适合的方法来绑定事件和处理函数。事件绑定的目的是将事件与相应的处理函数关联起来，使其能够在特定条件下触发并执行相应的操作。开发者可以根据具体的需求选择合适的事件绑定方法来实现交互效果和功能。

以下是一些常见的事件绑定应用场景：

• 点击事件：用于处理用户点击元素的事件。例如，点击按钮可以执行某个操作。
• 鼠标事件：用于处理用户鼠标操作的事件。例如，鼠标悬停在元素上可以显示提示信息。
• 键盘事件：用于处理用户键盘操作的事件。例如，按下某个键可以执行某个操作。

通过事件绑定，开发者可以实现丰富的用户交互效果和功能，使网页更加动态和灵活。

DOM创建和追加

DOM创建和追加是指在JavaScript中创建新的DOM节点并将其添加到现有DOM节点中的过程。这是一种常用的JavaScript技术，用于动态生成HTML内容或更新现有HTML内容。

创建DOM节点

要创建新的DOM节点，可以使用document.createElement()方法。该方法接受一个字符串参数，表示要创建的节点的名称。例如，以下代码将创建一个名为div的元素：

const div = document.createElement("div");

document.createElement()方法返回一个Element对象，表示新创建的节点。

添加DOM节点

要将DOM节点添加到现有DOM节点中，可以使用appendChild()方法。该方法接受一个节点对象作为参数，表示要添加的节点。例如，以下代码将div元素添加到body元素中：

const body = document.querySelector("body");
body.appendChild(div);

appendChild()方法将div元素添加到body元素的子节点列表中。

示例：

以下代码创建一个名为div的元素，并将其添加到body元素中：

const body = document.querySelector("body");
const div = document.createElement("div");
div.textContent = "Hello, world!";
body.appendChild(div);

这段代码将生成以下HTML：

<body>
  <div>Hello, world!</div>
</body>

其他方法

除了appendChild()方法之外，还可以使用以下方法来添加DOM节点：

• insertBefore()：将节点插入到另一个节点之前。
• replaceChild()：将一个节点替换为另一个节点。
• innerHTML：将字符串的内容设置为元素的内容。

注意事项

在添加DOM节点之前，必须先获取该节点的父元素。可以使用querySelector()或querySelectorAll()方法来获取父元素。

总结

DOM创建和追加是JavaScript中常用的技术，用于动态生成HTML内容或更新现有HTML内容。通过掌握这些技术，可以实现更加丰富和灵活的网页交互效果。

关于createDocumentFragment的测试

createDocumentFragment()方法用于创建一个空的DocumentFragment对象。DocumentFragment对象是Node对象的子类，但它不属于文档树。它可以用来存储多个DOM节点，然后一次性将它们添加到文档树中。

测试createDocumentFragment()方法

以下是一些测试createDocumentFragment()方法的示例：

• 创建一个空的DocumentFragment对象：

const fragment = document.createDocumentFragment();

• 将DOM节点添加到DocumentFragment对象中：：

const div = document.createElement("div");
div.textContent = "Hello, world!";

fragment.appendChild(div);

• 将DocumentFragment对象添加到文档树中：

const body = document.querySelector("body");
body.appendChild(fragment);

这段代码将生成以下HTML：

<body>
  <div>Hello, world!</div>
</body>

测试DocumentFragment对象的属性和方法

DocumentFragment对象具有以下属性和方法：

• childNodes属性：返回一个包含所有子节点的数组。
• appendChild()方法：将一个节点添加到DocumentFragment对象的末尾。
• insertBefore()方法：将一个节点插入到另一个节点之前。
• replaceChild()方法：将一个节点替换为另一个节点。

以下是一些测试DocumentFragment对象属性和方法的示例：

• 获取DocumentFragment对象的所有子节点：

const fragment = document.createDocumentFragment();

const div = document.createElement("div");
div.textContent = "Hello, world!";

fragment.appendChild(div);

const childNodes = fragment.childNodes;

console.log(childNodes); // [<div>Hello, world!</div>]

• 将一个节点添加到DocumentFragment对象的末尾：

const fragment = document.createDocumentFragment();

const div = document.createElement("div");
div.textContent = "Hello, world!";

fragment.appendChild(div);

const newDiv = document.createElement("div");
newDiv.textContent = "Goodbye, world!";

fragment.appendChild(newDiv);

console.log(fragment); // <div>Hello, world!</div><div>Goodbye, world!</div>

• 将一个节点插入到另一个节点之前：

const fragment = document.createDocumentFragment();

const div1 = document.createElement("div");
div1.textContent = "Hello, world!";

const div2 = document.createElement("div");
div2.textContent = "Goodbye, world!";

fragment.appendChild(div1);
fragment.insertBefore(div2, div1);

console.log(fragment); // <div>Goodbye, world!</div><div>Hello, world!</div>

• 将一个节点替换为另一个节点：

const fragment = document.createDocumentFragment();

const div1 = document.createElement("div");
div1.textContent = "Hello, world!";

const div2 = document.createElement("div");
div2.textContent = "Goodbye, world!";

fragment.appendChild(div1);
fragment.replaceChild(div2, div1);

console.log(fragment); // <div>Goodbye, world!</div>

总结

createDocumentFragment()方法和DocumentFragment对象是JavaScript中创建和操作DOM节点的一种有效方式。通过掌握这些技术，可以实现更加灵活和高效的网页交互效果。

DOM移动、替换、删除、DOM交换

DOM移动、替换、删除、DOM交换是JavaScript中操作DOM节点的常见操作。

DOM移动

DOM移动是指将一个DOM节点从一个位置移动到另一个位置。可以使用insertBefore()或replaceChild()方法来实现DOM移动。

• insertBefore()方法将一个节点插入到另一个节点之前。
• replaceChild()方法将一个节点替换为另一个节点。

以下是使用insertBefore()方法将一个DOM节点移动到另一个位置的示例：

const body = document.querySelector("body");

const div1 = document.createElement("div");
div1.textContent = "Hello, world!";

const div2 = document.createElement("div");
div2.textContent = "Goodbye, world!";

body.appendChild(div1);
body.appendChild(div2);

body.insertBefore(div2, div1);

这段代码将生成以下HTML：

<body>
  <div>Goodbye, world!</div>
  <div>Hello, world!</div>
</body>

DOM替换

DOM替换是指将一个DOM节点替换为另一个DOM节点。可以使用replaceChild()方法来实现DOM替换。

以下是使用replaceChild()方法将一个DOM节点替换为另一个DOM节点的示例：

const body = document.querySelector("body");

const div1 = document.createElement("div");
div1.textContent = "Hello, world!";

const div2 = document.createElement("div");
div2.textContent = "Goodbye, world!";

body.appendChild(div1);

body.replaceChild(div2, div1);

这段代码将生成以下HTML：

<body>
  <div>Goodbye, world!</div>
</body>

DOM删除

DOM删除是指从文档树中删除一个DOM节点。可以使用removeChild()方法来实现DOM删除。

以下是使用removeChild()方法删除一个DOM节点的示例：

const body = document.querySelector("body");

const div = document.createElement("div");
div.textContent = "Hello, world!";

body.appendChild(div);

body.removeChild(div);

这段代码将生成以下HTML：

<body>
</body>

DOM交换

DOM交换是指将两个DOM节点的顺序进行交换。可以使用insertBefore()方法来实现DOM交换。

代码如上～

注意事项

在进行DOM操作时，需要注意以下几点：

• 在添加或删除DOM节点之前，必须先获取该节点的父元素。可以使用querySelector()或querySelectorAll()方法来获取父元素。
• 在替换DOM节点时，必须指定要替换的节点。
• 在删除DOM节点时，必须指定要删除的节点。

通过掌握DOM移动、替换、删除、DOM交换等操作，可以实现更加灵活和丰富的网页交互效果。

DOM属性操作

在JavaScript中，可以使用DOM属性来获取和修改HTML元素的属性。以下是一些常见的DOM属性操作方法：

1. 获取属性值：
   可以使用以下方法获取元素的属性值：

let element = document.getElementById("myElement");

let attributeValue = element.getAttribute("attributeName");
let propertyValue = element.propertyName;

例如，要获取一个按钮元素的disabled属性值：

let button = document.getElementById("myButton");

let disabledValue = button.getAttribute("disabled");
console.log(disabledValue); // 输出: "true" 或 null

在上述示例中，getAttribute方法用于获取指定属性的值。

1. 设置属性值：
   可以使用以下方法设置元素的属性值：

let element = document.getElementById("myElement");

element.setAttribute("attributeName", "attributeValue");
element.propertyName = propertyValue;

例如，要将一个按钮元素的disabled属性设置为true：

let button = document.getElementById("myButton");

button.setAttribute("disabled", "true");

在上述示例中，setAttribute方法用于设置指定属性的值。

1. 移除属性：
   可以使用以下方法移除元素的属性：

let element = document.getElementById("myElement");

element.removeAttribute("attributeName");

例如，要移除一个按钮元素的disabled属性：

let button = document.getElementById("myButton");

button.removeAttribute("disabled");

在上述示例中，removeAttribute方法用于移除指定的属性。

需要注意的是，有些属性可以通过DOM属性直接访问（如element.value），而不需要使用getAttribute和setAttribute方法。

另外，DOM属性还可用于访问元素的其他信息，如element.textContent用于获取或设置元素的文本内容，element.style用于访问和修改元素的样式属性等。

通过操作DOM属性，可以对HTML元素及其属性进行读取、修改和删除操作，以实现动态的页面交互和内容更新。

style操作、class操作

在JavaScript中，可以使用DOM来操作元素的样式（style）和类名（class）。以下是一些常见的操作方法：

1. 操作样式（style）：

   • 获取样式属性值：
     可以使用元素的style属性来获取样式属性的值。

let element = document.getElementById("myElement");
let propertyValue = element.style.propertyName;

例如，要获取一个元素的背景颜色：

let element = document.getElementById("myElement");
let backgroundColor = element.style.backgroundColor;

• 设置样式属性值：
  可以使用元素的style属性来设置样式属性的值。

let element = document.getElementById("myElement");
element.style.propertyName = propertyValue;

例如，要将一个元素的背景颜色设置为红色：

let element = document.getElementById("myElement");

element.style.backgroundColor = "red";

注意：style属性中只能访问和设置内联样式（inline style），无法获取或修改外部样式表或内部样式表中定义的样式。

1. 操作类名（class）：
   • 添加类名：
     可以使用classList属性的add方法来添加类名。

let element = document.getElementById("myElement");
element.classList.add("className");

例如，要向一个元素添加一个名为highlight的类名：

let element = document.getElementById("myElement");
element.classList.add("highlight");

• 移除类名：
  可以使用classList属性的remove方法来移除类名。

let element = document.getElementById("myElement");

element.classList.remove("className");

例如，要从一个元素中移除名为highlight的类名：

let element = document.getElementById("myElement");

element.classList.remove("highlight");

• 切换类名：
  可以使用classList属性的toggle方法来切换类名的状态（存在则移除，不存在则添加）。

let element = document.getElementById("myElement");

element.classList.toggle("className");

例如，要在一个元素的类名highlight之间切换：

let element = document.getElementById("myElement");

element.classList.toggle("highlight");

• 检查类名：
  可以使用classList属性的contains方法来检查元素是否包含某个类名。

let element = document.getElementById("myElement");

let hasClass = element.classList.contains("className");

例如，要检查一个元素是否具有类名highlight：

let element = document.getElementById("myElement");

let hasHighlightClass = element.classList.contains("highlight");

实战练习：实现选项卡

当涉及到选项卡时，我们可以使用JavaScript和DOM操作来实现切换不同的内容。下面是一个简单的实战练习，演示如何实现选项卡：

HTML 结构：

<div class="tabs">
  <div class="tab" data-tab="tab1">Tab 1</div>
  <div class="tab" data-tab="tab2">Tab 2</div>
  <div class="tab" data-tab="tab3">Tab 3</div>
</div>

<div class="tab-content" id="tab1">
  <h2>Tab 1 Content</h2>
  <p>This is the content for Tab 1.</p>
</div>

<div class="tab-content" id="tab2">
  <h2>Tab 2 Content</h2>
  <p>This is the content for Tab 2.</p>
</div>

<div class="tab-content" id="tab3">
  <h2>Tab 3 Content</h2>
  <p>This is the content for Tab 3.</p>
</div>

CSS 样式：

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

JavaScript 代码：

// 获取所有的选项卡和内容元素
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');

// 为每个选项卡添加点击事件监听器
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有选项卡的活动状态和内容的显示
    tabs.forEach(tab => tab.classList.remove('active'));
    tabContents.forEach(content => content.classList.remove('active'));

    // 获取当前选项卡的数据属性值（对应内容元素的ID）
    const tabId = tab.dataset.tab;
    
    // 添加活动状态给当前选项卡和对应的内容元素
    tab.classList.add('active');
    document.getElementById(tabId).classList.add('active');
  });
});

通过上面的代码，选项卡的功能实现如下：

1. 点击不同的选项卡时，相应的内容将显示，其他选项卡内容将隐藏。
2. 通过添加/移除类名 .active 来切换选项卡和内容的状态。

具体解释

js代码中，获取所有选项卡和内容元素时，要获取tab和tab-content两个元素

这是因为在 HTML 结构中，选项卡和对应的内容元素是使用这两个类名进行关联的。选项卡元素具有 .tab 类名，并通过 data-tab 属性指定了与之对应的内容元素的ID。而内容元素具有 .tab-content 类名，并通过 id 属性设置了唯一的ID。

在 JavaScript 代码中，我们使用 document.querySelectorAll('.tab') 和 document.querySelectorAll('.tab-content') 来获取所有具有 .tab 和 .tab-content 类名的元素，以便进行后续的操作。

通过获取这两个元素集合，我们可以根据用户点击的选项卡来切换对应的内容元素的显示和隐藏状态，从而实现选项卡的切换效果。

为每个选项卡添加点击事件监听器

在 JavaScript 代码中，我们对每个选项卡添加点击事件监听器的目的是为了响应用户的点击操作，并在用户点击选项卡时执行相应的逻辑。

通过为每个选项卡添加点击事件监听器，我们可以捕获用户的点击事件，并在事件发生时执行特定的代码。在选项卡的场景中，当用户点击某个选项卡时，我们希望切换对应的内容显示。

通过点击事件监听器，我们可以执行以下操作：

1. 移除所有选项卡的活动状态和内容的显示：

   在用户点击选项卡之前，我们需要先将其他选项卡的活动状态和内容隐藏，以确保只有当前选项卡和对应的内容显示。

2. 获取当前选项卡的数据属性值（对应内容元素的ID）：

   通过点击事件，我们可以获取到用户点击的选项卡元素，然后从该元素的数据属性中提取出与之对应的内容元素的ID。这个ID将用于后续操作。

3. 添加活动状态给当前选项卡和对应的内容元素：

   根据用户点击的选项卡，我们将为该选项卡添加活动状态的类名，以及将对应的内容元素显示出来。

为什么用dataset属性获取数据属性值

dataset是一个DOM元素的属性，它提供了访问自定义数据属性的能力。自定义数据属性通常以data-*的形式定义在HTML标签中，可以用于存储与元素相关的自定义数据。

在我们的例子中，每个选项卡都有一个data-tab属性，该属性的值是对应内容元素的ID。当用户点击某个选项卡时，我们希望获取这个ID值，以便后续操作中找到对应的内容元素并进行显示。

tab.dataset.tab表示获取tab元素的data-tab属性的值。通过这个语句，我们可以将选项卡的数据属性值赋给tabId变量，后续可以使用这个值来查找对应的内容元素。