javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > javascript节点操作

javascript中常规操作节点的方法合集

作者：盛夏绽放

JavaScript常用操作DOM节点的方法包括获取节点,创建节点,添加节点,删除节点,替换节点等,下面小编就来和大家详细讲讲具体的操作方法吧

1.获取节点

(1)通过ID获取

使用 document.getElementById(“元素ID”) 方法，通过元素的ID获取单个元素。这是最常用的方法之一，因为ID在页面中是唯一的，可以直接定位到具体元素。

<div id="box"></div>
<script>
    //通过元素的ID获取元素
    let box = document.getElementById("box")
</script>

(2)通过标签名获取

<p></p>
<p></p>
<script>
    //通过元素的标签名获取元素
    let label = document.getElementsByTagName("p")
</script>

(3)通过类名获取

<div class="box"></div>
<script>
    //通过元素的类名获取元素
    let box = document.getElementsByClassName("box")
</script>

(4)通过name属性获取

<input type="text" name="example"/>
<script>
    //通过name属性获取元素
    let example = document.getElementsByName("example")
</script>

(5)获取特殊元素

获取body元素

document.body直接获取body元素

// 使用document.body获取body元素
var bodyElement = document.body;
// 输出获取到的元素
console.log(bodyElement); // 输出：<body>...</body>

获取html元素

document.documentElement获取html元素

// 使用document.documentElement获取documentElement元素
var htmlElement = document.documentElement;
// 输出获取到的元素
console.log(htmlElement ); // 输出：html

(6)通过CSS选择器获取

获取的元素只有一个的时候:

使用 document.querySelector(“CSS选择器”)方法

<div class="box"></div>
<script>
    //通过CSS选择器获取元素
    let box = document.querySelector("box")
</script>

获取的元素有很多个的时候:

使用 document.querySelectorAll(“CSS选择器”)方法

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
    //通过CSS选择器获取元素
    let boxs = document.querySelectorAll("box")
</script>

2.创建节点

(1)创建元素节点：

document.createElement(tagName)，用于动态生成新的HTML元素节点。

var newElement = document.createElement("div"); // 创建一个<div>元素节点

(2)创建文本节点：

document.createTextNode(text)，用于生成新的文本节点，常用于为新生成的元素节点添加文本内容。

var newText = document.createTextNode("Hello World!"); // 创建一个包含文本内容的文本节点

(3)创建属性节点：

document.createAttribute(attrName)，用于生成新的属性节点，可添加到元素节点上。

var newAttribute = document.createAttribute("class"); // 创建一个名为"class"的属性节点
newAttribute.value = "example"; // 设置属性值为"example"

(4)创建注释节点：

document.createComment(commentText)，用于生成新的注释节点，可用于添加注释信息。

var newComment = document.createComment("This is a comment"); // 创建一个包含注释内容的注释节点

3.添加节点

(1)向父节点末尾添加子节点：

element.appendChild(newNode)，将新节点添加为父节点的最后一个子节点。

// 获取父节点
var parentElement = document.getElementById("parent");

// 创建新的子节点
var newChild = document.createElement("div");
newChild.textContent = "This is a new child element";

// 将新子节点添加到父节点的末尾
parentElement.appendChild(newChild);

(2)向指定位置插入子节点：

element.insertBefore(newNode, referenceNode)，在父节点的子节点referenceNode前插入新节点。

// 获取父节点
var parentElement = document.getElementById("parent");

// 创建新的子节点
var newChild = document.createElement("div");
newChild.textContent = "This is a new child element";

// 获取参考节点，即要在其前面 插入新子节点的节点
var referenceNode = document.getElementById("reference");

// 在参考节点之前插入新子节点
parentElement.insertBefore(newChild, referenceNode);

4.删除节点

(1)从父节点中删除子节点：

element.removeChild(node)，删除父节点下的指定子节点。

// 获取要删除的子节点
var childElement = document.getElementById("child");
// 获取该子节点的父节点
var parentElement = childElement.parentNode;
// 从父节点中删除子节点
parentElement.removeChild(childElement);

