JavaScript Dom对象的操作

更新时间：2021年11月03日 14:20:30 作者：三架马车

这篇文章主要介绍了JavaScript Dom对象的操作,文张以浏览器网页就是一个Dom树形结构做为核心，然后根据核心进行更新Dom节点、获得Dom节点、删除一个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对象操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

实践示例理解js强缓存协商缓存
这篇文章主要为大家以实践示例理解js强缓存协商缓存，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
http proxy 对网络请求进行代理使用详解
这篇文章主要为大家介绍了http proxy 对网络请求进行代理使用详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
buildcheck包报错问题排查解决
这篇文章主要为大家介绍了buildcheck包报错问题排查解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
JS实现将图片URL转base64示例详解
这篇文章主要为大家介绍了JS实现将图片URL转base64示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
用Move.js配合创建CSS3动画的入门指引
这篇文章主要介绍了用Move.js配合创建CSS3动画的入门指引,文中介绍了这个JavaScript库中的一些基本方法的使用,需要的朋友可以参考下
2015-07-07
微信小程序联网请求的轮播图
这篇文章主要介绍了微信小程序联网请求的轮播图的相关资料,需要的朋友可以参考下
2017-07-07
微信小程序本地存储及登录页面处理实例详解
这篇文章主要介绍了微信小程序本地存储实例详解的相关资料,需要的朋友可以参考下
2017-01-01
JS滚动到顶部踩坑解决记录
这篇文章主要为大家介绍了一次JS滚动到顶部踩坑解决记录过程分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
JavaScript函数柯里化
这篇文章主要介绍了JavaScript函数柯里化，柯里化即Currying是把接受多个参数的函数变换成接受一个单一参数函数，并且返回接受余下的参数且返回结果的新函数的技术，下面文章详细内容,需要的朋友可以参考一下
2021-11-11
微信小程序中wx.chooseAddress(OBJECT)实例详解
这篇文章主要介绍了微信小程序中wx.chooseAddress(OBJECT)实例详解的相关资料,需要的朋友可以参考下
2017-03-03