js原生后代选择器_HTML5的JavaScript选择器介绍

在HTML5出现之前使用JavaScript查找DOM元素，有以下三种原生的方法：

getElementById：根据指定元素的id属性返回元素

getElementsByName：返回所有指定name属性的元素

getElementsByTagName：返回所有指定标签的元素

HTML5新增的选择器，方法有两种：

querySelector：根据选择器规则返回第一个符合要求的元素

querySelectorAll：根据选择器规则返回所有符合要求的元素

支持新的HTML5 JavaScript选择器接口的浏览器有：IE 8+、FireFox 3.5+、Safari 3.2+、Chrome 4.0+、Oprea 10.1+ 。

一、选择器的分类

1. ID选择器

使用ID选择器时，需在前面添加“#”，区分大小写，语法如下：

document.querySelector('#id'); //等同于document.getElementById('id');

2. 元素选择器

元素选择器通过指定的标签查询元素，此时querySelectorAll等同于getElementsByTagName，语法如下：

document.querySelectorAll('a'); //获取页面上的所有a元素并返回元素

3. 样式类选择器

使用元素的样式类获取一个或一类元素，样式名字前使用“.”(英文句号)开头，语法如下：

document.querySelectorAll('.btn'); //获取所有样式类中包含btn类名的元素

4. 分组选择器

使用querySelectorAll不仅可以获取一个或一类元素，还可以同时获取其他类别元素，两种类型之间使用逗号隔开，语法如下：

document.querySelectorAll('a,p'); //获取页面上所有a元素和p元素，并通过一个列表返回

document.querySelectorAll('.btn,.txt'); //获取页面上所有包含btn和txt样式类名的元素

5. 属性选择器

获取页面上包含指定属性的元素，属性名称可以是元素原生属性和用户自定义属性，语法如下：

document.querySelectorAll('a[target="_blank"]'); //获取页面上所有target属性为_blank的a元素

document.querySelectorAll('img[data-id]'); //获取页面上所有带有自定义属性data-id的img元素

6. 后代选择器

主要用于选择作为某元素后代的元素，规则左边的选择器一端包含两个或多个用空格分隔的选择器，如div a可以理解为查找所有被div包围的所有a元素，语法如下：

document.querySelectorAll('div a'); //获取页面上所有被div包含的a元素

document.querySelectorAll('div .btn'); //获取页面上所有被div包含的带有btn样式类名的元素

7. 子元素选择器

后代选择器会将元素底下的所有相关元素都搜索出来，如果想进一步缩小范围，可以使用子元素选择器，只会选择某个元素的一级子元素，子元素用“>”(大于号)表示，代码如下：

js原生后代选择器_HTML5的JavaScript选择器介绍相关推荐

js原生后代选择器_js 后代选择器
CSS规范 - 命名规则使用类选择器,放弃ID选择器ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用.NEC特殊字符:"-"连字符"-"在 ...
js原生后代选择器_JavaScript DOM查询，原生js实现元素子节点的获取
每个网页都是一个dom树,网页中所有的内容都是这个树上的一个节点.JavaScript的工作就是操作这些节点,对节点进行查增删改操作,或是给节点绑定事件. 网页 dom树要操作dom节点,首先要获取 ...
js原生后代选择器_CSS 后代选择器
具体应用后代选择器的功能极其强大.有了它,可以使 HTML 中不可能实现的任务成为可能. 假设有一个文档,其中有一个边栏,还有一个主区.边栏的背景为蓝色,主区的背景为白色,这两个区都包含链接列表.不 ...
js原生后代选择器_jQuery的后代选择器ancestor descendant介绍和示例解析
jQuery的ancestor descendant选择器(后代选择器)用于匹配ancestor元素内所有的descendant元素,将其封装为jQuery对象并返回. 注意:选择器descendan ...
前端 -＞ js原生选择器,jQuery选择器基本选择器(ID选择器,元素选择器,类名选择器,复合选择器,通配符选择器)
文章目录 jQuery基本选择器 js选择器(原生选择器) jQuery基本选择器 1. ID选择器ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对 ...
js后代选择器_后代选择器和子元素选择器的区别
原文简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选 ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
day43 JavaWen阶段——JQuery 基础（JQuery相关开发文档，JQuery对象和JS对象区别与转换，JQuery选择器，JQuery中DOM操作，案列【QQ表情选择】【左右移动】）
今日内容 1. JQuery 基础: 概念快速入门 JQuery对象和JS对象区别与转换选择器 DOM操作案例今日源码: 链接:https://pan.baidu.com/s/1KiG0c_V ...
javascript选择器_如何通过选择正确JavaScript选择器来避免沮丧
javascript选择器选择器如何影响代码的快速指南 (A quick guide on how selectors affect your code) While working on a pr ...

js原生后代选择器_HTML5的JavaScript选择器介绍

js原生后代选择器_HTML5的JavaScript选择器介绍相关推荐

最新文章

热门文章