在这个示例中，我们首先通过document.getElementById()方法获取了ID为"child"的子节点。然后，我们使用parentNode属性获取了该子节点的父节点。最后，我们使用removeChild()方法将子节点从父节点中删除。

(2)直接从DOM树中移除节点：

node.remove()，直接移除节点及其子节点。

// 获取要删除的节点
var elementToRemove = document.getElementById("element");
// 直接从DOM树中移除节点
elementToRemove.remove();

注释：在这个示例中，我们首先通过document.getElementById()方法获取了ID为"element"的节点。然后，我们使用remove()方法直接从DOM树中移除该节点。

注意：这种方法会将节点及其所有子节点一起移除，而不仅仅是从父节点中移除。

5.替换节点

(1)替换子节点：

element.replaceChild(newNode, oldNode)，用新节点替换掉父节点下的旧节点。

<!DOCTYPE html>
<html>
<body>
    <div id="myDiv">
          <p id="oldNode">这是旧节点</p>
    </div>
</body>
    <script>
        // 获取要替换的旧节点和新节点
        var oldNode = document.getElementById("oldNode");
        var newNode = document.createElement("p");
        newNode.innerHTML = "这是新节点";
        // 使用replaceChild()方法替换子节点
        document.getElementById("myDiv").replaceChild(newNode, oldNode);
    </script>
</html>

6.复制节点

(1)克隆节点：

node.cloneNode([deep])，创建一个节点的副本，可选参数deep决定是否深度克隆（包括子节点）。

<ul id="myList1"></ul>
<ul id="myList2">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Water</li>
  <li>Milk</li>
</ul>
var node = document.getElementById("myList2").lastChild;
var clone = node.cloneNode(true);
document.getElementById("myList1").appendChild(clone);

注释：

在这个例子中，我们首先获取ID为"myList2"的ul元素的最后一个子节点（即 li Milk /li ），然后使用cloneNode(true)对其进行深度克隆，最后将克隆出来的节点添加到ID为"myList1"的 /ul元素中。

7.获取节点信息

(1)获取当前元素的父节点：

element.parentNode，返回当前元素的父节点对象。

<!DOCTYPE html>
<html>
<body>
<div id="parent">
  <div id="child">这是子节点</div>
</div>
<script>
// 获取子节点
var childElement = document.getElementById("child");
// 获取子节点的父节点
var parentElement = childElement.parentNode;
// 输出父节点的id
console.log(parentElement.id); // 输出 "parent"
</script>
</body>
</html>

(2)获取当前元素的子节点：

element.childNodes，返回当前元素所有子节点的集合。

<!DOCTYPE html>
<html>
<body>
<div id="parent">
  <p>这是第一个子节点</p>
  <p>这是第二个子节点</p>
  <p>这是第三个子节点</p>
</div>
<script>
// 获取父节点
var parentElement = document.getElementById("parent");
// 获取父节点的所有子节点
var childNodes = parentElement.childNodes;
// 遍历并输出每个子节点的内容
for (var i = 0; i < childNodes.length; i++) {
  if (childNodes[i].nodeType === Node.ELEMENT_NODE) { // 确保只处理元素节点
    console.log(childNodes[i].textContent);
  }
}
</script>
</body>
</html>

(3)获取当前元素的第一个和最后一个子节点：

element.firstChild 和 element.lastChild。

<!DOCTYPE html>
<html>
<body>
<div id="parent">
  <p>这是第一个子节点</p>
  <p>这是第二个子节点</p>
  <p>这是第三个子节点</p>
</div>
<script>
// 获取父节点
var parentElement = document.getElementById("parent");
// 获取父节点的第一个子节点
var firstChild = parentElement.firstChild;
console.log(firstChild.textContent); // 输出 "这是第一个子节点"
// 获取父节点的最后一个子节点
var lastChild = parentElement.lastChild;
console.log(lastChild.textContent); // 输出 "这是第三个子节点"
</script>
</body>
</html>

