网站导航
> 技术文档 > JavaScript的DOM基本操作（上）_JavaScript动态操作HTML节点

JavaScript的DOM基本操作（上）_JavaScript动态操作HTML节点

网友: 技术文档 2025-09-04 00:26:00

文章目录

  • JavaScript的DOM基本操作
    • 1. 获取元素
      • 1.1 根据id名称获取
      • 1.2 根据元素类名获取
      • 1.3 根据元素标签名获取
      • 1.4 根据选择器获取一个
      • 1.5 根据选择器获取一组
    • 2. 操作元素内容
      • 2.1 操作元素文本内容
      • 2.2 操作元素超文本内容
    • 3. 操作元素原生属性
    • 4. 操作元素自定义属性
    • 5. 操作元素类名
    • 6. 操作元素行内样式
    • 7. 获取元素非行内样式

JavaScript的DOM基本操作

  • DOM - Document Object Model
  • 是用于操作文档流相关内容的属性和方法
    • 操作元素修改样式
    • 操作元素修改属性
    • 操作元素改变位置
    • 操作元素添加事件
    • …

1. 获取元素

1.1 根据id名称获取

  • 语法：document.getElementById(\'id名称\')
  • 作用：获取文档流中id名对应的一个元素
  • 返回值：如果有id对应的元素，就是这个元素，否则为null
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title></head><body> <div>一号</div> <div class=\"box\">二号</div> <div class=\"box content\">三号</div> <div class=\"box\" id=\"container\">四号</div> <script> // 获取元素 var ele = document.getElementById(\'container\') // 输出返回值 console.log(ele) console.log(typeof ele) </script></body></html>

JavaScript的DOM基本操作（上）_JavaScript动态操作HTML节点

1.2 根据元素类名获取

  • 语法：document.getElementsByClassName(\'元素类名\')
  • 作用：获取文档流中所有类名对应的元素
  • 返回值：必然是一个伪数组，如果有类名对应的元素，有多少获取多少，否则为空的伪数组
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title></head><body> <div>一号</div> <div class=\"box\">二号</div>  <div class=\"box content\">三号</div> <div class=\"box\" id=\"container\">四号</div> <script> // 获取元素 var eles = document.getElementsByClassName(\'box\') // 输出返回值 console.log(eles) console.log(typeof eles) var eles = document.getElementsByClassName(\'content\') // 输出返回值 console.log(eles) console.log(typeof eles) </script></body></html>

JavaScript的DOM基本操作（上）_JavaScript动态操作HTML节点

1.3 根据元素标签名获取

  • 语法：document.getElementsByTagName(\'标签名\')
  • 作用：获取文档流中所有标签名对应的元素
  • 返回值：必然是一个伪数组，如果有标签名对应的元素，有多少获取多少，否则为空的伪数组
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title></head><body> <div>一号</div> <div class=\"box\">二号</div>  <div class=\"box content\">三号</div> <div class=\"box\" id=\"container\">四号</div> <script> // 获取元素 var eles = document.getElementsByTagName(\'div\') // 输出返回值 console.log(eles) console.log(typeof eles) var eles = document.getElementsByTagName(\'span\') // 输出返回值 console.log(eles) console.log(typeof eles) </script></body></html>

JavaScript的DOM基本操作（上）_JavaScript动态操作HTML节点

1.4 根据选择器获取一个

  • 语法：document.querySelector(\'选择器\')
  • 作用：获取文档流中满足选择器规则的第一个元素
  • 返回值：如果有满足选择器规则的元素，就是第一个元素，否则为null
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title></head><body> <div>一号</div> <div class=\"box\">二号</div>  <div class=\"box content\">三号</div> <div class=\"box\" id=\"container\">四号</div> <script> // 获取元素 var eles = document.querySelector(\'div\') // 输出返回值 console.log(eles) console.log(typeof eles) var eles = document.querySelector(\'.box\') // 输出返回值 console.log(eles) console.log(typeof eles) var eles = document.querySelector(\'#abc\') // 输出返回值 console.log(eles) console.log(typeof eles) </script></body></html>

JavaScript的DOM基本操作（上）_JavaScript动态操作HTML节点

1.5 根据选择器获取一组

  • 语法：document.querySelectorAll(\'选择器\')
  • 作用：获取文档流中满足选择器规则的所有元素
  • 返回值：必然是一个伪数组，如果有满足选择器规则的元素，有多少获取多少，否则为空的伪数组
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title></head><body> <div>一号</div> <div class=\"box\">二号</div> <!--这里相当于有两个类名--> <div class=\"box content\">三号</div> <div class=\"box\" id=\"container\">四号</div> <script> // 获取元素 var eles = document.querySelectorAll(\'div\') // 输出返回值 console.log(eles) console.log(typeof eles) var eles = document.querySelectorAll(\'.box\') // 输出返回值 console.log(eles) console.log(typeof eles) var eles = document.querySelectorAll(\'#abc\') // 输出返回值 console.log(eles) console.log(typeof eles) </script></body></html>

JavaScript的DOM基本操作（上）_JavaScript动态操作HTML节点

2. 操作元素内容

2.1 操作元素文本内容

  • 获取：元素.innerText
  • 设置：元素.innerText = \'新内容\'
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title></head><body> <button class=\"btn\">操作内容1</button> <div> <p>文本内容</p> </div> <script> // 获取元素 var ele = document.querySelector(\'div\') var btn = document.querySelector(\'.btn\') // 获取元素的文本内容 console.log(ele.innerText) // 给按钮添加点击事件 btn.onclick = function () { // 设置div内的文本内容 ele.innerText = \"替换内容\" } </script></body></html>

2.2 操作元素超文本内容

  • 获取：元素.innerHTML
  • 设置：元素.innerHTML = \'新内容\'
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title></head><body> <button class=\"btn\">操作内容1</button> <div> <p>文本内容</p> </div> <script> // 获取元素 var ele = document.querySelector(\'div\') var btn = document.querySelector(\'.btn\') // 获取元素的文本内容 console.log(ele.innerHTML) // 给按钮添加点击事件 btn.onclick = function () { // 设置div内的超文本内容 ele.innerHTML = \"替换内容\" } </script></body></html>

3. 操作元素原生属性

  • 获取：元素.属性名
  • 设置：元素.属性名 = \'属性值\'
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title></head><body> <button>操作属性</button> <div id=\"box\">div标签</div> <input type=\"password\"> <script> // 获取元素 var box = document.querySelector(\'div\') var inp = document.querySelector(\'input\') var btn = document.querySelector(\'button\')//获取console.log(\'box.id\') // 给按钮添加点击事件 btn.onclick = function () { // 修改元素属性 box.id = \'content\' inp.type = \'checkbox\' } </script></body></html>ele.getAttribute(\'id\')\'content\'ele.setAttribute(\'id\', \'myid\')undefinedele.removeAttribute(\'id\')

4. 操作元素自定义属性

  • 获取：元素.getAttribute(\'属性名\')
  • 设置：元素.setAttribute(\'属性名\', \'属性值\')
  • 删除：元素.removeAttribute(\'属性名\')
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title></head><body> <button>操作属性</button> <div id=\"box\" hello=\"world\">div标签</div> <script> // 获取元素 var box = document.querySelector(\'div\') var btn = document.querySelector(\'button\') // 获取自定义属性 console.log(box.getAttribute(\'hello\')) // 给按钮添加点击事件 btn.onclick = function () { // 修改元素属性 box.setAttribute(\'hello\', \'Bob\') box.removeAttribute(\'id\') } </script></body></html>

5. 操作元素类名

  • 获取：元素.className
  • 设置：元素.className = \'新类名\'
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title></head><body> <button>操作样式</button> <div class=\"box\">div标签</div> <script> // 获取元素 var box = document.querySelector(\'div\') var btn = document.querySelector(\'button\') // 获取类名 console.log(box.className) // 给按钮绑定点击事件 btn.onclick = function () { // 设置类名 box.className = \'content\' } </script></body></html>

6. 操作元素行内样式

  • 获取：元素.style.样式名
  • 设置：元素.style.样式名 = \'样式值\'
  • 注意：只能获取和设置元素的行内样式
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title></head><body> <button>操作样式</button> <div style=\"width: 100px; height: 100px; background-color: pink\">文本内容</div> <script> // 获取元素 var box = document.querySelector(\'div\') var btn = document.querySelector(\'button\') // 获取行内样式 console.log(box.style.width) console.log(box.style.height) console.log(box.style.backgroundColor) // 给按钮添加点击事件 btn.onclick = function () { // 修改行内样式 box.style.width = \'200px\' box.style.height = \'200px\' box.style.backgroundColor = \'skyblue\' } </script></body></html>

7. 获取元素非行内样式

  • 获取：元素.window.getComputedStyle(元素).样式名
  • 注意：可以获取元素的行内样式和非行内样式
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <title>Title</title> <style> div { font-size: 20px; } </style></head><body> <button>操作样式</button> <div style=\"width: 100px; height: 100px; background-color: pink\">文本内容</div> <script> // 获取元素 var box = document.querySelector(\'div\') var btn = document.querySelector(\'button\') // 获取非行内样式 console.log(window.getComputedStyle(box).width) console.log(window.getComputedStyle(box).height) console.log(window.getComputedStyle(box).fontSize) </script></body></html>

参考链接：JavaScript的DOM基本操作（上）
感谢您的阅读与支持，如果这篇文章对您有帮助，请关注点赞收藏，您的支持是我创作的动力！
在这里插入图片描述

网络标签：

相关问题