HTML5的selector选择DOM元素API.

最新推荐文章于 2021-06-03 06:14:05 发布
最新推荐文章于 2021-06-03 06:14:05 发布
阅读量88 收藏
点赞数
原文链接：http://www.cnblogs.com/hellome/p/3959259.html
版权

在html5新增的API中,在JS中有直接选择DOM元素的API函数;

分别是

　　document.querySelector('.类名 或者 #id名');返回所选符合元素的第一个元素

　　document.querySelectorAll('.类名 或者 #id名');返回所选符合元素的元素集合,有length属性.

 

该API函数在IE7标准模式下不兼容,其他的还行.

贴代码:

　　

 1 <title>无标题文档</title>
 2 <script>
 3     window.onload=function(){
 4         var Box=document.querySelector('#box');
 5         var A=document.querySelectorAll('.hi');
 6         console.log(A.length);
 8         Box.style.background='red';
 9     }
10 </script>
11 </head>
12 
13 <body>
14     <div id="box">
15         HelloWorld
16     </div>
17     <div class="hi">
18         HelloWorld
19     </div>
20     <div class="hi">
21         HelloWorld
22     </div>
23 </body>

 

　　

转载于:https://www.cnblogs.com/hellome/p/3959259.html

alisa6655
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html选择器selector,网页解析神器-Selector选择器全面解析
weixin_35507450的博客
06-03 2615
大部分人可能喜欢使用以下三个解析器对网页进行解析：BeautifulSoup：使用方便，支css选择器，但它有个不可忽视的缺点:慢。lxml解析库：采用xpath解析，速度快。pyquery：它提供了和jQuery类似的语法来解析HTML文档，支持CSS选择器re：正则表达式是万能通用的，不过使用它的头疼度我就不用过多解释了。。但对于某些网页结构俩说，单一的解析方法也许并不是那么方便，如果想嵌套x...
simplehtmldom Doc api帮助文档
12-19
- `find($selector, [$index])`：根据CSS选择器`$selector`查找元素。如果设置了`$index`，则返回第N个元素对象；否则，返回一个元素对象数组。 5. **元素方法和属性**： - `attribute`：读取或写入元素的属性值...
解析html：CSS Selector快速了解使用
灰哥数据智能的专栏
06-28 1355
CSS即层叠样式表，其选择器是一种用来确定HTML文档中某部分位置的语言。 html文档是由一系列节点构成的数，例如： <html> <body> <div > <p>Hello world<p> <a href="/home">Click here</a> </div> </body> </html> 一、html文档的节点类型 html文档的节点类型常
Html5中的选择器（Selector）
zyxNobita专栏
01-27 1万+
最近在项目中使用到了Html5这门超文本标记语言，利用空闲时间自己学习了一下H5。现在在移动APP中的开发，H5使用的越来越多，面对这样的发展趋势，把自己所知道的H5常用点，记录下来方便自己查看的同时，也方便同在程序员战场的同道中人。       想必搞过JS、jQuery等的人都知道，有一个神奇的技术---选择器。如：        .class  表示所有 class="name"元素 的
【原创】HTML&CSS学习笔记（12） ----CSS的基础语法:选择器 selector
奔跑的犀牛先生
01-21 434
  一 CSS基础语法格式 选择器   {  color:red;        //声明语句1 }   二 什么是选择器  selector 选择器，就是选择html里的哪些内容，适用CSS的格式 可以选择的内容很多，可以是元素，或 id 或类等等 可以选择的方式很多，可以是一类，可以是父子相邻的，可以是组合的     三 选择器，按选择的内容区分 元素选择器     d...
html选择器selector,html5 中高级选择器 querySelector
weixin_36225384的博客
06-03 624
简介HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法两个方法，其中，querySelector返回满足条件的单个DOM元素，按照深度院线和先序遍历的原则使用参数提供的css选择器在DOM中...
html5选择当地城市天气预报代码.zip
11-19
1. 更方便地选择和操作DOM元素，如`$(selector).on('event', function() {})`用于添加事件监听器。 2. 创建平滑的动画效果，如`$('element').fadeIn()`和`$('element').slideUp()`。 3. 提供链式调用，使代码更加...
HTML5复古风格音乐播放器代码.zip
11-18
在这个项目中，开发者利用HTML5的Audio API来处理音频播放，CSS来设计视觉样式，JavaScript进行交互逻辑，而jQuery则作为JavaScript库简化DOM操作。 1. **HTML5 Audio API**: HTML5引入了内置的Audio元素，允许网页...
html5微信游戏圣诞老人过桥源码.zip
11-18
1. HTML5：HTML5是超文本标记语言的最新版本，它在HTML4的基础上增加了许多新的元素和API，以增强网页的交互性和多媒体支持。在这款游戏中，HTML5用于构建游戏的基本结构，定义页面布局和游戏元素，如游戏背景、角色...
HTML5实现五彩连珠小游戏.zip
11-18
CSS3引入了许多新特性，如动画（animation）、过渡（transition）和选择器（selector），可能被用于增强游戏的互动性和视觉吸引力。 3. JavaScript：JavaScript是一种客户端脚本语言，负责处理用户交互、动态内容和...
Java Web-网页基础-HTML-选择器Selector-DOM
魂小猫的博客
08-23 188
DOM DOM，Document Object Model 文档对象模型 在HTML页面里，浏览器根据和里面所有的标签，建立一个树形结构。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p> 江山定 <a href="https://user.
HTML5新增的3种selector方法
前端菜鸟
03-12 4855
1：querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&
Selectors API - 详解 querySelectorAll 获取与遍历 DOM 元素列表
热门推荐
赫拉莉的博客
12-17 1万+
使用 document.querySelectorAll 搭配CSS选择器，可以非常便捷地获取文档中指定元素列表。 elementList = parentNode.querySelectorAll(selectors); 参数 selectors：一个DOMString包含一个或多个匹配的选择器。 返回值：一个静态NodeList（一个集合，不是数组，类似于数组，文本稍后做详解），包含一...
html选择器selector,CSS4前瞻：选择器(Selectors)
weixin_28761983的博客
06-03 429
CSS也许是Web设计者和程序员之间一种最佳的沟通工具，所以，对于CSS的革新发展，每个人都会感到兴奋。W3C在其网站上公布了正在制定中的CSS4选择器(selector)规范，你会发现里面出现了很多新的东西。下面让我们来看看对于未来的浏览器，CSS4提供了哪些CSS选择器上的新功能和新特征！$E > F这个新出现的选择器语法能够让我们基于子元素(F)来给父元素($E)制定样式。下面是一个例...
jquery selectors.html
weixin_42193179的博客
05-21 121
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery selectors</title> <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script> </head> <body.
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
Selenium WebDriver 元素定位指南：高效API与实战技巧
本学习笔记主要涵盖Selenium WebDriver的元素定位、API使用以及常用的元素操作方法。" 在Selenium WebDriver中，元素定位是自动化测试的核心部分，它允许测试脚本找到页面上的特定元素并进行操作。WebDriver提供了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值