(4)获取当前元素的同级前后兄弟节点：

element.nextSibling 和 element.previousSibling。

<!DOCTYPE html>
<html>
<body>
<div id="sibling1">这是第一个兄弟节点</div>
<div id="target">这是目标节点</div>
<div id="sibling2">这是第二个兄弟节点</div>
<script>
// 获取目标节点
var targetElement = document.getElementById("target");
// 获取目标节点的前一个兄弟节点
var previousSibling = targetElement.previousSibling;
console.log(previousSibling.textContent); // 输出 "这是第一个兄弟节点"
// 获取目标节点的后一个兄弟节点
var nextSibling = targetElement.nextSibling;
console.log(nextSibling.textContent); // 输出 "这是第二个兄弟节点"
</script>
</body>
</html>

8.修改节点内容与样式

(1)设置或获取元素的内容：

element.innerHTML 和 element.innerText，前者可以包含HTML标签，后者只显示文本内容。

<!DOCTYPE html>
<html>
<body>
<div id="myDiv">这是初始内容</div>
<script>
// 获取元素
var myElement = document.getElementById("myDiv");
// 获取元素的内容
console.log(myElement.innerHTML); // 输出 "这是初始内容"
// 设置元素的内容
myElement.innerHTML = "这是新的内容";
// 再次获取元素的内容以确认更改已生效
console.log(myElement.innerHTML); // 输出 "这是新的内容"
</script>
</body>
</html>

(2)设置或获取元素的样式：

element.style.property=value，用来改变元素的特定样式属性。

<!DOCTYPE html>
<html>
<body>
<div id="myDiv">这是一个带有样式的元素</div>
<script>
// 获取元素
var myElement = document.getElementById("myDiv");
// 获取元素的样式
console.log(myElement.style.color); // 输出 "rgb(0, 0, 0)"，默认颜色为黑色
// 设置元素的样式
myElement.style.color = "red";
myElement.style.fontSize = "24px";
// 再次获取元素的样式以确认更改已生效
console.log(myElement.style.color); // 输出 "red"
console.log(myElement.style.fontSize); // 输出 "24px"
</script>
</body>
</html>

9.获取和设置元素的属性

(1)获取元素的属性值：

element.getAttribute(attributeName)，返回指定属性的属性值。

<!DOCTYPE html>
<html>
<body>
<div id="myDiv" class="example">这是一个带有属性的元素</div>
<script>
// 获取元素
var myElement = document.getElementById("myDiv");
// 获取元素的id属性值
console.log(myElement.getAttribute("id")); // 输出 "myDiv"
// 获取元素的class属性值
console.log(myElement.getAttribute("class")); // 输出 "example"
</script>
</body>
</html>

(2)设置元素的属性值：

element.setAttribute(attributeName, value)，为元素设置指定属性的值。

<!DOCTYPE html>
<html>
<body>
<div id="myDiv">这是一个带有属性的元素</div>
<script>
// 获取元素
var myElement = document.getElementById("myDiv");
// 设置元素的id属性值
myElement.setAttribute("id", "newId");
console.log(myElement.getAttribute("id")); // 输出 "newId"
// 设置元素的class属性值
myElement.setAttribute("class", "newClass");
console.log(myElement.getAttribute("class")); // 输出 "newClass"
</script>
</body>
</html>

(3)删除元素的属性：

element.removeAttribute(attributeName)，删除元素的指定属性。

<!DOCTYPE html>
<html>
<body>
<div id="myDiv" class="example">这是一个带有属性的元素</div>
<script>
// 获取元素
var myElement = document.getElementById("myDiv");
// 删除元素的id属性
myElement.removeAttribute("id");
console.log(myElement.getAttribute("id")); // 输出 null
// 删除元素的class属性
myElement.removeAttribute("class");
console.log(myElement.getAttribute("class")); // 输出 null
</script>
</body>
</html>

到此这篇关于javascript中常规操作节点的方法合集的文章就介绍到这了,更多相关javascript节点操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文