位置: 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)(灯光璀璨的夜晚)

  • 钉钉作业提交错了怎么撤回(钉钉作业提交错了怎么重新提交)

    钉钉作业提交错了怎么撤回(钉钉作业提交错了怎么重新提交)

  • 抖音荣誉等级在哪里看(抖音荣誉等级在哪里看2020)

    抖音荣誉等级在哪里看(抖音荣誉等级在哪里看2020)

  • originos系统怎么自定义图标

    originos系统怎么自定义图标

  • qq群里的作业功能怎么操作(QQ群里的作业功能为什么打开后是黑屏)

    qq群里的作业功能怎么操作(QQ群里的作业功能为什么打开后是黑屏)

  • oppor11相机声音怎么关闭(oppo r 11手机照相机声音在哪里关)

    oppor11相机声音怎么关闭(oppo r 11手机照相机声音在哪里关)

  • 苹果手机信号显示ctcc(苹果手机信号显示1x怎么解决)

    苹果手机信号显示ctcc(苹果手机信号显示1x怎么解决)

  • 苹果11运营商设置更新是什么意思(苹果11运营商设置更新)

    苹果11运营商设置更新是什么意思(苹果11运营商设置更新)

  • v30pro有红外吗(华为v30pro有没有红外功能)

    v30pro有红外吗(华为v30pro有没有红外功能)

  • 微信怎么设置输入状态不可见(微信怎么设置输入中不显示)

    微信怎么设置输入状态不可见(微信怎么设置输入中不显示)

  • 旺旺号是淘宝昵称还是会员名(旺旺号是淘宝用户名吗)

    旺旺号是淘宝昵称还是会员名(旺旺号是淘宝用户名吗)

  • qq加多少人达到上限(qq加人多少会频繁)

    qq加多少人达到上限(qq加人多少会频繁)

  • 手机上网ip被记录严重吗(手机ip被网站记录什么情况)

    手机上网ip被记录严重吗(手机ip被网站记录什么情况)

  • 华为snkrs出错(华为snkrs一直显示错误)

    华为snkrs出错(华为snkrs一直显示错误)

  • 苹果7P偶尔会花屏是什么原因(苹果7p偶尔会花屏正常吗)

    苹果7P偶尔会花屏是什么原因(苹果7p偶尔会花屏正常吗)

  • 微博消息感叹号是什么意思(微博私信叹号)

    微博消息感叹号是什么意思(微博私信叹号)

  • pdf和word的区别(手机照片转换成pdf)

    pdf和word的区别(手机照片转换成pdf)

  • 苹果xr可以升级Ios13嘛(苹果XR可以升级5G吗)

    苹果xr可以升级Ios13嘛(苹果XR可以升级5G吗)

  • 连接电视的盒子叫什么(连接电视的盒子怎么设置)

    连接电视的盒子叫什么(连接电视的盒子怎么设置)

  • turck是什么牌子(tuco什么牌子)

    turck是什么牌子(tuco什么牌子)

  • vivox27usb调试在哪(vivox27开启usb调试)

    vivox27usb调试在哪(vivox27开启usb调试)

  • QQ邮箱怎么发送word文档(qq邮箱怎么发送wps文件给别人)

    QQ邮箱怎么发送word文档(qq邮箱怎么发送wps文件给别人)

  • 手环可测血压吗(手环能测量血压么)

    手环可测血压吗(手环能测量血压么)

  • Centos7安装部署免费confluence wiki(知识库)详细操作步骤(centos7安装部署cacti教程)

    Centos7安装部署免费confluence wiki(知识库)详细操作步骤(centos7安装部署cacti教程)

  • Testing Applications with WebTest¶

    Testing Applications with WebTest¶

  • dedecms如何通过程序修改默认文件夹或目录名称呢?(dedecms转其他cms)

    dedecms如何通过程序修改默认文件夹或目录名称呢?(dedecms转其他cms)

  • 提足折旧是指
  • 企业所得税的减免税额和抵免税额区别
  • 代开运输发票会不会造成重复征税
  • 用于维修安装服装的材料
  • 个人捐款合法吗
  • 建筑行业预缴增值税可以用进项抵缴吗
  • 房屋出租的成本怎么算
  • 递延资产放在资产负债表哪里
  • 虚减利润如何进行账务调整?
  • 跨年度销售退回所得税
  • 物业做账的时候怎么做
  • 公司购电缆用于生产如何记账?
  • 让渡资产使用权是指资产的所有者将
  • 个税手续费返还会计分录
  • 支付境外销售佣金增值税扣缴
  • 营改增后劳务派遣公司账务处理
  • 季报进入国税官网后怎么操作?
  • 清包工程增值税税率
  • 资产处置损益是收入还是费用
  • 产权交易费用
  • 折现率为10%怎么算折现系数是多少
  • 金税盘电子发票怎么开
  • 汽车维修发票是几个点
  • 金税盘基本信息设置
  • 王者荣耀中如何隐藏贵族标志
  • 单位卖二手车需交税吗
  • mac键盘图标与对号不一致
  • php转换字符编码
  • elementui中的el-tab-pane为什么内容会为0
  • 跨市设立分公司
  • 企业所得税申报表模板
  • Css中的color属性用于设置html元素的背景颜色
  • eccv论文下载
  • yii2框架和fastadmin建商城网站哪个好用
  • 暂估入账会计科目
  • 印花税的花贴在哪里
  • 固定资产的特点不包括
  • 结转结余的概念
  • 税收罚款支出计入其他应付款吗对吗
  • 增值税抵扣进项税额什么意思
  • 个税申报报的是已离职的员工员工投诉
  • 发票纳税识别号和名称打印出来不齐怎么回事
  • 以前年度的应交税费贷方怎么调平
  • 已经验旧的发票怎么作废
  • 帝国cms会侵权吗为什么
  • mysql5.6允许远程连接
  • 2个公司的法人怎么注销
  • 注册资本认缴出资日期是什么意思
  • 盈利和亏损怎么计算
  • 为支持防疫工作捐款
  • 运输服务属于生活服务吗
  • 专项应付款如何记账
  • 办公桌椅入什么会计科目
  • 押金无法收回账怎么办
  • 对以前年度的收入怎么算
  • 工程项目开发的一般流程
  • 不动产经营租赁会计分录
  • 投资性房地产摊销从什么时候开始
  • 原始单据的重要性
  • 市盈率为负数是说明什么呢
  • mysql如何跨库查询
  • centos怎么添加用户
  • win8怎么装系统
  • 电脑win7在哪
  • win10官方要钱吗
  • hc off line什么意思
  • mac怎么共享打印机设备
  • 电脑操作系统win8
  • node文件目录
  • node.js javascript
  • Android -- service两种启动方式startService与bindService
  • vue 全局状态
  • unity飞机大战游戏毕业论文
  • 安卓调用系统相机
  • jquery.serialize() 函数语法及简单实例
  • 欢迎使用微信支付
  • ca证书怎么下载安装
  • 河南省地税网上营业厅
  • 税务综合办公系统操作手册
  • 工会经费收支办法2022新政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设