1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>$永远保存学习的心态$</title>
  7. </head>
  8.  
  9. <body>
  10.     <div>我是通过标签获取(紫色)</div>
  11.     <div id="box">我是通过id获取(橙色)</div>
  12.     <div class="box1">我是通过class获取(黄色)</div>
  13.     <form action="" name="box2">
  14.         我是通过name获取(绿色)
  15.     </form>
  16.     <div class="box3">
  17.         我是通过querySelector获取(青色)
  18.     </div>
  19.     <div class="box4">我通过querySelectorAll获取(蓝色)</div>
  20.     <script src="common.js"></script>
  21.     <script>
  22.         var div = document.getElementsByTagName("div")[0];
  23.         //根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
  24.         //document.getElementsByTagName("标签名字");
  25.  
  26.         var box = document.getElementById("box");
  27.         //根据id属性的值获取元素,返回来的是一个元素对象
  28.         //document.getElementById("id属性的值");
  29.  
  30.         var box1 = document.getElementsByClassName("box1")[0];
  31.         //根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)
  32.         //document.getElementsByName("name属性的值")
  33.  
  34.         var box2 = document.getElementsByName("box2")[0];
  35.         //根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)
  36.         //document.getElementsByClassName("类样式的名字")
  37.  
  38.         var box3 = document.querySelector('.box3');
  39.         //根据选择器获取元素,返回来的是一个元素对象 (有的浏览器不支持)IE8以上支持
  40.         //document.querySelector("选择器的名字");
  41.  
  42.         var box4 = document.querySelectorAll('.box4')[0];
  43.         //根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)IE8以上支持
  44.         //document.querySelectorAll("选择器的名字")
  45.  
  46.         div.style.color = '#8B00FF';
  47.         box.style.color = '#ff7f00';
  48.         box1.style.color = '#ff0';
  49.         box2.style.color = '#00ff00';
  50.         box3.style.color = '#0ff';
  51.         box4.style.color = '#00f';
  52.  
  53.     </script>
  54.  
  55. </html>
  56.  
  57. </script>
  58. </body>
  59.  
  60. </html>

js 的常用选择器的更多相关文章

  1. js+jquery 常用选择器函数

    一.获取当前标签 JS: this,如下: <button onclick="fun(this)"></button> Jquery,如下: $(" ...

  2. js和jQuery常用选择器

    笔者觉得js是前台基础中的基础,而其选择器则是js基础中的基础,因长期使用框架导致js生疏,所有查资料,回顾一下js的常用选择器: 1.document.getElementById("id ...

  3. CSS常用选择器

    关于CSS常用选择器: 1.ID选择器 关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错 ...

  4. jQuery常用选择器总结

    jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...

  5. 01-css的引入方式和常用选择器

    一.css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  6. jquery 常用选择器和方法以及遍历（超详细）

    jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...

  7. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  8. js中常用的操作

    1.js中常用的数组操作 2.js中常用的字符串操作 3.js中常用的时间日期操作 4.定时器

  9. js数组常用操作方法小结(增加,删除,合并,分割等)

    本文实例总结了js数组常用操作方法.分享给大家供大家参考,具体如下: var arr = [1, 2, 3, 4, 5]; //删除并返回数组中第一个元素 var theFirst = arr.shi ...

随机推荐

  1. Objective-C 基础语法log打印那些事儿（一）

    Objective-C 基础语法详解 雨松MOMO原创文章如转载,请注明:转载至我的独立域名博客雨松MOMO程序研究院,原文地址:http://www.xuanyusong.com/archives/ ...

  2. grep家族

    grep家族由命令grep.egrep和fgrep组成. grep:在文件中全局查找指定的正则表达式,并且打印所有包含该表达式的行.egrep和fgrep是grep的变体.egrep:grep的扩展, ...

  3. 使用DevStack安装openstack（单机环境）

    DevStack是一系列可扩展的脚本,用于根据git master的最新版本快速启动完整的OpenStack环境.它以交互方式用作开发环境,并作为OpenStack项目功能测试的基础. 参考源码. 警 ...

  4. day58-activiti 02-历史数据查询

    Activity 笔记  第二天 今天内容安排: 1.历史数据查询 办过多少个任务, 这些历史数据有时候我们也需要去查询一下. 本身day02这个项目就没有导jar包,有点类似于maven,在你的项目 ...

  5. 【HDU3394】Railway

    [题目描述] 有一个公园有n个景点,公园的管理员准备修建m条道路,并且安排一些形成回路的参观路线.如果一条道路被多条道路公用,那么这条路是冲突的:如果一条道路没在任何一个回路内,那么这条路是不冲突的 ...

  6. LoadRunner 关联和集合点、检查点

    1)关联的定义 很多时候,当时录完之后,没有问题.过一段时间再跑脚本,就不会成功.比如session,过期了,再一次使用,就会出错.这个时候,需要在每次访问的时候动态的拿到session,这种情况就需 ...

  7. 基于Nginx简单实现动静分离

    1.首先安装Nginx 2.在Nginx.conf文件中添加如下配置: server{ listen 80; server_name www.lf.com; location ~ (.jpg|.png ...

  8. C#实现访问网络共享文件夹

    C#实现访问网络共享文件夹,使用 WNetAddConnection2A 和 WNetCancelConnection2A. 在目标服务器建立共享文件夹,建立访问账号test; public enum ...

  9. scala _ parameter

    Given that sequence, use reduceLeft to determine different properties about the collection. The foll ...

  10. 498B Name That Tune

    传送门 题目大意 n首音乐,第i首被听出来的概率为pi,刚开始听第一首,1s后如果听出来了则放第下一首,否则接着听这一首,第i首在连续听了ti s之后一定会被听出来,问Ts后听出来的歌的期望数量. 分 ...