（JavaScript）前端JS不知道怎么理解网页？本专栏从0开始教学！（十二）：关于DOM元素的操作-获取元素节点；元素系欸但的属性、使用CSS选择器进行查询、获取父节点和兄弟节点...

尊丶心

769人浏览 · 2025-07-27 12:42:20

尊丶心 · 2025-07-27 12:42:20 发布

Dom元素操作

进行测试前，将下列两个结构放入html文件内

style样式

<style>
div{
	width:200px;
	height: 200px;
	margin: 10px auto;
	background: #ECCDCE;
}	
</style>

body标签内

<p>sdfsdf</p>
<div id="box" class="d">sDom1dsdf
	<input name="myInput" type="text" size="20" />
	<input name="myInput" type="text" size="20" />
	<input name="myInput" type="text" size="20" />
</div>
<div class="wrap"></div>
<div class="wrap"></div>ddad

获取元素节点

getElementById() 通过id属性获取一个元素节点对象
getElementsByTagName() 通过标签名获取一组元素节点对象
getElementsByName() 通过name属性获取一组元素节点对象
getElementsByClassName() 通过标类名获取一组元素节点对象，该方法不支持IE8及以下版本

var box=document.getElementById("box");
//	console.log(box);
var divs=document.getElementsByTagName("div");
//	console.log(divs);
var inputs=document.getElementsByName("myInput");
//	console.log(inputs);
var wrap=document.getElementsByClassName("wrap");
//	console.log(wrap);

获取元素节点的子节点

通过具体的元素节点调用

getElementsByTagName()

方法，返回当前节点的指定标签名后代节点

childNodes

属性，表示当前节点的所有子节点

firstChild

属性，表示当前节点的第一个子节点

lastChild

属性，表示当前节点的最后一个子节点

varinput=box.getElementsByTagName("input");
console.log(input);

//	var nodes=box.childNodes;
//	var nodes=box.firstChild;
var nodes=box.lastChild;
console.log(nodes);

获取父节点和兄弟节点

通过具体的节点调用

parentNode

属性，表示当前节点的父节点

previousSibling

属性，表示当前节点的前一个兄弟节点

nextSibling

属性，表示当前节点的后一个兄弟节点

var a = box.parentNode
var b = box.nextSibling
var parent=box.previousSibling;
console.log(parent);

元素节点的属性

获取：元素对象.属性名

var box = document.getElementById('box')
box.value
box.id
box.className

设置：元素对象.属性名=新的值

var box = document.getElementById('box')
box.value = "hello"
box.id = "id01"
box.className = "newClass"

其他属性

nodeValue

文本节点可以通过nodeValue属性获取和设置文本节点的内容

innerHTML

元素节点通过该属性获取和设置标签内部的html代码\

console.log(box.id);
console.log(box.innerHTML);
//	box.innerHTML="<p>hello</p>";

使用CSS选择器进行查询

querySelector()
querySelectorAll()

这两个方法都是用document对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。
不同的地方是 querySelector() 只会返回找到的第一个元素，而 querySelectorAll() 会返回所有符合条件的元素。

var box=document.querySelector("div");
var boxs=document.querySelectorAll("div");
console.log(box);
console.log(boxs);

节点的修改

这里的修改我们主要指对元素节点的操作

创建节点

document.createElement(“标签名”)

删除节点

父节点.removeChild(子节点)

替换节点

父节点.replaceChild(新节点 , 旧节点)

插入节点

父节点.appendChild(子节点)
父节点.insertBefore(新节点 , 旧节点)

var div=document.createElement("div");
var a = document.querySelector("#box")
a.appendChild(div);
a.insertBefore(div,document.querySelector(".wrap"));
a.removeChild(div);
a.replaceChild(div,document.querySelector(".wrap"));

旧节点也应都是DOM元素哦

关于DOM元素的操作，你可以这么理解：

所有关于DOM的操作都可以按照父子关系来看，document>body>div…

例如 docuemnt.getElemntById() 其实就是在document文档对象中找符合 ID 的DOM元素；
与元素.getElementById() 是一样的；我们可以把document看作是最高级的元素；