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

  • 怎样设置微信支付密码(怎样设置微信支付指纹)

    怎样设置微信支付密码(怎样设置微信支付指纹)

  • 美图秀秀怎么保存实况(美图秀秀怎么保存配方)

    美图秀秀怎么保存实况(美图秀秀怎么保存配方)

  • 迅雷登录超时了怎么办(迅雷登陆操作过于频繁,请稍后再试)

    迅雷登录超时了怎么办(迅雷登陆操作过于频繁,请稍后再试)

  • 荣耀play陀螺仪在哪设置(荣耀play陀螺仪有延迟吗)

    荣耀play陀螺仪在哪设置(荣耀play陀螺仪有延迟吗)

  • 苹果13.4.1加了什么功能(苹果升级13.4)

    苹果13.4.1加了什么功能(苹果升级13.4)

  • 微信头像图片怎样调大小(微信头像图片怎么删除)

    微信头像图片怎样调大小(微信头像图片怎么删除)

  • 华为畅享10有没有指示灯(华为畅享10有没有OTG功能)

    华为畅享10有没有指示灯(华为畅享10有没有OTG功能)

  • 小新笔记本黑屏了开不了机了(小新笔记本黑屏死机)

    小新笔记本黑屏了开不了机了(小新笔记本黑屏死机)

  • 通信系统的主要性能指标是什么(通信系统的主要性能指标不包括)

    通信系统的主要性能指标是什么(通信系统的主要性能指标不包括)

  • 网络的有线传输介质(网络的有线传输介质通常有( ))

    网络的有线传输介质(网络的有线传输介质通常有( ))

  • 12mp+5mp是多少像素(12mp+2mp)

    12mp+5mp是多少像素(12mp+2mp)

  • 拼多多什么时候有的(拼多多什么时候活动力度最大)

    拼多多什么时候有的(拼多多什么时候活动力度最大)

  • b站免流卡能随时注销么(b站免流卡可以免流游戏吗)

    b站免流卡能随时注销么(b站免流卡可以免流游戏吗)

  • 手机qq怎么发送离线文件(手机qq怎么发送邮件到别人邮箱)

    手机qq怎么发送离线文件(手机qq怎么发送邮件到别人邮箱)

  • 荣耀20屏占比(荣耀屏占比低的机型)

    荣耀20屏占比(荣耀屏占比低的机型)

  • 微信红包怎么修改皮肤(微信红包怎么修改密码)

    微信红包怎么修改皮肤(微信红包怎么修改密码)

  • win7怎么设置打开方式(win7怎么设置默认打印机)

    win7怎么设置打开方式(win7怎么设置默认打印机)

  • 抖音卸载后原账号在吗(卸载后抖音怎么恢复以前的抖音号)

    抖音卸载后原账号在吗(卸载后抖音怎么恢复以前的抖音号)

  • iphone11有没有3dtouch(iPhone11有没有红外线遥控功能)

    iphone11有没有3dtouch(iPhone11有没有红外线遥控功能)

  • psvr一代和二代区别(psvr一代和二代清晰度)

    psvr一代和二代区别(psvr一代和二代清晰度)

  • 安卓怎么打开aspx(安卓怎么打开numbers表格)

    安卓怎么打开aspx(安卓怎么打开numbers表格)

  • word怎么设置上标形式(word怎么设置上下型)

    word怎么设置上标形式(word怎么设置上下型)

  • 华为不支持网易云音乐吗(华为不支持网易大神登录)

    华为不支持网易云音乐吗(华为不支持网易大神登录)

  • 快手怎么查粉丝涨幅(快手怎么查粉丝团的人)

    快手怎么查粉丝涨幅(快手怎么查粉丝团的人)

  • 华为nova5i怎么用(华为nova5i怎么用语音唤醒语音助手)

    华为nova5i怎么用(华为nova5i怎么用语音唤醒语音助手)

  • 微信运动多少时间更新一次(微信运动多少时间不计数)

    微信运动多少时间更新一次(微信运动多少时间不计数)

  • 格里博耶多夫运河和滴血救世主教堂,俄罗斯圣彼得堡 (© Tomas Sereda/Getty Images)(格里戈里耶奈尔尤伯夫)

    格里博耶多夫运河和滴血救世主教堂,俄罗斯圣彼得堡 (© Tomas Sereda/Getty Images)(格里戈里耶奈尔尤伯夫)

  • 【java web篇】MyBatis之Mapper代理(javaweb官方文档)

    【java web篇】MyBatis之Mapper代理(javaweb官方文档)

  • 计提税费会计分录怎么填
  • 关于个人取得的成果
  • 记账凭证核算形式是会计核算中最基本的核算形式
  • 免税蔬菜税额用什么表示
  • 出纳工人借支与贷款区别
  • 农产品收购发票可以跨区域开吗
  • 授予股票期权分录
  • 银行汇票应计入什么科目
  • 结转应交所得税属于利润分配吗
  • 合资公司51%股东的权限
  • 预交了一个季度的社保
  • 现金出资可以吗
  • 咨询服务费怎么结转成本
  • 增值税专用发票可以开电子发票吗
  • 机动车强制保险新政策
  • 营改增后附加税费入应交税费还是营业税金及附加
  • 加工费的增值税税率是多少
  • 汇总会计报表和合并会计报表均是
  • 应收账款计提坏账准备是根据什么会计信息质量要求
  • 离职员工工资退不退
  • 报关单上的生产销售单位
  • 怎么解决windows许可证即将过期
  • 应收账款转让的风险
  • 非盈利组织又称
  • 在银行按揭贷款买房是抵押吗
  • php判断ua
  • 收到短期借款会计分录怎么做
  • 房产证办理流程图
  • 磷酸二氢钙生产
  • 独立核算的基金是会计主体吗
  • 应交增值税减免税额在借方
  • php strncmp
  • window cuda
  • phpcms怎么用
  • 投资者投入固定资产的成本,应当按照投资合同
  • 电脑学word下哪个软件视频
  • 营业外支出贷方在利润表怎么体现
  • 净现值与原始投资额现值
  • php用户评论
  • 收入重复开票跨年了怎么处理
  • 职工短期薪酬包括哪些
  • sql server 2008 r2数据库备份
  • 未计提完固定资产怎么办
  • 取得交易性金融资产的交易费用
  • 多缴附加税退税怎么做账
  • 出口退税会计处理流程
  • 商品损耗科目
  • 处置固定资产会计处理
  • 车船税怎么计账
  • 印花税的计入科目有哪些
  • 没有发票的费用调增填在哪里
  • 跨年暂估成本会计分录
  • 固定资产能直接计入费用吗为什么
  • 资产评估增值的调整方法
  • 进项发票已入账进项税,但是未抵扣怎么办
  • 未开票收入怎么报税
  • 简述公司利润分配的程序
  • 服务类公司有成本吗
  • sql server常用管理工具中,用于访问
  • win10一年更新一次
  • xp系统关机界面设置
  • windows10 rs2
  • mac怎么设置图片为桌面
  • winmgm32.exe - winmgm32 是什么进程
  • 苹果mac电脑不会关机
  • sendmail -t
  • win10系统打游戏
  • linux制作
  • opengl纹理贴图步骤
  • Perl实现高水线算法(解决多值比较问题方法)
  • 保证windows 7安装后正常使用的安装方法
  • JavaScript驾驭网页-获取网页元素
  • JQuery中Ajax()的data参数类型实例分析
  • unity3d快速入门
  • jquery简单例子
  • unity iphone
  • js面向对象编程实例
  • 常用的javascript对象
  • 电子税务局登录不上,显示用户名不匹配
  • 美国买东西邮寄怎么寄
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设