DOM节点查找，创建，克隆，删除和属性操作

wendongsheng1

已于 2022-08-13 10:35:48 修改

阅读量117

点赞数

文章标签： servlet javascript 开发语言

于 2022-08-13 10:34:56 首次发布

本文链接：https://blog.csdn.net/c_l_a_n_n_d/article/details/126316095

版权

这篇博客介绍了DOM的基本操作，包括如何查找节点（如getElementById）、属性操作（如getAttribute和setAttribute）、创建新节点、使用文档片段、克隆节点以及删除节点的方法。示例中涉及了元素节点、文本节点和属性节点的处理，并展示了实际的HTML和JavaScript代码示例。

摘要由CSDN通过智能技术生成

节点查找

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<ul id="list">
<li id="con">1</li>
<li id="con1">2</li>
<li>3</li>
</ul>
</body>
<script>
var oUl = document.getElementById('list');//元素节点对象
var oLi = document.getElementById('con');//元素节点对象
var oAtter = oUl.getAttributeNode('id')//属性节点对象
//alert(oAttr)
console.log(oAtter.nodeType)//2
console.log(oAtter.nodeName)//id 属性节点名称属性名
console.log(oAtter.nodeValue)//list 属性节点的值属性值

//alert(oLi.firstChild)//文本节点、
console.log(oLi.firstChild.nodeType)//3 文本节点
console.log(oLi.firstChild.nodeName)//#text 节点名称
console.log(oLi.firstChild.nodeValue)//null 节点的值

//alert(oUl)
console.log(oUl.nodeType)//1
console.log(oUl.nodeName)//UL 节点名称
console.log(oUl.nodeValue)//null 节点的值

// 父子间的查找
var oul = document.getElementById("list");
console.log(oul.firstchild); //ul里第一个子节点可能会遇到文本节点
console.log(oul.firstElementChild);//ul的第一个元素节点

console.log(oul.lastchild);//ul里最后一个子节点可能会遇到文本节点
console.log(oul.lastElementchild);//ul的最后一个元素节点

console.log(oul.childNodes);//查找ul里的所有的子节点 7
console.log(oul.childNodes.length);// 7 子节点的个数

console.log(oul.children);//查找ul里的所有的子元素节点
console.log(oul.children.length);//3 I

console.log(oul.parentNode);//查找ul的父节点
console.log(oul.parentElement);

// 兄弟之间的查找

var oLi = document.getElementById("con1");
// console.log(oLi.nextsibling);
// console.log(oLi.nextElementsibling);
console.log(oLi.previoussibling);
console.log(oLi.previousElementsibling);
// 同级间查找
// 节点.nextsibling查找下一个兄弟节点可能会查找到文本节点
// 节点.nextElementsibling查找下一个元素兄弟节点
// 节点.previoussibling查找前一个兄弟节点可能会查找到文本节点
// 节点.previousElementsibling查找前一个元素兄弟节点

</script>

</html>

属性操作

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div id="box">hello world</div>
</body>
<script>
var oDiv = document.getElementById("box");
// console.log(oDiv.getAttribute("id"));//通过属性名获取属性值
//console.log(oDiv.id);//通过属性名获取属性值

//console.log(oDiv.getAttribute( "a"));//
// console.log(oDiv.a); //undefined

// oDiv.setAttribute( "title"，"这是一个div"");
// oDiv.title = "hhhhhh";
// oDiv.setAttribute("b","100"");
// oDiv.b = "hhhhhh";

oDiv.removeAttribute("a")

// 属性操作:
// 查看属性值 dom对象.getAttribute(属性名)
// 设置展性 dom对象.setAttribute(属性名, 属性值)
// 删除属性 dom对象.removeAttribute(属性名)
</script>

</html>

节点创建

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

</body>
<script>
var oDiv = document.createElement("div");//创建了一个div元素对象
// oDiv.innerHTML = "hello" ;
var oText = document.createTextNode("hello");
oDiv.appendChild(oText);
// console.log(oText); /console.log(oDiv);/ / alert(oDiv);
document.body.appendChild(oDiv);

// 创建元素节点;
// document.createElement(标签名)
// 创建文本节点:
// document.createTextNode(文本内容)

var _img = document.createElement("img");//创建了一个div元素对象
var oText = _img.setAttribute('src', '1657022083345.jpg');
document.body.appendChild(_img);

</script>

</html>

文档片段创建

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

// 创建元素节点;
// document.createElement(标签名)
// 创建文本节点:
// document.createTextNode(文本内容)

var _img = document.createElement("img");//创建了一个div元素对象
var oText = _img.setAttribute('src', '1657022083345.jpg');
document.body.appendChild(_img);

</script>

</html>

节点克隆

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div id="box">
hello world
<p>hhh</p>
</div>
<span id="con">hello span</span>
</body>
<script>
var oDiv = document.getElementById("box");
var oSpan = document.getElementById("con");
var oP = oDiv.lastElementChild;//查找div里的最后一个子元素p

//克隆span
//var c = oSpan.cloneNode(false);
var c = oSpan.cloneNode(true);
c.setAttribute("id", "con2")
// console.log(c);

oDiv.insertBefore(c, oP);

// 克隆节点;
// 节点对象.cloneNode(参数)
// 参数: 可选布尔值默认false 是否克隆后代
// 若省略则为false, 仅克隆元素本身。不克隆后代.若为true: 会克隆自身与后代

// 插入节点;
// 父节点对象.insertBefore(新节点，老节点)
// 在父节点的内部把新节点插入到老节点的前面

</script>

</html>

删除节点

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div id="box">hello world</div>
</body>
<script>
var _Div = document.getElementById('box')
// var _img = document.createElement('img')
// _img.src = "1657022083345.jpg"
// document.body.replaceChild(_img, _Div)

//document. body . removeChild(_Div);
_Div.remove();

//替换节点:
//父节点对象.removeChild(新节点，老节点)
//在父节点内部，用新节点替换掉老节点
// 删除节点:
//父节点对象.removeChild(要删除的子节点)
//节点对象.remove();

</script>

</html>