当前位置：首页 > 全部内容 > 正文

JavaScript DOM元素获取与节点操作详解

作者：小圆点

时间：2026-10-23

浏览：201

本文详细解析JavaScript中获取DOM元素的多种方法，重点对比了getElement系列与querySelector系列在动态列表和静态列表上的区别，以及HTMLCollection与NodeList在遍历时的差异。同时介绍了元素节点、属性节点和文本节点的特性，以及通过children、parentElement等属性获取子父兄弟元素的方法，最后讲解了appendChild、insertBefore、removeChild等DOM元素的添加与移除操作。

文章目录

DOM元素获取方法

一、获取DOM元素的方法

  • document.getElementById()：依据ID定位单个DOM节点
  • document.getElementsByClassName()：依据类名获取多个DOM节点（返回伪数组）
  • document.getElementsByTagName()：依据标签名获取多个DOM节点（返回伪数组）
  • document.querySelector()：匹配首个符合CSS选择器的元素
  • document.querySelectorAll()：匹配所有符合CSS选择器的元素（返回伪数组）

动态列表与静态列表的区别

ES6选择器与旧式选择器的差异：

document.getElementsByTagName()与document.getElementsByClassName()返回动态集合

document.querySelectorAll()返回静态集合，DOM变动后需重新查询以避免错误


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <ul>
      <li class="test">1</li>
      <li class="test">2</li>
      <li class="test">3</li>
      <li class="test">4</li>
    </ul>
  </body>
</html>
<script>
  var lis = document.getElementsByTagName('li')
  var liByQuery = document.querySelectorAll('li')
  console.log(lis.length) // 4
  console.log(liByQuery.length) // 4

  // 动态添加li标签
  document.querySelector('ul').innerHTML += "<li class='test'>5</li>"
  console.log(lis.length) // 5 
  console.log(liByQuery.length) // 4 
</script>

document.getElementsByTagName()与document.getElementsByClassName()返回HTMLCollection，不支持foreach()遍历

document.querySelectorAll()返回NodeList，支持foreach()遍历


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=2.0">
    <title>Test</title>
  </head>
  <body>
    <ul>
      <li class="test">1</li>
      <li class="test">2</li>
      <li class="test">3</li>
      <li class="test">4</li>
    </ul>
  </body>
</html>
<script>
  var li = document.getElementsByTagName('li')
  var li2 = document.getElementsByClassName('test')
  var li3 = document.querySelectorAll('li')
  var li4 = document.querySelector('ul').children
  console.log(li) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
  console.log(li2) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
  console.log(li3) // NodeList(4) [li.test, li.test, li.test, li.test]
  console.log(li4) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
</script>

DOM节点类型与属性

二、DOM节点类型分类

DOM节点分为三类：元素节点、属性节点、文本节点

各类节点均具备nodeName、nodeType、nodeValue三个属性


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <div id="box" title="我在哪">我是谁</div>
  </body>
</html>
<script>
  // 获取元素节点
  var box = document.querySelector('#box')
  // 元素节点的属性
  console.log(box.nodeName);//DIV
  console.log(box.nodeType); //1
  console.log(box.nodeValue); //一律为null
  
  // 根据属性名获取单个属性节点
  var attrTitle = box.getAttributeNode("title")
  // 获取元素属性的集合(一个伪数组对象)
  var box_attributes = box.attributes
  // 属性节点的属性
  console.log(attrTitle.nodeName);//title
  console.log(attrTitle.nodeType); //2
  console.log(attrTitle.nodeValue); //"我在哪"

  // 获取box的文本节点（没有专门的方法用来获取文本节点，但是这个div的第一个子节点就是文本节点）
  var textNode = box.childNodes[0];
  // 文本节点的属性
  console.log(textNode.nodeName);//#text
  console.log(textNode.nodeType); //3
  console.log(textNode.nodeValue); //"我是谁"
</script>

获取子元素、父元素与兄弟元素

三、获取DOM元素的子元素、父元素及兄弟元素

