位置: IT常识 - 正文

【JavaScript】基于querySelector / querySelectorAll对元素的操作,为你的DOM API基础扫盲~(javascript基础语法)

编辑:rootadmin
【JavaScript】基于querySelector / querySelectorAll对元素的操作,为你的DOM API基础扫盲~

目录

一、通过querySelector / querySelectorAll获取元素

1.1 单个标签选中

1.2 多个标签选中

 二、基于这组DOM API,对元素进行操作

2.1 innerHTML获取/修改元素内容

2.2获取/修改元素属性

三、单标签元素属性的获取和修改

3.1 value

3.2checked

3.3 type

四、样式属性的修改和获取

4.1 fontSize行内样式操作

4.2 类名样式操作

五、操作节点

5.1、新增节点

5.2、删除结点


一、通过querySelector / querySelectorAll获取元素

推荐整理分享【JavaScript】基于querySelector / querySelectorAll对元素的操作,为你的DOM API基础扫盲~(javascript基础语法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript基础笔记,javascript基础编程,javascript基础编程,js基类,javascript基于,javascript基础,javascript基础,js基类,内容如对您有帮助,希望把文章链接给更多的朋友!

        浏览器提供的一个全局对象,类似于CSS中的选择器,可以精准的获取元素对象,这组API都来自于document下,document是浏览器提供的一个全局对象,表示当前页面DOM API基本都是documet对象的方法;

1.1 单个标签选中

        对于单个标签元素的获取,使用querySelector,即可;

如下代码:

<div class="hello" id="hi">你好</div> <script> let div = document.querySelector('div'); console.log(div); </script>

这时候就打开浏览器按下F12,选中控制台,就可以发现,刚刚获取的div元素结果都获取到了;(如下图)

1.2 多个标签选中

        querySelector只是获取单个元素标签,当出现多个相同的元素标签时,只会选中第一个;如果想把多个元素都获取到,可以使用querySelectorAll来完成操作,这个时候返回值就是一个数组,每个元素是一个对象;

如下代码:

<div class="hello" id="hi">你好</div> <div class="word">世界</div> <div class="China">中国</div> <script> let divs = document.querySelectorAll('div'); console.log(divs); </script>

打开浏览器按下F12,选中控制台就可以发现:(如下图)

 二、基于这组DOM API,对元素进行操作2.1 innerHTML获取/修改元素内容

        通过innerHTML获取的是标签内部的子元素内容,所以只适用于双标签,单标签不可以的

获取元素并修改div内容(如下代码)

<div> <span>hello</span> <span>world</span> </div> <script> let div = document.querySelector('div'); //读取元素 console.log(div.innerHTML); //修改元素 div.innerHTML = '<p>这里修改了div元素里的内容</p>' console.log(div.innerHTML); </script>

执行效果如下图:

2.2获取/修改元素属性

        通过querySelector / querySelectorAll对元素对象的获取,可以通过此对象对标签属性的修改,修改的就是标签中写的键值对;

如下代码:点击空的a标签,修改href;(不光是这个栗子,其他所有标签的属性也是通过类似的方法进行操作)

<a href="#">点我跳转百度</a> <script> let a = document.querySelector('a'); a.onclick = function() { a.href = "https://www.baidu.com"; } </script>三、单标签元素属性的获取和修改3.1 value

        通过value获取单标签元素的内容,例如input的标签中,value表示了输入框的内容,修改他,浏览器上的样式也会跟着修改;

如下代码:点击计数(按下+,数字加一,按下-,数字减一)

<input type="text" value="0"> <button class="add">+</button> <button class="sub">-</button> <script> let input = document.querySelector('input'); let add = document.querySelector('.add'); let sub = document.querySelector('.sub'); add.onclick = function() { //这里注意需要转化为int类型,否则就是字符串 let oldValue = parseInt(input.value); oldValue = parseInt(oldValue + 1); input.value = oldValue; } sub.onclick = function() { //这里注意需要转化为int类型,否则就是字符串 let oldValue = parseInt(input.value); oldValue = parseInt(oldValue - 1); input.value = oldValue; } </script>3.2checked

        checked表示了当前复选框的状态——被选中或者未被选中;

如下代码:(单选和全选)

<span>你有什么爱好?</span><br> <input type="checkbox" class="one">弹琴<br> <input type="checkbox" class="one">唱歌<br> <input type="checkbox" class="one">健身<br> <input type="checkbox" class="all">全选<br> <script> let solo = document.querySelectorAll('.one');//返回一个数组 let all = document.querySelector('.all'); all.onclick = function() { for(let i = 0; i < solo.length; i++) { solo[i].checked = all.checked; } } </script>3.3 type

        表示了当前单标签的type属性是什么,同时也可以对其进行修改;

【JavaScript】基于querySelector / querySelectorAll对元素的操作,为你的DOM API基础扫盲~(javascript基础语法)

如下代码:(显示密码和隐藏密码)

<span>输入密码:</span> <input type="password"> <button>显示密码</button> <script> let input = document.querySelector('input'); let button = document.querySelector('button'); button.onclick = function() { if(input.type == 'password') { input.type = 'text'; button.innerHTML = '隐藏密码'; }else if(input.type == 'text') { input.type = 'password'; button.innerHTML = '显示密码'; }else { alert('类型错误!') } } </script>四、样式属性的修改和获取4.1 fontSize行内样式操作

       CSS中的元素属性,都可以通过JS进行修改,通过 元素.style.属性 即可得到style的属性,例如fontSize,这个属性名和CSS中的样式名是对应的,但是CSS里使用脊柱命名,js中是使用小驼峰命名,于是CSS中的font-size就可以认为等价于fontSize;

如下代码:点击字体,开始变大

<h2 style="font-size: 30px;">点击我可以变大</h2> <script> let h2 = document.querySelector('h2'); h2.onclick = function() { let oldSize = h2.style.fontSize; oldSize = parseInt(oldSize); oldSize += 10; //设置样式的值的时候一定要带上单位! h2.style.fontSize = oldSize + 'px'; } </script>4.2 类名样式操作

        CSS开发中最常用的是通过类选择器进行选择,通过修改class属性,实现修改样式的效果,而在JS中通过 元素.className 的方式获得属性,因为在 JS中class是一个关键字,于是就用className来表示这个类属性了~

如下代码:(白天模式and夜间模式)

<style> /*白天模式*/ .light { color: black; background-color: white; } /*夜间模式*/ .night { color: aliceblue; background-color: black; } /*将div铺满整个网页*/ /*html铺满其父类——整个浏览器*/ html { height: 100%; } /*body铺满其父类html*/ body { height: 100%; } /*div铺满其父类body*/ div { height: 100%; } </style> <div class="light"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus? </div> <script> let div = document.querySelector('div'); div.onclick = function() { if(div.className == 'light') { div.className = 'night'; }else { div.className = 'light'; } } </script>五、操作节点5.1、新增节点

分为两个步骤:

第一步:创建元素结点(如下代码)

<body> <script> let div = document.createElement('div'); div.id = 'mydiv';//设置id属性 div.className = 'divName';//设置class属性 div.innerHTML = '好久不见你还好吗?'; console.log(div); </script></body>

解释:

        此时浏览器上并不会有显示,只是创建出了一个新的div结点并填充了属性;通过写下console.log(div),可以在浏览器的控制台里观察到此标签;(下如图)

第二步:把元素结点插入到dom树中;(有两种方法)

        方法一:通过appendChild 或者 append将结点插入到指定结点的最后一个孩子结点的后面(如下代码)

<body> <div class="target"> <div>1</div> <div>2</div> <div>3</div> </div> <script> let div = document.createElement('div'); div.id = 'mydiv';//设置id属性 div.className = 'divName';//设置class属性 div.innerHTML = '好久不见你还好吗?'; console.log(div); let target = document.querySelector('.target'); target.appendChild(div);//这里也可以使用append达到同样的效果 </script></body>

效果如下:(浏览器页面)

 效果如下:(浏览器控制台)

         方法二:使用 insertBefore(要插入的结点,要插入的位置) 将节点插入到指定的节点位置(如下代码,插入到下标为1的位置;“注意:下标从0开始”)

<body> <div class="target"> <div>1</div> <div>2</div> <div>3</div> </div> <script> let div = document.createElement('div'); div.id = 'mydiv';//设置id属性 div.className = 'divName';//设置class属性 div.innerHTML = '好久不见你还好吗?'; console.log(div); let target = document.querySelector('.target'); target.insertBefore(div, target.children[1]);//表示插入到第1个孩子结点的位置(下标从0开始) </script></body>

效果如下:(浏览器页面)

  效果如下:(浏览器控制台)

5.2、删除结点

使用 removeChild 删除子节点

如下代码:

<div id="top"> <div>1</div> <div id="nested">我是要被删除的结点</div> <div>2</div> </div> <script> let d = document.getElementById("top"); let nested = document.getElementById("nested"); let throwawayNode = d.removeChild(nested); </script>

注意:

返回值为该被删除节点;被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位置;

本文链接地址:https://www.jiuchutong.com/zhishi/288826.html 转载请保留说明!

上一篇:【YOLO】YOLOv8实操:环境配置/自定义数据集准备/模型训练/预测(yolov5m)

下一篇:灯光璀璨的曼哈顿下城,美国纽约 (© New York On Air/Offset/Shutterstock)(灯光璀璨的夜晚)

  • office产品处于非活动状态是什么意思(office产品处于非活动)

    office产品处于非活动状态是什么意思(office产品处于非活动)

  • vivox50pro是否有3.5mm耳机孔呢(vivox50pro+有几个版本)

    vivox50pro是否有3.5mm耳机孔呢(vivox50pro+有几个版本)

  • ipad mini5支持pd快充吗(ipad mini5 pd快充支持几w)

    ipad mini5支持pd快充吗(ipad mini5 pd快充支持几w)

  • 淘宝抢东西显示前方拥挤(淘宝抢东西显示前方拥堵)

    淘宝抢东西显示前方拥挤(淘宝抢东西显示前方拥堵)

  • 苹果x刷朋友圈卡顿有解决方法不(苹果刷朋友圈的时候没有信息提示)

    苹果x刷朋友圈卡顿有解决方法不(苹果刷朋友圈的时候没有信息提示)

  • 抖音名字可以随便改吗(抖音名字随机)

    抖音名字可以随便改吗(抖音名字随机)

  • 电脑突然死机是什么原因造成的(电脑突然死机是什么意思)

    电脑突然死机是什么原因造成的(电脑突然死机是什么意思)

  • 携程网怎么转人工服务(携程本人怎么变成了别人)

    携程网怎么转人工服务(携程本人怎么变成了别人)

  • 苹果11贴什么膜(苹果手机贴什么膜好)

    苹果11贴什么膜(苹果手机贴什么膜好)

  • 苹果11边充电边玩手机对电池有影响吗(苹果11边充电边掉电怎么回事)

    苹果11边充电边玩手机对电池有影响吗(苹果11边充电边掉电怎么回事)

  • 微型计算机主要功能是进行(微型计算机主要包括哪些)

    微型计算机主要功能是进行(微型计算机主要包括哪些)

  • word文档怎么去掉修订(word文档怎么去掉批注和修改)

    word文档怎么去掉修订(word文档怎么去掉批注和修改)

  • 苹果手机下载的软件怎么信任(苹果手机下载的歌曲在哪儿找)

    苹果手机下载的软件怎么信任(苹果手机下载的歌曲在哪儿找)

  • 华为mate30 5G版电池容量多少(华为mate305g版电池容量只有85%)

    华为mate30 5G版电池容量多少(华为mate305g版电池容量只有85%)

  • vivo实况模式怎么打开(vivos9实况模式)

    vivo实况模式怎么打开(vivos9实况模式)

  • 苹果8按键震动怎么关(苹果8按键震动怎么关闭)

    苹果8按键震动怎么关(苹果8按键震动怎么关闭)

  • 魅蓝note5换电池教程(魅蓝note5换电池后密码不对了)

    魅蓝note5换电池教程(魅蓝note5换电池后密码不对了)

  • nova3和nova4区别(nova3和nova4参数对比)

    nova3和nova4区别(nova3和nova4参数对比)

  • 如何防止网页被修改(如何防止网页被监控)

    如何防止网页被修改(如何防止网页被监控)

  • 如何在BIOS中进行设置 怎么设置bios(bios 怎么进去)

    如何在BIOS中进行设置 怎么设置bios(bios 怎么进去)

  • 火灾烧毁大部分森林后,野花遍地的凯尔特河野营地 (© Debra Brash/plainpicture)(火灾烧毁物品如何取证)

    火灾烧毁大部分森林后,野花遍地的凯尔特河野营地 (© Debra Brash/plainpicture)(火灾烧毁物品如何取证)

  • 使用YOLOv5模型进行目标检测!AI大佬手撕源码带你学(yolov3模型大小是多少)

    使用YOLOv5模型进行目标检测!AI大佬手撕源码带你学(yolov3模型大小是多少)

  • 企业所得税视同销售的会计处理是?
  • 小规模纳税人为什么没有进项
  • 金税四期对企业的六点影响
  • 汇算清缴调表不调账调的是哪张表
  • 子公司分红母公司要不要交税
  • 安保公司差额征税开具发票
  • 个人提供技术服务费开票税率
  • 机动车换车
  • 未加盖发票专用章的发票是不合规
  • 财产保险合同印花税计税依据
  • 公司采购报销没发票
  • 生产企业固定资产折旧
  • 物业公司预收款怎么做账
  • 网银 密码器
  • 销售货物多收款怎么处理
  • 应有财务软件
  • 利润表中列报项目
  • 个体工商户怎么注册
  • 企业去年
  • 在外省预交企业所得税
  • 工会筹备金需要在年终汇算调增吗
  • 三证合一的税号变了,法人怎么重新绑定企业
  • 加计扣除需要注意的几大风险点
  • 计提法定盈余公积转入利润分配
  • 小规模纳税人少计提的工资怎么办
  • 企业收到固定资产投资时应按什么入账
  • 增值税认证平台确认以后还可以再认证吗
  • 购房发票拿到了接着干什么
  • window11系统怎么用
  • 如何设置自动登录账号
  • 公司向法人借款会计分录
  • 高新企业开办费是多少
  • 承兑汇票还款
  • 腾讯电脑管家中蓝牙在哪
  • 无形资产摊销的会计科目怎么录
  • php中数组的常用函数及用法
  • 关联企业承担什么责任
  • 公司收到发票怎么做账
  • 增值税纳税申报首先要稽核比对
  • 三方债权债务抵消如何开发票
  • 出租的厂房房产税如何征收
  • uniapp 信息推送
  • 两个岗位 如何选择
  • Symfony2创建页面实例详解
  • 公允价值变动损益在利润表哪里
  • 自产产品发给员工账务处理
  • random_state=123
  • 分次预缴税额怎么算
  • web前端入门教程
  • webform前端
  • vue有哪些方法
  • KITTI数据集可视化(一):点云多种视图的可视化实现
  • zabbix 网络监控
  • 一般纳税人申请条件
  • 增值税发票怎么领取
  • 企业税金及附加包括什么
  • 工程进度节点奖励考核
  • 费用科目可以在借方吗
  • 小企业会计准则2023电子版
  • mysql常用查询
  • 电脑硬件用途
  • windows10周年更新
  • mac快速操作在哪
  • linux 怎么样
  • win7 64位纯净版图标变成了一样该怎么办?win7旗舰版图标变成一样的解决方法
  • js闭包的应用
  • javascript的区别
  • android真机调试解析包错误
  • eclipse 单词
  • unity 数学
  • jquery 字符串以什么开头
  • js内存泄漏的原因及解决办法
  • js自定义指令
  • 安卓手机管家在哪里打开
  • javascript中的原型和原型链
  • 河南省医保卡中心电话
  • 深圳税务 qzzn
  • 什么是解放思想?请阐述解放思想和实事求是之间的关系
  • 个人所得税法全文完整版2021实施细则
  • 云南省国家税务局APP
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设