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

  • 企业推广怎么区分论坛发帖和新闻稿(企业的推广)

    企业推广怎么区分论坛发帖和新闻稿(企业的推广)

  • 腾讯视频多人登录观看记录能看到吗(腾讯视频多人登录会怎么样)

    腾讯视频多人登录观看记录能看到吗(腾讯视频多人登录会怎么样)

  • 爱奇艺怎么创建房间后邀请好友一起看(爱奇艺怎么创建房间和别人一起看视频)

    爱奇艺怎么创建房间后邀请好友一起看(爱奇艺怎么创建房间和别人一起看视频)

  • oppo手机步数怎么设置在锁屏上(oppo手机步数怎么到微信运动)

    oppo手机步数怎么设置在锁屏上(oppo手机步数怎么到微信运动)

  • 三天朋友圈针对个人吗(三天的朋友圈是针对一个人还是所有人呢)

    三天朋友圈针对个人吗(三天的朋友圈是针对一个人还是所有人呢)

  • 苹果手机相机声音在哪里关闭(苹果手机相机声音关)

    苹果手机相机声音在哪里关闭(苹果手机相机声音关)

  • 华为手机屏幕有水印(华为手机屏幕有残影怎么解决)

    华为手机屏幕有水印(华为手机屏幕有残影怎么解决)

  • 向日葵卸载后无法再次安装(向日葵卸载后无法再次安装怎么办)

    向日葵卸载后无法再次安装(向日葵卸载后无法再次安装怎么办)

  • 苹果手机拍的视频不能播放(苹果手机拍的视频没有声音怎么回事)

    苹果手机拍的视频不能播放(苹果手机拍的视频没有声音怎么回事)

  • iphone骚扰电话怎么拦截(骚扰电话 苹果手机)

    iphone骚扰电话怎么拦截(骚扰电话 苹果手机)

  • oppo手机一开机就出现简体中文(oppo手机一开机出现coloros)

    oppo手机一开机就出现简体中文(oppo手机一开机出现coloros)

  • 笔记本电脑开机黑屏电源灯有亮(笔记本电脑开机黑屏没反应怎么办)

    笔记本电脑开机黑屏电源灯有亮(笔记本电脑开机黑屏没反应怎么办)

  • 闲聊提现延迟怎么办(闲聊提现要好久)

    闲聊提现延迟怎么办(闲聊提现要好久)

  • xr只有一边有声音吗(iphonexr 一边有声音一边没声音)

    xr只有一边有声音吗(iphonexr 一边有声音一边没声音)

  • 计算机病毒破坏的主要对象是(计算机病毒破坏性是指)

    计算机病毒破坏的主要对象是(计算机病毒破坏性是指)

  • 换内存条会丢失数据吗(换内存条会丢失文件吗)

    换内存条会丢失数据吗(换内存条会丢失文件吗)

  • 华为两个微信设置方法(华为两个微信设置)

    华为两个微信设置方法(华为两个微信设置)

  • 手机6个g和8个g区别(手机八g和六g有什么区别)

    手机6个g和8个g区别(手机八g和六g有什么区别)

  • 快手作品能调换顺序吗(快手发作品怎么切换城市)

    快手作品能调换顺序吗(快手发作品怎么切换城市)

  • 快手没有播放量怎么回事(快手没有播放量怎么养号)

    快手没有播放量怎么回事(快手没有播放量怎么养号)

  • 华为mate20充满电时间(华为mate20充满电会自己断开吗)

    华为mate20充满电时间(华为mate20充满电会自己断开吗)

  • 电脑怎么做系统win7(戴尔电脑怎么做系统)

    电脑怎么做系统win7(戴尔电脑怎么做系统)

  • 苹果5屏幕录制在哪(苹果屏幕录制在哪里打开)

    苹果5屏幕录制在哪(苹果屏幕录制在哪里打开)

  • swapon命令  激活交换分区(wrap激活)

    swapon命令 激活交换分区(wrap激活)

  • 企业所得税核定征收税率表最新
  • 城建税和教育费附加减免政策
  • 小企业会计准则是什么意思
  • 投标报名费开什么类别发票
  • 企业所得税1季度申报季初从业人数个税所属期12月
  • 捐赠的营业外收入怎么算
  • 发票不走账对哪方有害
  • 小规模纳税人进项
  • 企业资产损失所得税税前扣除办法
  • 企业的现金流量表反映的是什么
  • 企业交税前可以扣除的费用
  • 土地投资入股是否需要发票作为企业所得税税前扣除凭证
  • 抵减的增值税如何记账
  • 事业单位破产清算程序规定
  • 废物处置费如何做分录?
  • 公司向贷款公司贷款做账分录
  • 外地预缴税费怎么做账
  • 库存材料盘亏会计分录
  • 奖金计提发放会计分录
  • 关税不可以抵扣吗
  • 金税三期啥意思
  • 补贴与工资薪金一起发放,属于福利费,还是纳入工资薪金总额税前扣除?
  • 企业向员工集资利息标准
  • 回单是会计还是出纳职责
  • 增值税在免税范围内,附加税怎么做
  • 预收房款不征税发票
  • 经营费用包括哪些内容
  • 开具成品油发票规格型号有哪些要求
  • win10的病毒隔离有用吗
  • elementui能做什么
  • php读取opc
  • 无形资产的账务处理候文江视频
  • 纳税人临时到外省从事经营活动
  • 会计人员准则
  • 企业出租房屋怎么做账
  • 面试官:一千万是真的吗
  • 冰川国家公园在哪
  • 框架如何使用
  • 1.2版本的oppo手机解锁方法
  • vue clonedeep
  • vue3.0 vite
  • 收到员工的社保费用记什么科目
  • javascript和java有什么区别
  • java string.class
  • db2udb
  • 清算汇缴报表填写范本
  • 低值易耗品指的价格
  • mysql sql性能调优的方法
  • 公对公打款发票
  • 限制性股票应纳税额的确定
  • 服务类发票怎么做分录
  • 贴现法年末偿还金额
  • 购入库存商品会计摘要怎么写
  • 政府会计制度之1613在建工程
  • 本年利润的计算
  • sql分几类
  • 电脑更新win10系统软件
  • 卡巴斯基2019
  • windows自带的碎片整理程序
  • win10系统资源
  • Windows系统通过注册表实现打开CMD并定位到指定文件夹
  • win10系统怎么关闭自动更新
  • win8系统怎么设置
  • windows1020h2版本怎么样
  • win8应用商店废了
  • unity进度条有百分比代码
  • bootstrap designer
  • android实现天气预报
  • retrofit提交表单
  • 批量创建用户
  • javascript怎么用
  • linux怎么ssh远程
  • unity linux arm
  • 主管税务机构
  • 深圳市国税局副局长是谁
  • 贵州税务大厅咨询电话
  • 乌市社保缴费一个月多少钱
  • 消费税征税环节
  • 地铁发票如何取得
  • 最常见的财税知识
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设