一:id获取(全部浏览器兼容)

  document.getElementById("");

 <body>
<div id="box"></div>
</body>
<script>
var box = document.getElementById("box");
</script>

getElementById,它只有document对象才能使用,而且返回的是数组的第一个元素,他的方法名写明了是getElement不是getElements,不要搞混了。

以下几种获取的是元素的集合,是一个数组,所以引用的时候,记得加上下标:索引号

二:标签获取(全部浏览器兼容)

document.getElementsByTagName("");

<body>
<p>标签获取</p>
</body>
<script type="text/javascript">
var ps = document.getElementsByTagName("p");
ps[0].onclick = function(){
alert("标签获取");
};
</script>

三:name获取(ie9及ie9以下不兼容)

<body>
<div name="box">name获取</div>
</body>
<script type="text/javascript">
var boxs = document.getElementsByName("box");
boxs[0].onclick = function(){
alert("name获取");
}; </script>

四:className获取(ie9及ie9以上支持)

<body>
<div class="box">className获取</div>
</body>
<script type="text/javascript">
var boxs = document.getElementsByClassName("box");
boxs[0].onclick = function(){
alert("className获取");
}; </script>

一个根据父元素查找classname的兼容方法

js获取标签的几种方式的更多相关文章

  1. js获取标签的三种方式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. js获取时间戳的三种方式

      js获取时间戳的三种方式 CreateTime--2018年5月23日08:44:10 Author:Marydon // 方式一:推荐使用 var timestamp=new Date().ge ...

  3. js声明变量的三种方式

    JS 声明变量的三种方式 (1)使用变量步骤:a.声明-->b.赋值-->3.调用 正确用法: <script type="text/javascript"> ...

  4. Struts2(四.注册时检查用户名是否存在及Action获取数据的三种方式)

    一.功能 1.用户注册页面 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  5. js实现继承的5种方式 (笔记)

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  6. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  7. 获取Type的三种方式

    using System;using UnityEngine; public class Type_Test : MonoBehaviour{    private void Awake()    { ...

  8. java动态获取WebService的两种方式(复杂参数类型)

    java动态获取WebService的两种方式(复杂参数类型) 第一种: @Override public OrderSearchListRes searchOrderList(Order_Fligh ...

  9. AngularJS中获取数据源的几种方式

    在AngularJS中,可以从$rootScope中获取数据源,也可以把获取数据的逻辑封装在service中,然后注入到app.run函数中,或者注入到controller中.本篇就来整理获取数据的几 ...

随机推荐

  1. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  2. 【HDOJ】1811 Rank of Tetris

    并查集+拓扑排序.使用并查集解决a = b的情况. #include <iostream> #include <cstdio> #include <cstring> ...

  3. Solr 多核(MultiCore)配置

    Solr Multicore意义        Solr Multicore 是 solr 1.3 的新特性.其目的一个solr实例,可以有多个搜索应用.< xmlnamespace prefi ...

  4. HDOJ/HDU 1039 Easier Done Than Said?(字符串处理~)

    Problem Description Password security is a tricky thing. Users prefer simple passwords that are easy ...

  5. HDOJ/HDU 2549 壮志难酬(取小数点后几位~)

    Problem Description 话说MCA山上各路豪杰均出山抗敌,去年曾在江湖威名显赫的,江湖人称<万军中取上将首级舍我其谁>的甘露也不甘示弱,"天将降大任于斯人也,必先 ...

  6. 使用GPUImage开启的相机进行摄像,保存写入到Path

    之前已经有一篇博客讲过怎么开启摄像头并完成对摄像头的图像的滤镜化了,现在就说说怎么录像,并把这个添加滤镜的录像文件写到Path 原理是GPUImage给出了GPUImageMovieWriter这么个 ...

  7. [svn] 数据库操作残留,无法进行操作的解决方法

    WINDOWS环境下的解决方法: 1: 下载sqlite3数据库工具,放置于SVN的同级目录 2: CMD路径转移到Sqlite3目录 3: 残留操作选择: sqlite3 .svn/wc.db &q ...

  8. C++Primer第5版学习笔记(四)

    C++Primer第5版学习笔记(四) 第六章的重难点内容         你可以点击这里回顾第四/五章的内容       第六章是和函数有关的知识,函数就是命名了的代码块,可以处理不同的情况,本章内 ...

  9. openStack使用宿主机监控

    10个vm 平稳运行 top 数值

  10. 还原dede数据后系统基本参数空白栏目无显示的解决方法

    有时dedecms开发的网站在更换空间还原数据后,出现"系统基本参数"空白,而且可以看到tag也没有了. 大家不妨看看后台"数据库备份/还原"处,已经还原后的表 ...