白骑士的JavaScript教学进阶篇之DOM操作 3.3.2 常见DOM操作(查找、修改、删除、创建元素)

        在上一节中,我们介绍了 DOM 树的基本概念及其结构。在实际的网页开发中,DOM 操作是非常常见且重要的任务。通过 JavaScript 操作 DOM,我们可以实现动态更新网页内容、响应用户交互、控制页面布局等功能。在本节中,我们将深入探讨常见的 DOM 操作,包括如何查找、修改、删除和创建 DOM 元素。

查找元素

        在操作 DOM 之前,我们首先需要找到想要操作的元素。JavaScript 提供了多种方法来查找 DOM 元素,每种方法都有其特定的应用场景。

通过ID查找元素

        最常用的方法之一是通过元素的 ‘id‘ 属性来查找元素。每个 ‘id‘ 在整个文档中应该是唯一的,因此这种方法通常用于快速定位特定元素。

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

通过类名查找元素

        你可以使用 ‘getElementsByClassName‘ 方法查找具有特定类名的所有元素。这个方法返回一个类数组的 ‘HTMLCollection‘,你可以通过索引访问每个元素。

let elements = document.getElementsByClassName("myClassName");

通过标签名查找元素

        ‘getElementsByTagName‘ 方法可以返回文档中具有指定标签名的所有元素,同样返回的是一个 ‘HTMLCollection‘。

let paragraphs = document.getElementsByTagName("p");

使用CSS选择器查找元素

        ‘querySelector‘ 和 ‘querySelectorAll‘ 是更强大且灵活的方法,它们允许你使用 CSS 选择器语法来查找元素。‘querySelector‘ 返回匹配选择器的第一个元素,而 ‘querySelectorAll‘ 返回一个包含所有匹配元素的 ‘NodeList‘。

let firstParagraph = document.querySelector("p");
let allDivs = document.querySelectorAll("div");

修改元素

        一旦找到元素,我们可以通过 JavaScript 修改其内容、属性和样式。

修改内容

        通过 ‘innerHTML‘ 属性,我们可以获取或设置元素的 HTML 内容。如果需要更改文本内容,可以使用 ‘textContent‘。

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

element.innerHTML = "<strong>New content</strong>";
element.textContent = "Just plain text";

修改属性

        ‘setAttribute‘ 和 ‘getAttribute‘ 方法可以用来获取和设置元素的属性。例如,你可以更改一个链接的 ‘href‘ 属性。

let link = document.querySelector("a");

link.setAttribute("href", "https://www.example.com");

        你也可以直接通过元素的属性来修改,例如:

link.href = "https://www.new-url.com";

修改样式

        使用 ‘style‘ 属性可以直接更改元素的内联样式。这种方法适合在特定情况下动态调整元素样式。

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

element.style.color = "red";
element.style.fontSize = "20px";

删除元素

        DOM 操作中,删除元素是一个常见的操作。通过 ‘removeChild‘ 或 ‘remove‘ 方法,你可以从 DOM 树中删除不再需要的元素。

使用‘removeChild‘

        ‘removeChild‘ 方法需要通过其父元素来删除指定的子元素。

let parentElement = document.getElementById("parent");
let childElement = document.getElementById("child");

parentElement.removeChild(childElement);

使用‘remove‘

        如果不需要保留对父元素的引用,你可以直接使用 ‘remove‘ 方法删除一个元素。

let element = document.getElementById("myElementId");
element.remove();

创建元素

        创建新的 DOM 元素是动态生成内容或布局的重要步骤。通过 ‘createElement‘ 方法,你可以创建一个新的 HTML 元素,然后使用 ‘appendChild‘ 或 ‘insertBefore‘ 方法将其添加到 DOM 树中。

创建并添加新元素

        首先,使用 ‘createElement‘ 创建一个元素,然后通过 ‘appendChild‘ 将其添加到某个父元素中。

let newElement = document.createElement("div");
newElement.textContent = "This is a new div!";
document.body.appendChild(newElement);

设置新元素的属性

        创建元素后,你可以使用 ‘setAttribute‘ 或直接设置属性值来配置新元素的属性。

newElement.setAttribute("class", "new-class");
newElement.id = "newElementId";

在特定位置插入新元素

        使用 ‘insertBefore‘ 方法可以将新元素插入到特定位置。

let parentElement = document.getElementById("parent");
let newElement = document.createElement("p");

newElement.textContent = "Inserted paragraph";


let referenceElement = document.getElementById("referenceChild");

parentElement.insertBefore(newElement, referenceElement);

        在这个例子中,新创建的 ‘p‘ 元素被插入到 ‘referenceChild‘ 元素之前。

总结

        掌握 DOM 操作是编写交互式网页应用的基础技能。通过查找、修改、删除和创建元素,开发者可以动态地操控网页内容,提升用户体验。随着你对这些操作的深入理解和实践,你将能够更灵活地使用 JavaScript 操控 DOM,构建更加复杂和动态的网页应用。无论是实现简单的交互效果,还是构建复杂的单页应用(SPA),DOM 操作都是不可或缺的一部分。熟练掌握这些操作,将使你在前端开发的道路上更加游刃有余。

猜你喜欢

转载自blog.csdn.net/JeremyTC/article/details/143100652