js 的常用选择器

<!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 的常用选择器的更多相关文章

js+jquery 常用选择器函数
一.获取当前标签 JS: this,如下: <button onclick="fun(this)"></button> Jquery,如下: $(" ...
js和jQuery常用选择器
笔者觉得js是前台基础中的基础,而其选择器则是js基础中的基础,因长期使用框架导致js生疏,所有查资料,回顾一下js的常用选择器: 1.document.getElementById("id ...
CSS常用选择器
关于CSS常用选择器: 1.ID选择器关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错 ...
jQuery常用选择器总结
jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...
01-css的引入方式和常用选择器
一.css介绍现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
jquery 常用选择器和方法以及遍历（超详细）
jQuery 常用选择器和和方法学习总结一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍二.jQuery 对象 1. jQuery ...
移动端lCalendar纯原生js日期时间选择器
网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...
js中常用的操作
1.js中常用的数组操作 2.js中常用的字符串操作 3.js中常用的时间日期操作 4.定时器
js数组常用操作方法小结(增加,删除,合并,分割等)
本文实例总结了js数组常用操作方法.分享给大家供大家参考,具体如下: var arr = [1, 2, 3, 4, 5]; //删除并返回数组中第一个元素 var theFirst = arr.shi ...

随机推荐

linux单用户模式修改密码
Linux使用版本: Centos 7 救援模式: 1,在虚拟机设置里查看光驱是否开启启动,要保证设置状态里的两个选项都已选择. 2,先将Centos系统关机,然后在VMware左侧选中这台虚拟机并右 ...
Leetcode:Longest Substring Without Repeating Characters分析和实现
题目大意是传入一条字符串,计算出这样的这样一条子字符串,要求子字符串是原字符串的连续的某一段,且子字符串内不包含两个或两个以上的重复字符.求符合上面条件的字符串中最长的那一条的长度. 首先注意到任意一 ...
WDCP从php5.2升级到5.3的办法，以及升级过程中iconv错误的处理
从wdcp官方论坛我们可以找到一个询问升级的帖子,然后管理员在回复中也提供了升级方法: cd /tmp wget -c http://dl.wdlinux.cn:5180/soft/php-5.3.1 ...
mybatis的执行流程 #{}和${} Mysql自增主键返回 resultMap 一对多多对一配置
n Mybatis配置全局配置文件SqlMapConfig.xml,配置了Mybatis的运行环境等信息. Mapper.xml文件即Sql映射文件,文件中配置了操作数据库的Sql语句.此文件需要在 ...
面试题:四种Java线程池用法解析 !=!=未看
1.new Thread的弊端执行一个异步任务你还只是如下new Thread吗? 1 2 3 4 5 6 7 8 new Thread(new Runnable() { @Override ...
c语言实践打印字母三角形
效果如下: 我是怎么想的: 总共需要打印6行字母,那么就需要一个循环来控制打印第几行,大概代码如下: for(int i=0;i<6;i++) { } 每行都会打印字母,而且循环越往后,需要打印 ...
Python ---- super()使用
Python ---- super() 我们经常在类的继承当中使用super(), 来调用父类中的方法.例如下面: 1 2 3 4 5 6 7 8 9 10 11 12 13 class A: ...
YDNJS（上卷）：this 的绑定对象
函数中的 this 是在调用时被绑定的,this 指向谁完全取决于函数的调用位置. 确定 this 的绑定对象的方式有 4 种. 默认绑定默认绑定就是将函数中的 this 绑定给了全局对象 wind ...
Maven类包冲突终极三大解决技巧 mvn dependency:tree
Maven对于新手来说是<步步惊心>,因为它包罗万象,博大精深,因为当你初来乍到时,你就像一个进入森林的陌生访客一样迷茫. Maven对于老手来说是<真爱配方>,因为它无所不能 ...

js 的常用选择器

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

随机推荐

热门专题