<body>

<p class="aa">aaa</p>

<p class="bb">bbb</p>

<p id="cc">ccc</p>

</body>

<script>

   //第一个class为aa的JS对象

   console.info(document.querySelector('.aa').childNodes[0].nodeValue);

   //选择id

   console.info(document.querySelector('#bb').textContent);

   //查找所有元素返回JS对象数组

   var allEle=document.querySelectorAll("*");

   for(var i=0;i<allEle.length;i++){

    console.info(allEle[i].tagName)

   }

   //选择第一个tagName为p的元素

   console.info(document.querySelector('p'));

   //根据属性选择

   console.info(document.querySelector('p[id="bb"]').innerHTML);

</script>

html5的选择器的更多相关文章

  1. html5新增选择器

    分享点html5的学习笔记,比较基础,突然发现通过写博客来记笔记有很多优点呢,平常记得笔记比较简单,复习起来比较吃力,看自己的博客理解起来还比较轻松,而且只有真正理解了才能表达清楚让别人看懂,还锻炼语 ...

  2. html5时间选择器

    HTML5日期输入类型(date)   分享   分享   分享   分享   分享 在很多页面和web应用中都有输入日期和时间的地方,最典型的是订飞机票,火车票,酒店,批萨等网站. 在HTML5之前 ...

  3. html5 中高级选择器 querySelector

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...

  4. html5 css选择器。 井号，句号的区别

    .理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family ...

  5. html5 css选择器 井号, 句点的区别

    一.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的 ...

  6. html5——css选择器

    复习 div>p: 子代 div+p:div后面相邻的第一个p div~p: div后面所有的兄弟p 属性选择器 标志:[]:区别于id选择器:#,区别于类名选择器:. 特殊符号:^:开头    ...

  7. html5 新选择器 querySelector querySelectorAll

    querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =doc ...

  8. [HTML5] 颜色选择器的操作[input type='color'....]

    一.点击事件和获取颜色值 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  9. 第87天：HTML5中新选择器querySelector的使用

    一.HTML5新选择器 1.document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回n ...

随机推荐

  1. logstash无法使用conf启动

    最近刚开始学习使用logstash,再安装好后准备验证下第一个demo的时候,出现了问题 Error: Expected one of #, input, filter, output at line ...

  2. 工程中建立多个src目录

    android 工程下可以有多个源代码的目录,不一定都要放到src下面.可以在 .classpath 文件中添加. 默认是这样的: <classpath> <classpathent ...

  3. codeforces 练习

    codeforces 627 D. Preorder Test 二分 + 树dp 做logn次树dp codeforces 578D.LCS Again 给出一个字符串str,长度n<=10^6 ...

  4. es6 const

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Spark读取Hbase的数据

    val conf = HBaseConfiguration.create() conf.addResource(new Path("/opt/cloudera/parcels/CDH-5.4 ...

  6. MyEclipse中代码格式化后自动换行

    MyEclipse的默认设置里面各种坑人,怎么不方便怎么设置,用户体验差到极点.今天又遇到个问题,按下Ctrl + Shift + F 后,自动格式化后的代码原来只有一行,结果变成了3行,看着都想吐. ...

  7. PSP(11.2~11.9)

    5号 类别c 内容c 开始时间s 结束e 中断I 净时间T GUI 学习QT视频 9:00 10:10 0m 70m 复习 软件工程 10:10 11:10 10 50m 复习 软件工程 14:20 ...

  8. G不可失

    html和css部分和引用的库 <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  9. 基于WebDriver&TestNG 实现自己的Annotation @TakeScreenshotOnFailure

    相信用过Selenium WebDriver 的朋友都应该知道如何使用WebDriver API实现Take Screenshot的功能. 在这篇文章里,我主要来介绍对failed tests实现 t ...

  10. X-Cart 学习笔记 完整目录

    如果有需要,可以直接联系博主,讨论学习 一.了解X-CART. 3 二.PHP环境搭建... 3 三.安装配置X-CART. 4 1.下载X-Cart并配置域名,映射地址... 4 2.配置X-Car ...