Node节点、NodeList节点列表

article/2025/10/6 8:38:36

一.NOde节点

属性

className 设置/返回元素的class属性的属性值
innerHTML 设置/返回元素的开始标签与结束标签之间的内容
value 设置/返回文本框与文本域的内容
nextElementSibling 返回下一个紧邻的兄弟节点
previousElementSibling 返回上一个紧邻的兄弟节点
parentNode 返回父级节点
children 找子级元素
style 设置/获取一个元素的行内样式
firstElementChild 返回第一个元素子节点
lastElementChild 返回最后一个元素子节点
nodeName 返回该元素节点的标签名(大写字符串)

方法

nodeType节点类型(会有返回值) 1表示元素节点，3表示文本节点，8表示注释节点，9表示document对象

setAttribute(key,value) 设置元素的自定义属性
getAttribute(key) 获取元素的自定义属性
getElementsByTagName()
getElementsByClassName() 注：与上面方法的区别是，搜索范围变了(上面是从NodeList中寻找，此处是从Node中寻找）
remove() 删除元素
appendChild() 插入到结束标签之前向节点的子节点列表的结尾添加新的子节点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {color: skyblue;}h1 {margin-top: 100px;}</style>
</head><body><h1>你好</h1><span>我是插入进来的</span><script>var oH1 = document.querySelector("h1");var osp = document.querySelector("span");oH1.appendChild(osp);</script>
</body></html>

父元素.insertBefore(插入的元素,参照物) 在指定的子节点前插入新的子节点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {color: skyblue;}div {margin-top: 90px;width: 200px;height: 100px;background-color: pink;}</style></head><body><div><h1>你好</h1></div><span>我是插入进来的</span><script>var Odiv = document.querySelector("div");var oH1 = document.querySelector("h1");var osp = document.querySelector("span");// 父元素.insertBefore(插入的元素,参照物)在指定的子节点前插入新的子节点Odiv.insertBefore(osp, oH1);</script>
</body></html>