利用children属性可提取当前DOM元素的直接子元素


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>
<script>
  // 获取ul元素
  var ul = document.querySelector('ul')
  // 获取ul子元素
  var ul_children = ul.children
  // 遍历子元素
  for(var i=0;i<ul_children.length;i++){
    console.log(ul_children[i].innerHTML)
    // 1
    // 2
    // 3
  }  
</script>

提取当前元素的父级元素

parentElement与parentNode属性均可实现


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>
<script>
  // 获取ul元素
  var ul = document.querySelector('ul')
  // 获取父元素(ul的父级就是body)
  var parent = ul.parentElement
  var parentNode = ul.parentNode

  console.log(parent.nodeName) // BODY
  console.log(parentNode.nodeName) // BODY
</script>

提取当前元素的兄弟节点

previousElementSibling属性：指向上一位兄弟元素

nextElementSibling属性：指向下一位兄弟元素


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <ul>
      <li>1</li>
      <li id="test">2</li>
      <li>3</li>
    </ul>
  </body>
</html>
<script>
  // 获取id为test的li元素
  var li = document.querySelector('#test')
  // 获取兄弟元素
  var preBrother = li.previousElementSibling
  var nextBrother = li.nextElementSibling

  console.log(preBrother.innerHTML) // 1
  console.log(nextBrother.innerHTML) // 3
</script>

注意事项：

children仅包含元素节点，childNodes包含元素节点及文本节点（含回车换行符）

previousElementSibling与previousSibling、nextElementSibling与nextSibling同理

firstChild与lastChild：firstChild等同于childNodes[0]，lastChild对应childNodes末尾元素

DOM元素的添加与移除操作

四、DOM元素的添加与移除操作

执行子元素添加

appendChild()：将目标元素追加至当前元素的末尾

insertBefore()：将目标元素插入当前元素指定位置


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <ul>
      <li>1</li>
      <li id="test">2</li>
      <li>3</li>
    </ul>
  </body>
</html>
<script>
  // 获取ul元素
  var ul = document.querySelector('ul')
  // 创建li元素
  var liNode = document.createElement('li')
  liNode.innerHTML = "4"
  // 将创建的li元素添加到ul中(最后面)
  ul.appendChild(liNode)

  // 再创建li元素
  var liNode2 = document.createElement('li')
  liNode2.innerHTML = "life"

  var li_test = document.querySelector('#test')
  // 将创建的li元素添加到ul中(li_test的前面)
  ul.insertBefore(liNode2,li_test)
</script>

执行效果展示


<ul>
  <li>1</li>
  <li>life</li>
  <li id="test">2</li>
  <li>3</li>
  <li>4</li>
</ul>

执行子元素删除与替换

removeChild()：移除指定子元素

replaceChild()：替换指定子元素

语法格式：parent.removeChild(child)

语法格式：parent.replaceChild(新元素, 旧元素)


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <ul>
      <li>1</li>
      <li id="test">2</li>
      <li id="replace">3</li>
    </ul>
  </body>
</html>
<script>
  // 获取ul元素
  var ul = document.querySelector('ul')

  // 获取要删除的li元素
  var li_test = document.querySelector('#test')
  // 删除子元素
  ul.removeChild(li_test)

  // 获取要替换的li元素
  var li_replace = document.querySelector('#replace')
  // 创建要替换的元素
  var newLI = document.createElement('li')
  newLI.innerHTML = "replace li tag"
  // 替换元素
  ul.replaceChild(newLI,li_replace)
</script>

执行效果展示：


<ul>
  <li>1</li>      
  <li>replace li tag</li>
</ul>

本文内容总结完毕，期望对读者学习有所助益，欢迎持续支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS在setTimeout或Ajax回调中打开新标签页失败怎么处理

JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比

JS实现回到顶部：scrollTop赋值与浏览器兼容性处理

JS使用classList动态添加、移除和切换CSS类名

在 D3.js 中实现平滑过渡动画的技巧

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法