Javascript Dom元素获取和添加详解

2023年6月10日上午11:37 • JavaScript

关于JavaScript中Dom元素获取和添加，可以分为如下几个方面进行讲解：

一、Dom元素获取

Dom元素是页面上的元素，我们可以通过JavaScript代码获取到Dom元素以便进行操作，下面介绍一些常用的Dom元素获取方式：

1. document.getElementById

这是获取单个元素最常用的方法，通过元素id获取单个Dom元素：

var element = document.getElementById('idName');

2. document.getElementsByClassName

通过class名称获取多个Dom元素，返回值是一个集合：

var elements = document.getElementsByClassName('className');

3. document.getElementsByName

通过name属性获取多个Dom元素，返回值是一个集合：

var elements = document.getElementsByName('nameValue');

4. document.getElementsByTagName

通过标签名称获取多个Dom元素，返回值是一个集合：

var elements = document.getElementsByTagName('tagName');

5. document.querySelector

通过CSS选择器获取单个Dom元素：

var element = document.querySelector('.className');

6. document.querySelectorAll

通过CSS选择器获取多个Dom元素，返回值是一个集合：

var elements = document.querySelectorAll('.className');

二、Dom元素添加

获取到Dom元素之后，可以对它进行增删改查等操作，下面是一些常用的Dom元素添加方式：

1. 创建Dom元素

使用document.createElement方法创建一个新的Dom元素：

var newElement = document.createElement('div');

2. 向页面中添加Dom元素

使用appendChild方法将新的Dom元素添加到页面中的某个元素后面：

var parentElement = document.getElementById('parentElementId');
parentElement.appendChild(newElement);

3. 替换页面中的Dom元素

使用replaceChild方法将页面中的元素替换为新的Dom元素：

var oldElement = document.getElementById('oldElementId');
var parentElement = oldElement.parentNode;
parentElement.replaceChild(newElement, oldElement);

4. 在Dom元素之前插入元素

使用insertBefore方法在目标元素之前插入新的Dom元素：

var targetElement = document.getElementById('targetElementId');
var parentElement = targetElement.parentNode;
parentElement.insertBefore(newElement, targetElement);

接下来，我来举两个例子说明一下Dom元素的获取和添加：

三、实例说明

例子一：获取页面中的元素，并修改元素属性

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>演示Dom元素获取和添加</title>
</head>
<body>
  <div id="box">我是一个div元素</div>
  <script type="text/javascript">
    var box = document.getElementById('box');
    box.style.color = 'red';
  </script>
</body>
</html>

首先，我们用document.getElementById函数获取页面中id为'box'的Div元素，然后通过设置CSS样式来改变其文字颜色。在实际开发中，我们可以利用此种方式来进行动态的视觉交互。

例子二：向页面中添加新的Dom元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>演示Dom元素获取和添加</title>
</head>
<body>
  <div id="container">
    <h2>我是标题</h2>
    <p>我是段落</p>
  </div>
  <script type="text/javascript">
    var newElement = document.createElement('p');
    var textNode = document.createTextNode('我是新添加的段落');
    newElement.appendChild(textNode);
    var container = document.getElementById('container');
    container.appendChild(newElement);
  </script>
</body>
</html>

首先，我们通过document.createElement函数创建了一个新的p元素，并通过document.createTextNode函数创建了一个包含内容的文本节点，并将它添加到新的p元素中。接下来，我们通过document.getElementById函数获取页面中id为'container'的元素，并使用appendChild方法添加新创建的p元素到容器中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javascript Dom元素获取和添加详解 - Python技术站