致谢原文: <http://xahlee.info/js/js_get_elements.html>

  1. 通过ID得到element:

    Document.getElementById(id string) 返回element object, 如果失败,得到null

    注意id在页面内应该是唯一的,但在iframe的看作是另一个html页面

  1. 通过TagName得到element

    document.getElementsByTagName(tagname)返回element object集合. tagname 如div, span, p,

    var myList = document.getElementsByTagName("p"); // 得到所有p元素

    myList.length; // 返回p元素总数
    myList[0].style.color = "red"; // 修改第一个元素的style

  1. 通过ClassName得到element

    document.getElementsByClassName("class values") 返回element object集合.

    var myList = document.getElementsByClassName("abc");
    myList[0].style.color = "red"; // make the first
one red

    The class values可以是多个,用空格隔开. 比如"aa
bb",

    一个元素也可以有多个ClassName, 比如:
      <pclass="aa">1</p>

      <pclass="bb">2</p>

      <pclass="bb
aa">3</p>

      <pclass="bb cc
aa">4</p>

      <script>document.getElementsByClassName("aa
bb");</script>

    将会得到第三和第四个元素

  1. 通过Name得到element

    document.getElementsByName("name value")  返回element object集合.

    比如:
      <pname="abc">you</p>
      <divclass="zz"name="xyz">me</div>
      <divclass="zz"name="xyz">her</div>

      <form>
        <inputname="xyz"type="text"size="20">
      </form>

      var xyz =
document.getElementsByName("xyz");
      xyz[0].style.color="red"; // make the first
one red

  1. 通过CSS Selector得到element

     document.querySelectorAll(css selector) 返回element object集合,  css selector 是string, 可以是多个用逗号隔开.

      var xx = document.querySelectorAll("span.a, span.c");

      for (var i = 0; i < xx.length;
i++) {
          xx[i].style.color="red";
      }

[译文]通过ID, TagName, ClassName, Name, CSS selector 得到element的更多相关文章

  1. Web自动化测试:xpath & CSS Selector定位

    Xpath 和 CSS Selector简介 CSS Selector CSS Selector和Xpath都可以用来表示XML文档中的位置.CSS (Cascading Style Sheets)是 ...

  2. Selenium - Css Selector 使用方法

    什么是Css Selector? Css Selector定位实际就是HTML的Css选择器的标签定位 工具 Css Selector可以下载火狐浏览器插件,FireFinder 或 FireBug和 ...

  3. 获取节点 document.getElementBy{Id,Name,TagName,ClassName

    document.getElementById(" "); document.getElementByName(" "); document.getElemen ...

  4. 转:Selenium之CSS Selector定位详解

    CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式.  百度输入框: <input name=&quo ...

  5. selenium中Xpath和CSS Selector的使用方法

    一.selenium中Xpath的使用方法 1. 什么是xpath? Xpath是XML的路径语言,通俗一点讲就是通过元素的路径来查找这个标签元素 2. 练习Xpath的工具 火狐浏览器,下载插件Fi ...

  6. Selenium - CSS Selector

    Selenium - CSS Selector http://www.cnblogs.com/bugua/archive/2012/08/16/2641647.html   昨天我练习了用CSS(即层 ...

  7. css selector

    文章一: http://www.jb51.net/css/68287.html 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记,今天是CSS的选择器,以后还有一部分xPath ...

  8. Jsoup代码解读之五-实现一个CSS Selector

    Jsoup代码解读之七-实现一个CSS Selector 当当当!终于来到了Jsoup的特色:CSS Selector部分.selector也是我写的爬虫框架webmagic开发的一个重点.附上一张s ...

  9. Selenium 使用css selector (资源来源于网络)

    Selenium - CSS Selector 昨天我练习了用CSS(即层叠样式表Cascading Stylesheet) Selector来定位(locate)页面上的元素(Elements).S ...

随机推荐

  1. spring整合hibernate的时候报异常org.hibernate.HibernateException: createQuery is not valid without active transaction

    在整合Spring4+hibernate4时候,当代码执行到dao中CRUD操作时,报了一个异常, org.hibernate.HibernateException: createQuery is n ...

  2. 跟我学PHP-第一篇:如何安装Zend Studio 以及汉化和基本准备工作

    昨天从早上一直弄到晚上10点,可累死我了,网上的资料都是掺次不齐,所以我写一篇系统点的文章来告诉大家怎么做. 1.如果你想进行一套PHP系统的开发,肯定是要有“尚方宝剑”的,这个尚方宝剑就是PHP工具 ...

  3. H5基于iScroll实现下拉刷新,上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...

  4. CSS实现单行与多行文字省略(truncation)

    在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...

  5. Android测试提升效率批处理脚本

    前言: APP测试过程中,经常需要用的一些命令,如adb,每次敲命令,虽可以加深印象,但个人认为那即繁琐又浪费时间.本文贴出一些我使用的批处理,以及一点点小小技巧. 目录 1.[查看APK文件信息.b ...

  6. iOS页面间传值的一些方式总结

    废话不多说,直接进入主题: 这里要说的方式有6种:1.属性传值 2.block 3.delegate 4.UserDefault 5.单例 6.通知(篇幅原因我只写核心代码,如果看不懂可以直接在最下面 ...

  7. sealed、new、virtual、abstract与override 趣解

    1. sealed——“断子绝孙” 密封类不能被继承.密封方法可以重写基类中的方法,但其本身不能在任何派生类中进一步重写.当应用于 方法或属性时,sealed修饰符必须始终与override一起使用. ...

  8. List集合去重的一种方法

    前一段时间们需要对一个List<Model>集合去重,情况是该集合中会出现多个Name属性值相同的,但是其他属性值不同的数据. 在这种情况下,需求要只保留其中一个就好. 我觉得遍历和Has ...

  9. C#模拟Http请求时出现 基础连接已经关闭 未能为 SSLTLS 安全通道建立信任关系

    //解决方法: //引入命名空间: using System.Security.Cryptography.X509Certificates; using System.Net.Security; // ...

  10. 扩展lamda表达中distinct按照字段去除重复

    首先,我们定义一个Student类来测试. public class Student { public int ID { get; set; } public string Name { get; s ...