一：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. python手记(32)

    #!/usr/bin/env python #-*- coding: utf-8 -*- import cv2 import numpy as np fn="test2.jpg" ...

  2. Apache CloudStack多个跨站脚本漏洞（CVE-2013-2136）

    漏洞版本: Apache Group CloudStack 4.1.0 Apache Group CloudStack 4.0.2 Apache Group CloudStack 4.0.1-incu ...

  3. HDU-2509 Be the Winner

    http://acm.hdu.edu.cn/showproblem.php?pid=2509 Be the Winner Time Limit: 2000/1000 MS (Java/Others)  ...

  4. std::min 与std::max 的 Compiler Error C2780

    代码 #include<iostream>#include <algorithm> // std::min#undef minint main(){ float a =15.0 ...

  5. duang体加班版

    领导第一次让我加班的时候,其实我是拒绝的,因为我觉着加班这个事,不能你让我加我就加,晚了就没有地铁了..领导跟我说可以打车报销.加了一个月之后,我的钱包duang~,后来我知道报销其实是假的,我每天打 ...

  6. 在Eclipse中格式化Android代码

    我们用Eclipse做Android开发的时候,可以导入Google提供的profile文件,这样每次"Ctrl+Shift+F"的时候,IDE就能够按照官方的规范来进行代码格式化 ...

  7. vijosP1059 积木城堡

    vijosP1059 积木城堡 链接:https://vijos.org/p/1059 [思路] 01背包. 刚开始想麻烦了,想的是二分答案然后01背包判断是否可行,但是首先答案不满足单调性所以不能二 ...

  8. BZOJ1057 [ZJOI2007]棋盘制作（极大化思想）

    1057: [ZJOI2007]棋盘制作 Time Limit: 20 Sec  Memory Limit: 162 MB Submit: 1848  Solved: 936 [Submit][Sta ...

  9. JavaScript高级程序设计15.pdf

    组合继承的问题是会调用2次超类型构造函数 寄生组合式继承 即通过借用构造函数来继承属性,通过原型链的形式来继承方法,思路:不必为了指定子类型的原型而调用超类型的原型,我们所需要的无非是超类型原型的一个 ...

  10. 《算法问题实战策略》-chaper15-计算几何-线段相交

    这篇文章着力来讨论线段相交这一个问题. 给出两条线段,如何判断这两条线段相交? 如果这两条线段相交,如何求其交点? 线段相交问题通常由于其繁杂的情况种类而让人避而远之,在这里希望通过笔者的简化讨论希望 ...