原生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. win7系统部分便笺的元数据已被损坏怎么恢复

    解决Windows7系统打开便笺:部分便笺的元数据已被损坏,便笺已将其恢复为默认值.这个问题! Windows7下有一部分系统打开便笺就会报出以下情况 其实这个方法很好解决! 我们需要重新注册一下下面 ...

  2. 关于前端build工具

    第一.build工具的核心就是帮你安装和帮你做事.安装类工具:Npm.Bower.Yeoman等          做事类工具:Node.Grunt.gulp.Webpack等 安装类工具几乎什么东西 ...

  3. 深入理解js——作用域

    "javaScript没有块级作用域",所谓"块",就是{}中间的内容.所以在声明变量的时候不要在"块"里面,要在一开始声明就好了. 其实j ...

  4. bat调用bat的一个巨坑

    [一个巨坑] a.bat的内容:echo 1b.batecho 2执行结果:运行a.bat时,输出1,然后调用b.bat, 但是 echo 2 显示不出来. bat怎么调用bat文件并返回? 例如主文 ...

  5. 让div固定在顶部不随滚动条滚动

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. NPOI 2.0版本的使用

    详细教程: http://blog.csdn.net/xxs77ch/article/details/50216033 using System; using System.Collections.G ...

  7. MVC Html.ValidationSummary()样式优化

    先看效果图 在MVC中常用ValidationSummary显示校验信息,默认样式为 针对Html.ValidationSummary()如何做优化 样式一: 在MVC中,如果你使用验证总结方法任何验 ...

  8. 一次疏忽导致的bug

    NBB_PUT_SHORT 这个宏是按char* 类型算指针的实际工作中,没有注意这一点,输入指针类型 强转为了 SHORT* 导致 填充的内容错误 这是第一次在工作中遇到 指针类型相关的问题值得记录 ...

  9. ABP mapto 映射

    obj1.MapTo(obj2); obj1=>obj2: 在obj1实体里添加映射 [AutoMap(typeof(obj2))] public class obj1 { }

  10. csrf跨站请求伪造

    如何杜绝跨站请求伪造? 1.要让服务器知道本次请求是不是冒用了用户的身份→ 2.服务器发给用户一个凭证,用户请求时需携带此凭证→ 3.此凭证只能用户看到而且冒用者看不到→ 4.这就用到了浏览器的安全机 ...