javascript之dom

laumy
前后端
2024-12-14
125热度
0评论

什么是dom

DOM（Document Object Model）是一个编程接口，它将 HTML 或 XML 文档呈现为一个由节点和对象（这些节点和对象其实是文档的各种元素、属性和文本内容等）组成的树形结构。这个树形结构允许开发者使用编程语言（如 JavaScript）来访问、修改和操作文档的内容、结构和样式。对于以下简单的 HTML 文档：

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p id=\\\"myParagraph\\\">This is a paragraph.</p>
</body>
</html>

它的 DOM 树结构大致如下：
- html 节点是根节点，它包含两个子节点：head 和 body。
- head 节点包含一个子节点 title，title 节点的文本内容是 \\\\\\\"My Page\\\\\\\"。
- body 节点包含两个子节点：h1 和 p。h1 节点的文本内容是 \\\\\\\"Hello, World!\\\\\\\"，p 节点有一个属性 id 为 \\\\\\\"myParagraph\\\\\\\"，其文本内容是 \\\\\\\"This is a paragraph.\\\\\\\"。

获取dom元素

getElementById

这是最常用的方法之一，用于通过元素的id属性获取单个元素。id在HTML文档中应该是唯一的，语法如下。

document.getElementById(\\\"elementId\\\");

在上面的 HTML 文档中，如果要获取p元素，可以使用以下 JavaScript 代码：

var paragraph = document.getElementById(\\\"myParagraph\\\");
console.log(paragraph.textContent); 
// 输出：This is a paragraph.

getElementsByTagName

根据标签名获取元素集合。它返回一个类似数组的对象（HTMLCollection），包含所有匹配标签名的元素。语法如下：

document.getElementsByTagName(\\\"tagName\\\");

要获取文档中的所有 h1 元素：

var h1Elements = document.getElementsByTagName(\\\"h1\\\");
for (var i = 0; i < h1Elements.length; i++) {
    console.log(h1Elements[i].textContent); 
    // 输出：Hello, World!
}

getElementsByClassName

通过类名获取元素集合。同样返回一个 HTMLCollection，包含所有具有指定类名的元素。

document.getElementsByClassName(\\\"className\\\");

假设HTML中有多个元素有highlight类，如下：

<p class=\\\"highlight\\\">This is a highlighted paragraph.</p>
<span class=\\\"highlight\\\">This is a highlighted span.</span>

可以使用以下代码获取这些元素：

var highlightedElements = document.getElementsByClassName(\\\"highlight\\\");
for (var i = 0; i < highlightedElements.length; i++) {
    console.log(highlightedElements[i].textContent); 
    // 输出两个元素的文本内容
}

修改元素

修改元素内容

textContent属性

用于获取或设置元素的文本内容，如改变前面获取的p元素的内容

var paragraph = document.getElementById(\\\"myParagraph\\\");
paragraph.textContent = \\\"This is a new paragraph content.\\\";

innerHTML属性

用于获取或设置元素内部的HTML内容。可以用于添加或修改元素内部的标签和文本。如在前面p元素内部添加一个strong标签：

var paragraph = document.getElementById(\\\"myParagraph\\\");
paragraph.innerHTML = \\\"This is a <strong>modified</strong> paragraph.\\\";

修改元素属性

获取和设置属性

可以通过元素对象的属性来获取和设置大多数 HTML 属性。例如，对于一个元素的 src 属性。假设 HTML 中有一个img元素，可以这样修改其src属性：

<img id=\\\"myImage\\\" src=\\\"original.jpg\\\">

var image = document.getElementById(\\\"myImage\\\");
image.src = \\\"new.jpg\\\";

使用setAttribute和getAttribute

setAttribute 用于设置元素的属性，getAttribute 用于获取元素的属性。如对于上面的img元素，也可以这样操作：

var image = document.getElementById(\\\"myImage\\\");
image.setAttribute(\\\"src\\\", \\\"new.jpg\\\");

var currentSrc = image.getAttribute(\\\"src\\\");
console.log(currentSrc); 
// 输出：new.jpg

创建与添加DOM元素

创建元素

使用createElement方法。具体为先使用 document.createElement(\\\\\\\"tagName\\\\\\\") 创建一个新的 HTML元素。如创建一个新的div元素并设置其 id 和内容，如下。

var newDiv = document.createElement(\\\"div\\\");
newDiv.id = \\\"newDiv\\\";
newDiv.textContent = \\\"This is a new div.\\\";

添加元素

appendChild

使用appendChild方法，将一个元素添加为另一个元素的子元素。例如，将新创建的div元素添加到 body元素中。

var body = document.getElementsByTagName(\\\"body\\\")[0];
var newDiv = document.createElement(\\\"div\\\");
newDiv.id = \\\"newDiv\\\";
newDiv.textContent = \\\"This is a new div.\\\";
body.appendChild(newDiv);

insertBefore

在指定的子元素之前插入一个新元素。它需要两个参数：要插入的新元素和参考元素（新元素将插入在参考元素之前）。如假设有两个 p 元素在 body 中，在第一个 p 元素之前插入新的 div 元素。

<body>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
</body>

var body = document.getElementsByTagName(\\\"body\\\")[0];
var newDiv = document.createElement(\\\"div\\\");
newDiv.id = \\\"newDiv\\\";
newDiv.textContent = \\\"This is a new div.\\\";
var firstParagraph = document.getElementsByTagName(\\\"p\\\")[0];
body.insertBefore(newDiv, firstParagraph);

删除DOM元素

用于从父元素中删除指定的子元素，语法如下。

parentElement.removeChild(childElement);

如假设要删除前面添加的div元素（假设它有 id 为 \\\\\\\"newDiv\\\\\\\"）。

var divToRemove = document.getElementById(\\\"newDiv\\\");
var body = document.getElementsByTagName(\\\"body\\\")[0];
body.removeChild(divToRemove);