编程 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 相关文章推荐

extjs fckeditor集成代码

May 10 Javascript

为调试JavaScript添加输出窗口的代码

Feb 07 Javascript

JQuery中DOM事件合成用法实例分析

Jun 13 Javascript

javascript中利用柯里化函数实现bind方法

Apr 29 Javascript

聊一聊JavaScript作用域和作用域链

May 03 Javascript

jquery 将当前时间转换成yyyymmdd格式的实现方法

Jun 01 Javascript

微信小程序实战之自定义toast（6）

Apr 18 Javascript

vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

Aug 04 Javascript

微信小程序实现折叠面板

Jan 31 Javascript

Vue项目History模式404问题解决方法

Oct 31 Javascript

weui中的picker使用js进行动态绑定数据问题

Nov 06 Javascript

JavaScript简单编程实例学习

Feb 14 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