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

通过修改referer下载文件的方法

May 11 Javascript

浅析XMLHttpRequest的缓存问题

Dec 13 Javascript

jquery自动切换tabs选项卡的具体实现

Dec 24 Javascript

jQery使网页在显示器上居中显示适用于任何分辨率

Jun 09 Javascript

js判断某个方法是否存在实例代码

Jan 10 Javascript

jquery实现Slide Out Navigation滑出式菜单效果代码

Sep 07 Javascript

jQuery实现鼠标经过事件的延时处理效果

Aug 20 Javascript

基于Javascript实现返回顶部按钮

Feb 29 Javascript

js实现随机点名小功能

Aug 17 Javascript

react-native封装插件swiper的使用方法

Mar 20 Javascript

Vue 实现从小到大的横向滑动效果详解

Oct 16 Javascript

vue中数字相加为字串转化为数值的例子

Nov 07 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