JavaScript之DOM操作

news/2024/11/24 9:49:08/

目录

  • 一、对元素进行操作
    • 1.动态生成元素
    • 2.在尾部插入一个元素
    • 3.在指定位置插入元素
    • 4.替换指定元素
    • 5.删除子级元素
    • 6.删除自身元素
    • 7.innerHTML
  • 二、对属性进行操作
    • 1.属性的设置(setAttribute)
    • 2.属性的获取(getAttribute)
    • 3.属性的删除(removeAttribute)
    • 4.属性的检测(hasAttribute)
  • 三、对类的控制
    • 1.className
    • 2.classList
      • 2.1 classList.add
      • 2.2 classList.remove
      • 2.3 classList.contains
      • 2.4 classList.toggle

一、对元素进行操作

1.动态生成元素

  createElement()用于生成一个元素。

语法格式:
createElement(’ ')

var oInput = docunment.createElement('input');

2.在尾部插入一个元素

  appendChild()用于在尾部插入元素;
 即插入到该元素子级的最后方。

语法格式:
appendChild( )

    var oInput = document.createElement('input');document.body.appendChild(oInput);
//练习var oInput = document.createElement('input');oInput.type = 'button';oInput.value='我是一个小按钮';document.body.appendChild(oInput);

3.在指定位置插入元素

  insertBefore()用于在指定的位置插入元素。
第一个参数,是要插入的元素,第二个参数是插入指定元素的前面

语法格式:
insertBefore(要插入的元素,要被替换的元素)

outNode.insertBefore(oDiv,div1)

4.替换指定元素

  replaceChild()用于替换子级元素。

语法格式:

replace(插入到指定元素前面的元素,要替代的元素)

var Ipt =docunment.createElement('input');
outNode.replaceChild(Ipt,outNode.children[0]);

5.删除子级元素

  remove()用于删除子级元素

outNode.removeChild(Span);

   remove()只能删除父级元素里面的第一级元素。不能跨层使用。

//当不知道父级元素的名字的时候可以这样使用
Span.parentNode.removeChild(Span);

6.删除自身元素

  remove()用于把自己删了

//我要切腹自尽!
Span.remove();
outNode.Children[0].remove();

7.innerHTML

  innerHTML用于设置元素内容

div1.innerHtml = div1.innerHTML +'<span>123</span>';

如果赋值,就是先清空里面的内容,再加上新内容
如果是+=,不会清空,直接加上新内容

二、对属性进行操作

1.属性的设置(setAttribute)

setAttribute(属性,属性值);
eg:		A.setAttribute(herf,'http:wwww.baidu.com')

就可以显示在页面的元素的上面了

//只想挂属性,不挂值
setAttribute(属性,"  ")

2.属性的获取(getAttribute)

getAttribute(属性)
eg:		console.log(A.getAttribute('fs'))

3.属性的删除(removeAttribute)

removeAttribute(属性)
eg:	A.removeAttirbute(属性)

4.属性的检测(hasAttribute)

hasAttribute(属性)
eg:	A.hasAttirbute(属性)
//如果元素有这个属性,将会返回true,没有就flase

三、对类的控制

1.className

  className是控制类的最基本的方式。

A.className
console.log(A.className);

  可以返回或者设置元素的className

2.classList

A.classList

2.1 classList.add

//用于添加一个类(className)
A.classList.add('div1');

2.2 classList.remove

//用于删除一个类(className)
A。classList.remove('div1');

2.3 classList.contains

//用于判断classList中是否包含这个类(className)
console.log(A.classList.contains('div1'));

  如果有,将返回true,没有返回false

2.4 classList.toggle

/* 用于切换类(className)
如果有,则删除该类,如果没有,则添加此类 */
A.classList.toggle('div1');

还有一件事!

你如果觉得我的笔记对你有用,可以来个点赞、收藏、加关注吗
  有问题可以评论区或者私信问我

在这里插入图片描述


http://www.ppmy.cn/news/37903.html

相关文章

nginx--开源免费

nginx开源免费&#xff0c;支持高性能&#xff0c;高并发的web服务和代理服务软件。 apache,nodejs nginx可以提供的服务&#xff1a; 1、web服务 2、负载均衡&#xff08;反向代理&#xff09;&#xff08;动静分离&#xff09; 3、web cache(web缓存&#xff09; nginx…

android studio安装automotive模拟器

添加源 打开android studio的SDK Manager选择SDK Update Sites选项卡点击Add,弹出地址设置界面 添加polestar2-sys-img Name填写&#xff1a;Polestar 2 System Image (可自定义)URL填写&#xff1a;https://developer.polestar.com/sdk/polestar2-sys-img.xml其他保持默认 添…

算法---扫雷游戏

题目 让我们一起来玩扫雷游戏&#xff01; 给你一个大小为 m x n 二维字符矩阵 board &#xff0c;表示扫雷游戏的盘面&#xff0c;其中&#xff1a; ‘M’ 代表一个 未挖出的 地雷&#xff0c; ‘E’ 代表一个 未挖出的 空方块&#xff0c; ‘B’ 代表没有相邻&#xff08;…

Servlet基础

快速入门 创建maven web项目&#xff0c;导入Servlet依赖坐标&#xff1a; <dependencies><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>4.0.1</version><scope>…

企业申请的ISO认证证书,证书状态如何辨别?

企业申请的ISO认证证书&#xff0c;证书状态如何辨别&#xff1f; 关于ISO证书的有效期及ISO证书年度监督审核规定&#xff1a; ISO证书的有效期&#xff1a;ISO认证证书的有效期为三年&#xff0c;每年进行年度监督审核。每次的年度监督审核时间间隔不能超过12个月&#xff0…

C++ Primer第五版_第九章习题答案(11~20)

文章目录练习9.11练习9.12练习9.13练习9.14练习9.15练习9.16练习9.17练习9.18练习9.19练习9.20练习9.11 对6种创建和初始化 vector 对象的方法&#xff0c;每一种都给出一个实例。解释每个vector包含什么值。 vector<int> vec; // 0 vector<int> vec(10); //…

云原生Java架构实战 K8s+Docker+KubeSphere+DevOps(上)

简介&#xff1a;摘自 尚硅谷雷锋阳老师的语雀文档 学会使用按量付费的云服务器&#xff0c;开发测试性价比高 私有网络VPC 和网络有关的概念&#xff0c;如何在云服务器开通一个集群 一个云服务器有两个IP&#xff1a;公网IP和私网IP 公网IP&#xff1a;对外暴露资源的访…

SpringBoot源码 | refreshContext方法解析

SpringBoot源码 | refreshContext方法解析SpringBootrefreshContext源码refresh方法prepareRefreshobtainFreshBeanFactoryprepareBeanFactorypostProcessBeanFactoryinvokeBeanFactoryPostProcessorsregisterBeanPostProcessorsinitMessageSourceinitApplicationEventMulticas…