原生JS选择器有getElementById、getElementsByName、getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四个选择器的用法。

　　1.getElementById(通过ID获取元素)

　　用法:document.getElementById("Id");Id为要获取的元素的id属性值。

　　2.getElementsByName(通过name属性获取元素)

　　用法:document.getElementsByName("Name");Name为要获取元素的name属性值,这个方法一般适用于提交表单数据,当元素为form、img、iframe、applet、embed、object的时候设置name属性时,会自动在Document对象中创建以该name属性值命名的属性。所以可以通过document.domName引用相应的dom对象

　　3.getElementsByTagName(通过元素名称获取元素)

　　用法:document.getElementsByTagName(TagName);TagName为要获取元素的标签名称,当TagName为*的时候表示获取所有的元素,document也可以换成DOM元素,但是这样就只能获取到该DOM元素后面的子集元素。

　　4.getElementsByClassName(通过CSS类来获取元素)

　　用法:document.getElementsByClassName(ClassName);ClassName为要获取元素的CSS类名称,如果要同时获取多个的话,在每个CSS类后面用空格隔开。 如document.getElementsByClassName("class2 class1")就会获取到class1和class2样式的元素,document也可以换成DOM元素,这样也是只能获取到该DOM元素后面的子集元素。

　　

<!DOCTYPE html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

</head>

<body>

<div>我是通过标签获取</div>

<div id="box">我是通过id获取</div>

<div class="box1">我是通过class获取</div>

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

    我是通过name获取

</form>

</body>

<script type="text/javascript">

    var div = document.getElementsByTagName("div");

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

    var box1 = document.getElementsByClassName("box1");

    var box2 = document.getElementsByName("box2");

</script>

</html>

js选择器的更多相关文章

  1. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  2. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  3. js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型

    js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...

  4. JS高级语法与JS选择器

    元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"> ...

  5. 7-80 HTML5新增的JS选择器

    7-80 HTML5新增的JS选择器 学习要点 HTML5新增的JS选择器 在传统的 JavaScript 开发中,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 ta ...

  6. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  7. 前端（十二）—— JavaScript基础操作：if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  8. Js选择器总结

    一.原生JS选择器 JS选择器常用的有getElementById().getElementsByName().getElementsByTagName().getElementsByClassNam ...

  9. JS选择器querySelector和~All，三个原生选择器

    定义: querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素. 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素.如果你需要返回所有的元素,请 ...

随机推荐

  1. mysql高性能索引策略

    转载说明:http://www.nyankosama.com/2014/12/19/high-performance-index/ 1. 引言 随着互联网时代地到来,各种各样的基于互联网的应用和服务进 ...

  2. apache限制同一ip大并发访问及下载

    内容来自以下网站整理 http://www.jb51.net/article/58060.htmhttp://www.2cto.com/os/201202/120665.htmlhttp://blog ...

  3. IntelliJ设置鼠标悬浮提示和修改快捷键

    IntelliJ设置鼠标悬浮提示和修改快捷键 设置鼠标悬浮提示 修改快捷键 进入设置菜单 删除原来的快捷键(注:你可以选择保留原来的快捷键,同时使用两个快捷键) Good Luck

  4. jquery 中substring，substr，split的用法

    substring 方法 返回位于 String 对象中指定位置的子字符串. strVariable.substring(start, end) 参数 start 指明子字符串的起始位置,该索引从 0 ...

  5. Debug模式，不能进入打断点的类，反而进入代理类里

    有史以来,第一次,遇到这个问题, 设置好断点,Debug模式开启项目,,没有进入原来打好的断点类,反而,进入的是和断点类相同名字(但是图标不同)的一个类里, 不能真正的调试,调试变得很麻烦, 解决方案 ...

  6. WizNote for linux installation

    源一:没有用处 官网链接http://www.wiznote.com/download-wiznote-for-Linux. 源二:提供了源及安装方法 Fedora 中文社区软件源,具体位置在这里. ...

  7. smarty 内存缓存

    <?php //缓存 //定义一个该页面的缓存文件路径 $filename="../cache/mainhc.html"; //设置一个缓存时间 $time=; //判断缓存 ...

  8. Android调试小技巧(LogCat不输出、Log自动清空、install时timeout)

    问题:有时候明明连接了设备,而LogCat却没有输出 解决方法:在device界面点一下对应设备,使其处于选中状态(它适用于查看手机文件不显示的情况) 问题:前面记录的Log看着看着突然被清空了 解决 ...

  9. GOOGLE地图坐标拾取方法、GOOGLE地图获取坐标方法

    方法一: 打开google地图-->查找目的地-->右键:此位置居中--> 打开IE浏览器(百度浏览器.GOOGLE浏览器.360浏览器均不行,只能在IE中获取),在IE浏览器的地址 ...

  10. NGUI 多场景情况下 管理多个界面

    简单的说就是在一个AllUI场景中,所有场景所需要的界面都挂在一个Empty GameObject下,然后这个Empty GameObject在代码中DontDestroyOnLoad,但是回到这个A ...