使用 document.querySelector() document.querySelectorAll(), 将 CSS选择器 作为参数传入即可.

// 标签选择器
document.querySelector("div"); // id选择器
document.querySelector("#app"); // 组选择器
document.querySelector("body div");

注意: 

1. querySelecotor()返回某个元素节点, querySelectorAll()返回一个NodeList实例对象;

2. 两个方法都支持复杂的CSS选择器, 但不支持伪类和伪元素选择器;

3. 两个方法不仅在document上, 而且还定义在元素节点上, 比如可以这样用: document.body.querySelector()

怎样通过CSS选择器获取元素节点或元素节点集合的更多相关文章

  1. html选择器[获取兄弟(同级元素)]

    1.html <div class="col-md-5"> <h4 class="m-t-md" id="dwzh"> ...

  2. JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型

    基本使用 写在Script 标签里 引入外部js文件:<script src=" "></script> console.log(" " ...

  3. css中伪类和伪元素的区别

    转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...

  4. CSS 选择器(转)

    原文转自:http://www.cnblogs.com/xyzhanjiang/p/5447406.html CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 C ...

  5. 精通 CSS 选择器

    CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 CSS 选择器来选择元素,因此作为前端开发需要熟练掌握.下面是一些常用的 CSS 选择器示例. 元素选择器 E, ...

  6. 初始scrapy,简单项目创建和CSS选择器,xpath选择器(1)

    一 安装 #Linux: pip3 install scrapy #Windows: a. pip3 install wheel b. 下载twisted http://www.lfd.uci.edu ...

  7. [css选择器]总结:IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  8. css选择器querySelectorAll

    * querySelectorAll(css的选择器)* 通过css的选择器获取到的一组元素* 获取的也是类数组** 主语* document 从整个页面去获取一组元素* 父级 从父级下去获取一组元素 ...

  9. 使用 CSS 选择器从网页中提取数据

    在 R 中,关于网络爬虫最简单易用的扩展包是 rvest.运行以下代码从 CRAN 上安装:install.packages("rvest")首先,加载包并用 read_html( ...

随机推荐

  1. Redis启动后基础只是讲解

    1.单进程 epoll是Linux内核为处理大批量文件描述符而作了改进的epoll,是Linux下多路复用IO接口select/poll的增强版本, 它能显著提高程序在大量并发连接中只有少量活跃的情况 ...

  2. UML期末复习题——2.9:UML Deployment Diagram

    附加题:部署图 重要概念: 1. 部署图 部署图表示的是,如何将具体的软件制品(例如可执行文件)分配到计算节点(具有处理服务的某种事物)上.部署图表示了软件元素在物理架构上的部署,以及物理元素之间的通 ...

  3. MongoDB安装成windows 服务

    观看本文之间,请先移步至下面纠正部分 之前按照MongoDB官网提供的安装方法一直出错 http://cn.docs.mongodb.org/master/tutorial/install-mongo ...

  4. for-update与for-update nowait

    1.for update 和 for update nowait 的区别: 首先一点,如果只是select 的话,Oracle是不会加任何锁的,也就是Oracle对 select 读到的数据不会有任何 ...

  5. CentOS下Hadoop及ZooKeeper环境搭建

    1. 测试环境 操作系统 CentOS 6.5. 总共5台机器,前两台作为namenode,称之为 nn01.nn02:后三台作为datanode,称为 dn01.dn02.dn03. 每台机器的内存 ...

  6. CockroachDB学习笔记——[译]Hello World

    原文链接:https://www.cockroachlabs.com/blog/hello-world/ 原作者:Spencer Kimball 原文日期:Jun 4, 2015 译:zifeiy 数 ...

  7. 【ARTS】01_22_左耳听风-201900408~2019004014

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  8. 神经网络(NN)实现多分类-----Keras实现

    IRIS数据集介绍   IRIS数据集(鸢尾花数据集),是一个经典的机器学习数据集,适合作为多分类问题的测试数据,它的下载地址为:http://archive.ics.uci.edu/ml/machi ...

  9. Unity 实现橡皮擦效果

    我所实现的橡皮擦效果是设置图片某点的像素的透明度为0,来简单实现擦除效果的: 下面是效果 首先需要注意两点:1:设置 Main Camera 的 projection 属性为Orthographic ...

  10. jquery+flask+keras+nsfw快速搭建一个简易鉴黄工具

    1. demo 地址:http://www.huchengchun.com:8127/porn_classification 接口说明: 1. http://www.huchengchun.com:8 ...