<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>$永远保存学习的心态$</title>

</head>

<body>

    <div>我是通过标签获取(紫色)</div>

    <div id="box">我是通过id获取(橙色)</div>

    <div class="box1">我是通过class获取(黄色)</div>

    <form action="" name="box2">

        我是通过name获取(绿色)

    </form>

    <div class="box3">

        我是通过querySelector获取(青色)

    </div>

    <div class="box4">我通过querySelectorAll获取(蓝色)</div>

    <script src="common.js"></script>

    <script>

        var div = document.getElementsByTagName("div")[0];

        //根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

        //document.getElementsByTagName("标签名字");

        var box = document.getElementById("box");

        //根据id属性的值获取元素,返回来的是一个元素对象

        //document.getElementById("id属性的值");

        var box1 = document.getElementsByClassName("box1")[0];

        //根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)

        //document.getElementsByName("name属性的值")

        var box2 = document.getElementsByName("box2")[0];

        //根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)

        //document.getElementsByClassName("类样式的名字")

        var box3 = document.querySelector('.box3');

        //根据选择器获取元素,返回来的是一个元素对象 (有的浏览器不支持)IE8以上支持

        //document.querySelector("选择器的名字");

        var box4 = document.querySelectorAll('.box4')[0];

        //根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)IE8以上支持

        //document.querySelectorAll("选择器的名字")

        div.style.color = '#8B00FF';

        box.style.color = '#ff7f00';

        box1.style.color = '#ff0';

        box2.style.color = '#00ff00';

        box3.style.color = '#0ff';

        box4.style.color = '#00f';

    </script>

</html>

</script>

</body>

</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. SpringBoot23 分模块开发

    1 开发环境说明 JDK:1.8 MAVEN:3.5 IDEA:2017.2.5 SpringBoot:2.0.3.RELEASE 2 创建SpringBoot项目 2.1 项目信息 2.2 添加项目 ...

  2. TOP命令 详解CPU 查看多个核心的利用率按1

    top命令是linux下常用的工具,可以查看各个进程的CPU使用情况.先看一个实例: 这是Ramnode双核VPS的top显示结果: 左上角可以看到CPU的使用率是11.3%,但是看下面的进程,plu ...

  3. 2.Hive的几种常见的数据导入方式

    好久没写Hive的那些事了,今天开始写点吧.今天的话题是总结Hive的几种常见的数据导入方式,我总结为四种:(1).从本地文件系统中导入数据到Hive表:(2).从HDFS上导入数据到Hive表:(3 ...

  4. 235D Graph Game

    传送门 题目大意 https://www.luogu.org/problemnew/show/CF235D 分析 我们先考虑它是树的情况 我们设$event(x,y)$表示删除点x是y与x联通这件事对 ...

  5. spring.net 集成nhibernate配置文件（这里暴露了GetCurrentSession 对于 CurrentSession unbond thread这里给出了解决方法）

    我这里主要分成了两个xml来进行spring.net管理实际情况中可自己根据需要进行分类 Dao2.xml <?xml version="1.0" encoding=&quo ...

  6. Linux安装tomcat服务器

    1.下载tomcat(区分windows和Linux,以tar.gz为后缀名的是Linux操作系统使用的). 官网下载地址:http://test.m.xiaoyuanhao.com/micro/ap ...

  7. 跨域问题hbuilder

    1.借助jquery-jsonp插件 $.jsonp({ url: url, data: { 'name': usd, 'passwd': pass }, callbackParameter: &qu ...

  8. Office Web APP预览如何去掉顶部版权标志“Microsoft Office Web Apps”

    在Office Web APP的预览会涉及4中类型的文 件:Word.Excel.PowerPoint.PDF,不同的类型在预览时调用的文件是不一样的,其中Word和 PDF调用的是同一个文件.每个预 ...

  9. HDU 6055 Regular polygon (暴力)

    题意,二维平面上给N个整数点,问能构成多少个不同的正多边形. 析:容易得知只有正四边形可以使得所有的顶点为整数点.所以只要枚举两个点,然后去查找另外两个点就好. 代码如下: #pragma comme ...

  10. K860i的109升级需要的PinyinIME.apk和QuickSearchBox.apk两个文件

    联想K860i的109版本终于可以正常更新了,感谢下乐Phone之家的蚊子咬(http://bbs.lephone.cc/space-uid-6410.html)提供了关键的两个文件:PinyinIM ...