我们知道一些第三方的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. C++设计模式-Mediator中介者模式

    Mediator中介者模式作用:用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. UML如下: Colleage抽象同事类 ...

  2. PD脚本导出到数据库后没有注释问题

    昨天PD里建了几张表,建表的时候我在NAME栏位写了中文说明,但是脚本在数据库里生成表以后,发现中文说明没有了,需要自己在“注释”栏位添加才行,如下图: 我想要达到的效果如下图: 解决方法: 1.  ...

  3. QT不同版本编译

    QT发布了不同版本,有一些语法修改,需要修改代码.同时旧版本代码转换需要在pro文件中添加代码greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

  4. Android 软引用

    2013-08-13 13:56 佚名 eoe Android开发者社区 字号:T | T   可能对于Android开发者来说,软引用这个词有的会不是很熟悉,软引用在Java开发中用的比较多,但是, ...

  5. (转)发布Silverlight+WCF程序到IIS后,客户端访问数据库失败的解决方案

    转自url:http://greatverve.cnblogs.com/archive/2011/11/30/silverlight-wcf-pub.html 我们在编写Silverlight程序时, ...

  6. Jmeter分布式测试

    随着并发量的增大,一台机器就不能满足需求了,所以我们采用分布式(Master-Slaver)的方案去执行高并发的测试 注意事项: Master机器一般我们不执测试,所以可以拿一台配置差些的机器,主要用 ...

  7. vc-complex-type.2.3: Element 'filter-mapping' cannot have character [children], because the type's content type is element-only.

    报这种错一般是因为导入的项目或者黏贴的代码中有中文空格或者中文编码,只需将报错代码重写一遍即可.

  8. 【SSM 6】Spring+SpringMVC+Mybatis框架搭建步骤

    一.整体概览 首先看maven工程的创建 二.各层的文件配置 2.1,SSM父工程 <span style="font-family:KaiTi_GB2312;font-size:18 ...

  9. nginx 配置全站404(百度闭站保护)

    在百度站长里申请闭站保护时,需要全站404.可能过nginx配置实现 location / {   #root html;   #index index.html index.htm;   retur ...

  10. 6、SQL Server 数据查询

    一.使用SELECT检索数据 数据查询是SQL语言的中心内容,SELECT 语句的作用是让数据库服务器根据客户要求检索出所需要的信息资料,并按照规定的格式进行整理,返回给客户端. SELECT 语句的 ...