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 ...
随机推荐
- bash shell笔记6 脚本控制
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://twentyfour.blog.51cto.com/945260/522415 知 ...
- mysql日期获取
获取当前日期在本周的周一:select subdate(curdate(),date_format(curdate(),'%w')-1) 获取当前日期在本周的周日:select subdate(cur ...
- ms project设置行高
1.取消某列的自动换行右击“任务名称”——自动换行 2.全选所有任务点击左上角单元格 3.设置所有行的行高点击任意行最左边单元格的下边框,向上拖放 4.ok
- 解决nginx: [emerg] bind() to [::]:80 failed (98: Address already in use)
nginx先监听了ipv4的80端口之后又监听了ipv6的80端口,于是就重复占用了.更加坑人的是你去看了端口占用它又把80端口释放了,是不是很囧. 解决方案是编辑nginx的配置文件 修改这一段:
- 【总结整理】Edraw Max亿图图示软件快捷键(转)
Edraw Max亿图图示软件快捷键大全,你想要的都在这了! 用过Edraw Max亿图图示软件的一定知道,亿图是一款功能十分强大的图形图表设计软件.无论是流程图.思维导图.组织结构图.甘特图.网 ...
- 266. Palindrome Permutation 重新排列后是否对称
[抄题]: Given a string, determine if a permutation of the string could form a palindrome. For example, ...
- 10-python中的requests应用
使用request方便: #_*_ coding: utf-8 _*_ ''' Created on 2018年7月14日 @author: sss ''' import requests impor ...
- 2-JRE System Libraty [eclipse-mars](unbound)
- ROS indigo 删除和安装
删除比较容易: sudo apt-get remove ros-jade-desktop-full 但是如果怕删不干净可以采用: sudo apt-get remove ros-* ,但是不确定会 ...
- c语言实践:求两个数的最大公约数
我的思路是这样的:比如12和16这两个数.先理解一下概念,什么叫最大公约数.就是12有很多个因数,16也有很多个因数,这两堆因数中有一些重合的因数,在这些重合的因数中找到那个最大的.那么最大公约数一定 ...