我们知道一些第三方的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. 简约的ASP.NET 系统框架,提供源码。

    好东西,好东西就要分享. 其实谈不上什么好东西,但很实用,应用起来也很简单,我自己用它构建了多套ASP .NET系统,原理也很简单: 1.用XML文件编辑系统的菜单和Toolbar: 2.读取XML节 ...

  2. zookeeper入门学习

    1.基本概念 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的 ...

  3. tr:even 与tr:odd

    :even匹配所有索引值为偶数的元素,从 0 开始计数查找表格的1.3.5...行(即索引值0.2.4...)<table> <tr><td>Header 1< ...

  4. eaby技术架构变迁

    如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭 最近在infoq上面看到 ebay介绍其系统架构变迁以及系统设计分享方面的讲座,其中 ...

  5. swiper

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

  6. jquery 面板拖拽

    在网上找了好多的例子 都不满足我所需要 在网上找了一篇关于easyui是一个拓展的demo  然后根据demo 把我所需要的东西进行再次拓展 满足我的需求 也不多说了 上代码 首先 你肯定是要导eas ...

  7. OCP认证之Oracle的SQL语言基础(一)

    一.Oracle命令类别 数据操纵语言(DML):select;insert;delete;update;merge 数据定义语言(DDL):create;alter;drop;truncate 事物 ...

  8. web开发过程中经常用到的一些公共方法及操作

    进化成为程序猿也有段岁月了,所谓的经验,广度还是依旧,只不过是对于某种功能有了多种实现方式的想法.每天依旧不厌其烦的敲打着代码,每一行代码的回车似乎都有一种似曾相识的感觉.于是乎:粘贴复制,再粘贴再复 ...

  9. 利用Flex组件birdeye绘制拓扑关系图

    birdeye绘制拓扑关系图 1.flex简单介绍 Flex 是一个高效.免费的开源框架,可用于构建具有表现力的 Web应用程序,这些应用程序利用Adobe Flash Player和Adobe AI ...

  10. CentOS 6下Apache的https虚拟主机实践

    题目:1.建立httpd服务器,要求: 提供两个基于名称的虚拟主机: (a)www1.buybybuy.com,页面文件目录为/web/vhosts/www1:错误日志为/var/log/httpd/ ...