web前端学习(四十二)——JavaScript DOM元素(添加、移除及替换)、DOM集合(Collection)、DOM节点列表(NodeList)

本文涉及的产品
云数据库 Redis 版,社区版 2GB
推荐场景:
搭建游戏排行榜
简介: web前端学习(四十二)——JavaScript DOM元素(添加、移除及替换)、DOM集合(Collection)、DOM节点列表(NodeList)

1.DOM元素的相关操作方法


方法

描述

getElementById()

返回带有指定 ID 的元素。

getElementsByTagName()

返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。

getElementsByClassName()

返回包含带有指定类名的所有元素的节点列表。

appendChild()

把新的子节点添加到指定节点。

removeChild()

删除子节点。

replaceChild()

替换子节点。

insertBefore()

在指定的子节点前面插入新的子节点。

createAttribute()

创建属性节点。

createElement()

创建元素节点。

createTextNode()

创建文本节点。

getAttribute()

返回指定的属性值。

setAttribute()

把指定属性设置或修改为指定的值。

1.1 创建新的 HTML 元素 (节点) - appendChild()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JS简单学习</title>
  </head>
  <body>
    <div id="div1">
      <p id="p1">这是一个段落。</p>
      <p id="p2">这是另外一个段落。</p>
    </div>
    <script type="text/javascript">
      //创建 <p></p> 元素
      var para=document.createElement("p");
      //为 <p></p> 元素创建一个新的文本节点
      var node=document.createTextNode("这是一个新的段落。");
      //将文本节点添加到 <p></p> 元素中
      para.appendChild(node);
      //查找已存在的元素 <div></div>
      var element=document.getElementById("div1");
      //把新创建的 <p></p> 元素添加到已存在的元素 <div></div> 中
      element.appendChild(para);
    </script>
  </body>
</html>

1.2 创建新的 HTML 元素 (节点) - insertBefore()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <div id="div1">
      <p id="p1">这是一个段落。</p>
      <p id="p2">这是另外一个段落。</p>
    </div>
    <script type="text/javascript">
      //创建 <p></p> 元素
      var para=document.createElement("p");
      //为 <p></p> 元素创建一个新的文本节点
      var node=document.createTextNode("这是一个新的段落。");
      //将文本节点添加到 <p></p> 元素中
      para.appendChild(node);
      //查找已存在的父元素 <div></div>
      var element=document.getElementById("div1");
      //查找已存在的子元素 <p></p>
      var child=document.getElementById("p1");
      //在div模块中,将新创建的 para 元素添加到 child 元素之前
      element.insertBefore(para,child);
    </script>
  </body>
</html>

1.3 移除已存在的HTML 元素 - removeChild()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <div id="div1">
      <p id="p1">这是一个段落。</p>
      <p id="p2">这是另外一个段落。</p>
    </div>
    <script type="text/javascript">
      var parent=document.getElementById("div1");
      var child=document.getElementById("p1");
      //从父元素 <div> 中移除 id="p1" 的子元素 <p>
      parent.removeChild(child);
    </script>
  </body>
</html>

1.4 替换 HTML 元素 - replaceChild()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <div id="div1">
      <p id="p1">这是一个段落。</p>
      <p id="p2">这是另外一个段落。</p>
    </div>
    <script type="text/javascript">
      var para=document.createElement("p");
      var node=document.createTextNode("这是一个新的段落。");
      para.appendChild(node);
      var parent=document.getElementById("div1");
      var child=document.getElementById("p1");
      //在div模块中,将新创建的 para 元素替换掉 child 元素
      parent.replaceChild(para,child);
    </script>
  </body>
</html>

 

2.DOM集合(Collection)


getElementsByTagName()方法返回 HTMLCollection 对象。

HTMLCollection对象类似包含 HTML 元素的一个数组HTMLCollection 对象的 length 属性定义了集合中元素的数量。(常用于遍历集合中的元素)

注意:HTMLCollection 不是一个数组!

HTMLCollection看起来可能是一个数组,但其实不是。你可以像数组一样,使用索引( 0 为起始位置)来访问获取元素。

HTMLCollection无法使用数组的方法: valueOf(), pop(), push(), join()

2.1 实例一:通过索引访问元素、使用length属性 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <h2>JavaScript HTML DOM</h2>
    <p>Hello World!!!</p> 
    <p>Hello Redis!!!</p> 
    <p id="demo"></p>
    <script type="text/javascript">
      var myCollection=document.getElementsByTagName("p");
      document.getElementById("demo").innerHTML=
        "第二个段落的内容为: <span style='color: red;'>" + myCollection[1].innerHTML + "</span>";
      document.write("文档包含" + myCollection.length + " 个段落。");
    </script>
  </body>
</html>

