我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript Dom对象的操作

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript Dom对象的操作

一、核心

浏览器网页就是一个Dom树形结构

  • 更新:更新Dom节点
  • 遍历Dom节点:获得Dom节点
  • 删除:删除一个Dom节点
  • 添加:添加一个新的节点

要操作一个Dom节点,就必须要先获得这个Dom节点

1、获得Dom节点


 <body>
    <div id="div1">
   <h1 id="h"></h1>
   <p class="p1"></p>
   </div>
 </body>


 //通过标签
   document.getElementsByTagName('h1');
  //通过id
   document.getElementById('div1');
  //通过class
   document.getElementsByClassName('p1');
  //获取父节点
   h.parentElement
  //获取父节点下所有子节点
   div1.children[index];
  //获取当前节点下,第一个节点
   div1.firstElementChild;
  //获取当前节点下,最后一个节点
   div1.lastElementChild;
  //获取下一个节点
   h.nextElementSibling;

2、更新节点


   //更新文本的值
   div1.innerText='修改文本的值'; 
   //更新超文本,可以解析html文本标签
   div1.innerHTML='<strong>添加超文本</storng>';
   //更新css
   div1.style.color='red';
   div1.style.fontSize='20px';//驼峰命名
   div1.style.padding='2em';

2.1 实战演练

获取id

没改之前

操作input

3、删除Dom节点

删除节点步骤:先获取父节点,再通过父节点删除自己


let self=document.getElementById('p1');//获取删除节点
let father=self.parentElement//获取父节点
father.removeChild(self);//通过父节点删除节点

注意:删除节点的时候,子节点数组是在不断地变化,所以不能通过数组静态连续删除,只能多次通过动态删除

4、插入节点

我们获得某个Dom节点,假设这个 Dom节点是空的,我们通过innerHtML就可以添加一个元素,但是这个Dom节点已经存在元素了,就会产生覆盖


 <body>
 
  <p id="p1">Java</p>
  <div id="div1">
  <p>JavaScript</p>
  <p>css</p>
  <p>C</p>
  </div>
 </body>

4.1 把已有的标签进行插入


let a=document.getElementById('div1');
let b=document.getElementById('p1');
a.appendChild(b);//追加

效果

4.2 创建一个新的标签,实现插入


   let a=document.createElement('p');//创建节点 p标签
   a.id='p2';
   a.innerText='hello,小沈';
   let list=document.getElementById('div1');//获取div1 id
   list.appendChild(a);//追加子节点
   //创建标签节点
   let a=document.createElement('script');
   a.setAttribute('type','text/javascript');

效果:


 //创建style标签节点
   let st=document.createElement('style');
   st.setAttribute('type','text/css');
   st.innerHTML='body{ background-color:pink;}';
   let hd=document.getElementsByTagName('head')[0];//注意点,head在第0个元素。
   hd.appendChild(st);

效果:

4.3 在子节点前插入(insertBefore)


<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
 
  <p id="p1">Java</p>
  <div id="div1">
  <p id="px">JavaScript</p>
  <p id='p2'>css</p>
  <p id="p3">C</p>
  </div>
  <script type="text/javascript">
  //拥有子节点的父节点
  let list=document.getElementById('div1');
  let self=document.getElementById('p2');
  let befoe=document.getElementById('p1');
  list.insertBefore(befoe,self);

  </script>
 </body>
</html>

效果:

到此这篇关于JavaScript Dom对象的操作的文章就介绍到这了,更多相关JavaScript Dom对象操作内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript Dom对象的操作

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript怎么操作DOM对象

这篇文章主要为大家展示了“JavaScript怎么操作DOM对象”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript怎么操作DOM对象”这篇文章吧。一、DOM基础DOM(Docum
2023-06-29

如何实现 JavaScript DOM 操作?(JavaScript DOM操作怎样实现)

在JavaScript开发中,DOM(DocumentObjectModel)操作是一项非常重要的技能。DOM允许我们通过编程方式访问和修改HTML文档的结构、样式和内容。本文将详细介绍如何实现JavaScriptDOM操作,帮助你更好地掌握这一技能。
如何实现 JavaScript DOM 操作?(JavaScript DOM操作怎样实现)
Java2024-12-22

如何进行 JavaScript DOM 操作中的节点操作?(JavaScript DOM操作怎样进行节点操作)

在JavaScript开发中,DOM(文档对象模型)操作是非常重要的一部分。其中,节点操作是DOM操作的基础,它允许我们对HTML文档中的各种节点进行添加、删除、修改等操作。本文将详细介绍JavaScriptDOM操作中如何进行节点操作。一、D
如何进行 JavaScript DOM 操作中的节点操作?(JavaScript DOM操作怎样进行节点操作)
Java2024-12-22

ajax操作如何JavaScript 对象

这篇文章主要讲解了“ajax操作如何JavaScript 对象”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ajax操作如何JavaScript 对象”吧!1.取得JSON 前面我们曾经看
2023-06-08

如何简化 JavaScript DOM 操作的代码?(JavaScript DOM操作怎样简化代码)

在JavaScript开发中,DOM(文档对象模型)操作是一项非常常见且重要的任务。然而,随着DOM操作的复杂性增加,代码往往会变得冗长而难以维护。那么,如何简化JavaScriptDOM操作的代码呢?下面将为大家介绍一些有效的方法。一、使用事件委
如何简化 JavaScript DOM 操作的代码?(JavaScript DOM操作怎样简化代码)
Java2024-12-18

JavaScript DOM 操作究竟有哪些重要作用呢?(JavaScript DOM操作有何作用)

在前端开发领域,JavaScriptDOM操作扮演着至关重要的角色。DOM(DocumentObjectModel)即文档对象模型,它是浏览器提供的一种用于访问和操作HTML或XML文档的编程接口。一、DOM操作的基本概念
JavaScript DOM 操作究竟有哪些重要作用呢?(JavaScript DOM操作有何作用)
Java2024-12-14

怎么在JavaScript中操作DOM

本篇文章给大家分享的是有关怎么在JavaScript中操作DOM,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。javascript是一种什么语言javascript是一种动态类
2023-06-14

编程热搜

目录