query指定范围提取数据_document.getelementbyid().赋值

query指定范围提取数据_document.getelementbyid().赋值document.querySelector

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

不久前,我发现了document.querySelector JS选择器,语法类似JQuery。

通过元素id获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		console.log(document.querySelector("#box"));
	</script>
</html>

Jetbrains全家桶1年46,售后保障稳定

query指定范围提取数据_document.getelementbyid().赋值

通过元素class,标签名获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box" class="container"></div>
	</body>
	<script type="text/javascript">
		console.log(document.querySelector(".container"));
		console.log(document.querySelector("div"));
	</script>
</html>

query指定范围提取数据_document.getelementbyid().赋值

注意:

document.querySelector用于获取单个元素,当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时,只匹配第一个元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">第一个div</div>
		<div class="box">第二个div</div>
	</body>
	<script type="text/javascript">
		console.log(document.querySelector(".box"))
		console.log(document.querySelector("div"))
	</script>
</html>

 query指定范围提取数据_document.getelementbyid().赋值

 document.querySelectorAll

那我们想获取多个元素就没办法了吗?有的。document.querySelectorAll就可以获取多个元素,它的结果跟document.getElementsByClassName()一样是一个集合。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">第一个div</div>
		<div class="box">第二个div</div>
	</body>
	<script type="text/javascript">
		console.log(document.querySelectorAll(".box"))
		console.log(document.querySelectorAll("div"))
	</script>
</html>

query指定范围提取数据_document.getelementbyid().赋值

写到这就结束啦,写的不好,多多指教。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/231338.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Spring集成MyBatis 事务管理

    Spring集成MyBatis 事务管理前言    spring事务管理包含两种情况,编程式事务、声明式事务。而声明式事务又包括基于注解@Transactional和tx+aop的方式。那么本文先分析编程式注解事务和基于注解的声明式事务。编程式事务管理使用TransactionTemplate或者PlatformTransactionManager。对于编程式事务spring推荐使用TransactionTemplate。…

  • vuex使用教程(最好最详细的乒乓教程)

    最详细的Vuex教程什么是Vuex?vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。引入Vuex(前提是已经用Vue脚手架工具构建好项目)1、利用npm包管理工具,进行安装vuex。在控制命令行中输入下边的命令就可以了。npminstallvuex

  • git修改gitignore不生效_github ignore

    git修改gitignore不生效_github ignore前言我在项目中采用Github代码托管仓库,由于部分项目文件,比如数据库文件不需要上传到网上,需要配置.gitignore文件,也就可以忽略版本控制,意思就是不上传它们。但是有一些文件一开始是期望忽略的,后来还是希望加入版本控制,上传到网上。不过直接从.gitignore文件中把它们移出来并不能解决问题,这些文件还是无法上传。百度的解决方式都大同小异,但是都有一个…

  • 数据库期末考试复习题 第二�

    数据库期末考试复习题 第二�

    2021年11月14日
  • open函数返回值为0

    open函数返回值为0open函数是我们开发中经常会遇到的,这个函数是对文件设备的打开操作,这个函数会返回一个句柄fd,我们通过这个句柄fd对设备文件读写操作。  我们在对这个fd作判断的时候,经常会用到:    fd=open(filename,O_RDONLY);     If(fd          Printf(“open%serror!\n”,fi

  • 2022年计算机考研过线就能上的学校[通俗易懂]

    2022年计算机考研过线就能上的学校[通俗易懂]部分考研同学本科是双非计算机类专业,基础能力一般,编程能力较弱,那么对于这类考生,主要还是以求稳为主,选择一个分数略低,复试较简单的学校,上岸几率就会加大。那么2022年计算机考研过线上岸率高的院校有哪些呢?

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号