2.2 实例二:通过length属性对集合进行遍历

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <h2>JavaScript HTML DOM</h2>
    <p>Hello World!!!</p> 
    <p>Hello Redis!!!</p>
    <p>点击按钮修改 p 元素的字体颜色。</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <script type="text/javascript">
      function myFunction() {
        var myCollection=document.getElementsByTagName("p");
        for(var i=0;i<myCollection.length;i++) {
          myCollection[i].style.color="red";
        }
      }
    </script>
  </body>
</html>

3.DOM节点列表(NodeList)


NodeList 对象是一个从文档中获取的节点列表 (集合) NodeList 对象类似 HTMLCollection 对象。


一些旧版本浏览器中的方法(如:getElementsByClassName())返回的是 NodeList 对象,而不是 HTMLCollection对象。


所有浏览器的childNodes属性返回的是 NodeList 对象。大部分浏览器的querySelectorAll()返回 NodeList 对象。


NodeList对象 length 属性定义了节点列表中元素的数量。

NodeList是一个文档节点的集合。


NodeList HTMLCollection有很多类似的地方。

NodeList HTMLCollection都与数组对象有点类似,可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。


NodeList HTMLCollection都有length 属性。

HTMLCollection元素可以通过 nameid 或索引来获取。

NodeList只能通过索引来获取。只有 NodeList 对象有包含属性节点和文本节点。

节点列表不是一个数组!节点列表看起来可能是一个数组,但其实不是。你可以像数组一样,使用索引来获取元素。(以 0 为起始位置来访问)

节点列表无法使用数组的方法: valueOf(), pop(), push(), join()

3.1 实例一:通过索引访问元素、使用length属性  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <h2>JavaScript HTML DOM</h2>
    <p>Hello World!!!</p> 
    <p>Hello Redis!!!</p> 
    <p id="demo"></p>
    <script type="text/javascript">
      var myNodelist=document.querySelectorAll("p");
      document.getElementById("demo").innerHTML=
        "第二个段落的内容为: <span style='color: red;'>" + myNodelist[1].innerHTML + "</span>";
      document.write("文档包含 " + myNodelist.length + " 个段落。");
    </script>
  </body>
</html>

3.2 实例二:通过length属性对节点列表进行遍历

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <h2>JavaScript HTML DOM</h2>
    <p>Hello World!!!</p> 
    <p>Hello Redis!!!</p>
    <p>点击按钮修改 p 元素的字体颜色。</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <script type="text/javascript">
      function myFunction() {
        var myNodelist=document.querySelectorAll("p");
        for(var i=0;i<myNodelist.length;i++) {
          myNodelist[i].style.color="red";
        }
      }
    </script>
  </body>
</html>

 

相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore &nbsp; &nbsp; ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库&nbsp;ECS 实例和一台目标数据库&nbsp;RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&amp;RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
7天前
|
移动开发 前端开发 JavaScript
前端高效开发JavaScript库!
前端高效开发JavaScript库!
|
1天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
3 1
|
6天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
6天前
|
存储 前端开发 JavaScript
JavaScript数据类型归纳,架构师花费近一年时间整理出来的前端核心知识
JavaScript数据类型归纳,架构师花费近一年时间整理出来的前端核心知识
JavaScript数据类型归纳,架构师花费近一年时间整理出来的前端核心知识
|
6天前
|
JavaScript 前端开发 架构师
Web Components:自定义元素与Shadow DOM的实践
Web Components是用于创建可重用自定义HTML元素的技术集合,包括Custom Elements、Shadow DOM、HTML Templates和Slots。通过Custom Elements定义新元素,利用Shadow DOM封装私有样式,&lt;slot&gt;元素允许插入内容。自定义元素支持事件处理和属性观察,可复用且样式隔离。它们遵循Web标准,兼容各前端框架,注重性能优化,如懒加载和Shadow DOM优化。
7 0
|
6天前
|
前端开发 JavaScript
前端 JS 经典:Math 常用方法汇总
前端 JS 经典:Math 常用方法汇总
10 0
|
6天前
|
前端开发 JavaScript
JavaScript:this-关键字,2024中级前端开发面试解答
JavaScript:this-关键字,2024中级前端开发面试解答
|
6天前
|
前端开发 JavaScript
前端 JS 经典: 富文本高亮关键字
前端 JS 经典: 富文本高亮关键字
7 0
|
6天前
|
缓存 前端开发 JavaScript
Javascript模块化开发基础,最新美团点评前端团队面试题
Javascript模块化开发基础,最新美团点评前端团队面试题
|
6天前
|
数据安全/隐私保护
那些酷炫的网页你也可以做到——第六篇,小型公司web开发
那些酷炫的网页你也可以做到——第六篇,小型公司web开发