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

  • 实施网络推广的步骤?(网络推广实施方案)

    实施网络推广的步骤?(网络推广实施方案)

  • word思维导图模板在哪(word思维导图模糊)

    word思维导图模板在哪(word思维导图模糊)

  • b站手机端音频区在哪(b站音频怎么保存在手机本地)

    b站手机端音频区在哪(b站音频怎么保存在手机本地)

  • 活体认证怎么老是不成功(活体认证不了)

    活体认证怎么老是不成功(活体认证不了)

  • 微信租号有什么后果(微信租号有什么风险)

    微信租号有什么后果(微信租号有什么风险)

  • QQ踩空间怎么取消(qq空间踩踏怎么取消)

    QQ踩空间怎么取消(qq空间踩踏怎么取消)

  • 华为vr眼镜怎么用

    华为vr眼镜怎么用

  • getpivotdata函数是什么意思(GETPIVOTDATA函数是什么意思怎么用)

    getpivotdata函数是什么意思(GETPIVOTDATA函数是什么意思怎么用)

  • 新注册微信要辅助验证过不了怎么办(新注册微信要辅助验证)

    新注册微信要辅助验证过不了怎么办(新注册微信要辅助验证)

  • 手机信号上面显示的E是什么意思(手机信号上面显示4g+是什么意思)

    手机信号上面显示的E是什么意思(手机信号上面显示4g+是什么意思)

  • xp系统ip冲突怎么解决

    xp系统ip冲突怎么解决

  • cad缩放比例快捷键(cad缩放比例是什么意思)

    cad缩放比例快捷键(cad缩放比例是什么意思)

  • oppo积分兑换是真的吗(oppo的积分兑换)

    oppo积分兑换是真的吗(oppo的积分兑换)

  • 快手当前在线是什么意思(快手当前在线是在玩快手吗)

    快手当前在线是什么意思(快手当前在线是在玩快手吗)

  • 屏幕排线接触不良现象(屏幕排线接触不良修要多少钱)

    屏幕排线接触不良现象(屏幕排线接触不良修要多少钱)

  • 全局变量的存储类型(全局变量的存储类别)

    全局变量的存储类型(全局变量的存储类别)

  • 苹果手机是什么系统(苹果手机是什么处理器)

    苹果手机是什么系统(苹果手机是什么处理器)

  • ipad可以接蓝牙鼠标吗(ipad可以连接蓝牙)

    ipad可以接蓝牙鼠标吗(ipad可以连接蓝牙)

  • 手机有放大镜功能吗(手机的放大镜功能在哪)

    手机有放大镜功能吗(手机的放大镜功能在哪)

  • iphone x访问限制在哪(iphone x 访问限制)

    iphone x访问限制在哪(iphone x 访问限制)

  • qq刷的礼物怎么提现(qq礼物怎么获取)

    qq刷的礼物怎么提现(qq礼物怎么获取)

  • 怎样刷快手粉丝

    怎样刷快手粉丝

  • 怎么删除自己的朋友圈(怎么删除自己的评论)

    怎么删除自己的朋友圈(怎么删除自己的评论)

  • app开发应注意哪些方面(app开发应注意哪些问题)

    app开发应注意哪些方面(app开发应注意哪些问题)

  • fch32.exe是什么进程 作用是什么 fch32进程查询(电脑上fci是什么文件)

    fch32.exe是什么进程 作用是什么 fch32进程查询(电脑上fci是什么文件)

  • TypeError: Cannot read properties of undefined (reading ‘NAME‘)报错解决

    TypeError: Cannot read properties of undefined (reading ‘NAME‘)报错解决

  • zipinfo命令  查看压缩文件信息(查看zip内容)

    zipinfo命令 查看压缩文件信息(查看zip内容)

  • Python中如何读取文件名中的数字?(python中如何读取列表中的指定)

    Python中如何读取文件名中的数字?(python中如何读取列表中的指定)

  • 税务ukey与税控盘的区别
  • 代开专用发票需要交城建税吗
  • 利息收入交税税率
  • 一般纳税人什么情况可以开3%的发票
  • 电子商业汇票怎么兑现
  • 营业税金及附加包括增值税吗
  • 现金折扣是否可抵税
  • 贷款利息进项税额
  • 基本电费等于
  • 个体户国税异常怎么办
  • 收入确认和发票的区别
  • 项目资本金是什么意思大白话
  • 简化丢失专用发票的处理流程
  • 长期待摊费用提前清理
  • 季报中现金流量表报的是当季的还是本年累计数
  • 2020年开公司优惠政策
  • 地方教育附加怎么算的?
  • 生育津贴的相关法律规定
  • 公司处理固定资产车辆怎么开发票
  • 对公账户转库存现金对方科目怎么填
  • php stristr函数
  • 销售成本属于成本吗
  • Laravel中七个非常有用但很少人知道的Carbon方法
  • PHP:imagecolorexact()的用法_GD库图像处理函数
  • 塞里雅兰瀑布图片高清
  • 斋普尔的景点
  • wordpress portfolio
  • vue2:elementUI中Form 表单在特定情况下做动态rules添加删除
  • 固定资产一次性折旧账务处理
  • php转utf8
  • 防抖节流实现原理
  • ps去水印的三种方法
  • 餐饮服务专票可以抵税吗
  • fastdfs和minio哪个好
  • 工程款发票的数量和单价
  • 加工票可以抵扣吗
  • 收到银联代收短信
  • 个税申请退税流程
  • 货物样品出口
  • 航空运输电子客票行程单查验
  • 收购发票如何确认成本
  • 工会经费怎么计提及使用
  • 预收账款怎么用
  • 红冲暂估原材料如何做会计分录
  • 农业合作社销售农产品怎样纳税
  • 外经证核销反馈表写错了怎么办
  • 培训机构账务处理
  • 产品出库检验报告单格式
  • 会计账簿怎么填写模式
  • 利润表增加,资产负债表减少怎么回事
  • 透明数据网
  • mysql如何实现多表查询
  • win2003无法启动
  • win10设置设备
  • mac打开safari快捷键
  • 通过防火墙可以保证窃听到的信息毫无价值
  • hke是什么意思
  • win7系统摄像头不可用怎么办
  • win7电脑flash安装教程
  • 基于jQuery的设计与实现
  • unity shader lod
  • python urljoin
  • jquery页面跳转的方法
  • 用python分析csv文件
  • python 对象函数
  • Unity3D中ScreenPointToRay函数的分析-个人见解
  • js md5加密方法
  • android监听app启动
  • unity的gui
  • python简要介绍
  • 快速掌握英语的方法
  • 国家税务局内蒙古税务
  • 海关编码查询 商品编码查询
  • 支付宝中油好客e站怎么开发票
  • 土地税源编码怎么填
  • 社保在税务系统交,有何用意
  • 预征率是2%怎么计算
  • 北京电子税务局实名认证
  • 随子女定居外省好吗
  • 上饶二手房契税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设