编程 Javascript

Javascript Dom元素获取和添加详解

Posted in Javascript onSeptember 24, 2019

1.Dom元素的获取

document.getElementById()：通过id获取一个Dom元素
document.getElementsByClassName()：通过class名字获取一个或多个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>

2.Dom元素节点类型

Dom节点类型分3类：元素节点,属性节点,文本节点

每种节点都有3种属性 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>

3.获取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的最后一个元素

4.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.removeChild(替换的元素, 被替换的元素)

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Javascript Dom元素获取和添加详解

- Author -

---空白---

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Jquery 基础学习笔记之文档处理

May 29 Javascript

JavaScript中的undefined学习总结

Nov 30 Javascript

AngularJS 所有版本下载地址

Sep 14 Javascript

遍历json 对象的属性并且动态添加属性的实现

Dec 02 Javascript

详解基于Angular4+ server render(服务端渲染)开发教程

Aug 28 Javascript

除Console.log()外更多的Javascript调试命令

Jan 24 Javascript

Node.js系列之安装配置与基本使用（1）

Aug 30 Javascript

JavaScript 自定义html元素鼠标右键菜单功能

Dec 02 Javascript

vue中实现图片压缩 file文件的方法

May 28 Javascript

Vue组件为什么data必须是一个函数

Jun 11 Javascript

JavaScript如何实现监听键盘输入和鼠标监点击

Jul 20 Javascript

vue 项目引入echarts 添加点击事件操作

Sep 09 Javascript

微信小程序全局变量的设置、使用、修改过程解析

Sep 24 #Javascript

layui监听select变化,以及设置radio选中的方法

Sep 24 #Javascript

layui 监听select选择获取当前select的ID名称方法

Sep 24 #Javascript

layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)

Sep 24 #Javascript

layui将table转化表单显示的方法(即table.render转为表单展示)

Sep 24 #Javascript

JavaScript RegExp 对象用法详解

Sep 24 #Javascript

在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法

Sep 24 #Javascript