脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → js 选择器

js选择器全面解析

 更新时间：2016年06月27日 10:41:15   投稿：jingxian  
下面小编就为大家带来一篇js选择器全面解析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

原生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选择器全面解析全部内容了，希望大家多多支持脚本之家~

您可能感兴趣的文章:

相关文章

  • Javascript基础教程之数据类型转换

    Javascript基础教程之数据类型转换

    JavaScript是一种无类型语言，但同时JavaScript提供了一种灵活的自动类型转换的处理方式。基本规则是，如果某个类型的值用于需要其他类型的值的环境中，JavaScript就自动将这个值转换成所需要的类型。
    2015-01-01
  • 「中高级前端面试」JavaScript手写代码无敌秘籍（推荐）

    「中高级前端面试」JavaScript手写代码无敌秘籍（推荐）

    这篇文章主要介绍了JavaScript手写代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 对javascript基本对象的属性以及方法的实例介绍

    对javascript基本对象的属性以及方法的实例介绍

    对javascript基本对象的属性以及方法的实例介绍...
    2007-01-01
  • 深入理解JavaScript中的对象

    深入理解JavaScript中的对象

    这篇文章主要介绍了深入理解JavaScript中的对象,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • JS中的this变量的使用介绍

    JS中的this变量的使用介绍

    在JavaScript中this变量是一个令人难以摸清的关键字，this可谓是非常强大，在本文将为大家详细介绍下JavaScript中this的使用，感兴趣的朋友可以参考下
    2013-10-10
  • ajax的hide隐藏问题解决方法

    ajax的hide隐藏问题解决方法

    我的页面上有两个table，调用ajax之后隐藏掉一个,然后用html拼出另一个table,结果新的table最上面有个undefined，这个是怎么引起的
    2012-12-12
  • js脚本学习 比较实用的基础

    js脚本学习 比较实用的基础

    js脚本学习 比较实用的基础...
    2006-09-09
  • javascript设计模式之命令模式

    javascript设计模式之命令模式

    这篇文章主要为大家介绍了javascript命令模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-01-01
  • 基于JavaScript 类的使用详解

    基于JavaScript 类的使用详解

    JavaScript里的Class（类），其实是通过Function来实现的。 我们通过字面量或者构造函数来创建对象时，其实都只是给特定的一个对象赋属性和值。如果我们有多个对象，他们的属性都一样只是值不同，那就会写很多重复的语句，这时候类就很好用了
    2013-05-05
  • document.getElementById获取控件对象为空的解决方法

    document.getElementById获取控件对象为空的解决方法

    今天写个网页，想在页面加载onLoad时，动态显示由后台其他程序传来的数据时，用document.getElementById获取控件对象总是为空。但是检查了这个id确实是存在的。看下文的示例和解决方法
    2013-11-11

最新评论