我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然。而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单介绍下。

在html中,一般最直接的辨别html元素使用的是name和id属性,两者有着细微的不同:id必须页面唯一,但name可以有重复。

在js中如果id名称不和内置属性或全局变量重名的话,该名称自动成为window对象的属性

<div id="demo"></div>

test.onclick = function(){

  //your code
}

等价于

window.test.onclick = function(){
  //your code
}

对于name属性来说,只有某些类型的html元素具有类似的方法,比如:form,img,iframe,applet,embed,object等。在这些元素中可以通过全局变量或者document的属性来访问特定name属性的元素;如果相同name属性的有多个元素,则返回一个NodeList的类似只读数组的对象,例如如下代码:

<div>
  <img name="pic" src="#" alt="pic_0" />
  <img name="pic" src="#" alt="pic_1" />
  <img name="pic" src="#" alt="pic_2" />
</div>
//我们可以这样引用name为pic的元素:
for(x in pic)
 console.log(pic[x].alt);
使用id名称和name名称获取元素,几乎在所有浏览器都支持。

使用id名称和name直接获取元素的更多相关文章

  1. iframe父页面和子页面获取元素和js变量

    父页面获取iframe页面元素和变量 获取方法:$("#id")[0].contentWindow.showInfo(): 获取元素:  $("#id").co ...

  2. 从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  3. WebBrowser网页操作之提取获取元素和标签(完整篇)

    最近使用WebBrower做了几个Hook小程序,收集积累如下: using System; using System.Collections.Generic; using System.Linq; ...

  4. js中用tagname和id获取元素的3种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JavaScript通过元素id和name直接获取元素的方法

    概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...

  6. 不获取元素,直接使用id操作dom元素

    今天无意中发现个让我很吃惊的问题. 不使用getElementById方法,也可以用id直接操作有id的元素. 继续搜索后,发现name也可以直接操作... 这让我大感意外,了解以后,忍不住写点东西记 ...

  7. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  8. jquery通过name,id名称获取当前value值

    name是input标签的属性值,jQuery提供了attr() 方法用于设置/改变属性值 $("input:text").attr("name");$(&qu ...

  9. 根据id设置、获取元素的文本和value

    /** * 根据id获取元素文本 * @param {String} id|元素id * return {Integer || String} text */function getText(id){ ...

随机推荐

  1. 将Java应用程序打包成可执行的Jar包

    可以将多个class文件打包为jar包,在指定程序入口点情况下,可以用 java –jar jar包名称 的方式调用jar包内主类的main函数. 程序源代码如下: //Math.java publi ...

  2. Linux 任务计划

    一.配置cron实现自动化 使用cron实现任务自动化可以通过修改/etc/crontab文件以及使用crontab命令实现,其结果是一样的. 1./etc/crontab文件实现自动化 cron守护 ...

  3. Samba 4 Domain Controller on Ubuntu 14.04 LTS

    1. Configure network with a static ip address $sudo nano /etc/network/interfaces auto eth0 iface eth ...

  4. Linux top命令排序

    在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 Linux 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会以 ...

  5. 百度地图API 定位一直4.9E-324

    使用百度地图Android SDK 7.0定位坐标一直为4.9E-324,网上搜索了很多,但是均未解决我的问题,在此坐下解决记录,在设置权限中将应用添加信任即可!android 6.0 其他版本未测! ...

  6. 基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系。

    (转自:http://blog.sina.com.cn/s/blog_5eca668b01018949.html)定义一个类,来对远程X.509证书的验证,进行处理,返回为true.我们要自己定义一个 ...

  7. linux 配置 tomcat 自动发布脚本

    首先将打包好的 war 包(举例 management-20160809-1.0.war),传到 tomcat 的 webapps 目录下,然后在 tomcat 目录下新建 deploy.sh 脚本. ...

  8. html css 编写规范

    html 规范 一 语法 1.用两个空格带她tab, 2.嵌套的元素应该缩进一次,即两个空格是最好 3.属性定义,全部使用双引号,尽量避免单引号. 4.不要在自闭和标签尾部添加闭合标签. 5.可选得结 ...

  9. TJI读书笔记16-异常处理

    TJI读书笔记16-异常处理 概念 基本异常情形 异常的捕获 自定义异常 异常说明 捕获所有异常 栈轨迹 重新抛出异常 Java标准异常 使用finally 异常的限制 构造器 异常的匹配 其他乱七八 ...

  10. 文法 LL1

    <程序>-><声明列表>|<程序><函数> <声明列表>-><声明>|<声明><声明列表> ...