使用id名称和name直接获取元素
我们知道一些第三方的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直接获取元素的更多相关文章
- iframe父页面和子页面获取元素和js变量
父页面获取iframe页面元素和变量 获取方法:$("#id")[0].contentWindow.showInfo(): 获取元素: $("#id").co ...
- 从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- WebBrowser网页操作之提取获取元素和标签(完整篇)
最近使用WebBrower做了几个Hook小程序,收集积累如下: using System; using System.Collections.Generic; using System.Linq; ...
- js中用tagname和id获取元素的3种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript通过元素id和name直接获取元素的方法
概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...
- 不获取元素,直接使用id操作dom元素
今天无意中发现个让我很吃惊的问题. 不使用getElementById方法,也可以用id直接操作有id的元素. 继续搜索后,发现name也可以直接操作... 这让我大感意外,了解以后,忍不住写点东西记 ...
- JavaScript通过ID获取元素坐标
JavaScript通过ID获取元素坐标 function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase ...
- jquery通过name,id名称获取当前value值
name是input标签的属性值,jQuery提供了attr() 方法用于设置/改变属性值 $("input:text").attr("name");$(&qu ...
- 根据id设置、获取元素的文本和value
/** * 根据id获取元素文本 * @param {String} id|元素id * return {Integer || String} text */function getText(id){ ...
随机推荐
- Android使用Drawable资源之使用ClipDrawable资源 实现进入条
以前我自定义的进度条(就是咱们现在工程中用的)是从android的源码中扒出来的一个XML,然后把里面的图片给替换了.一直不知道它的具体原理是什么. 今天得空研究了一下,发现它的原理其实就是用的and ...
- JS实现无缝滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JVM内存模型与性能调优
堆内存(Heap) 堆是由Java虚拟机(JVM,下文提到的JVM特指Sun hotspot JVM)用来存放Java类.对象和静态成员的内存空间,Java程序中创建的所有对象都在堆中分配空间,堆只用 ...
- CPU阿甘:函数调用的秘密
个人感言:真正的知识是深入浅出的,码农翻身" 公共号将苦涩难懂的计算机知识,用形象有趣的生活中实例呈现给我们,让我们更好地理解.感谢"码农翻身" 公共号,感谢你们的成果, ...
- Android IOS WebRTC 音视频开发总结(八十五)-- 使用WebRTC广播网络摄像头视频(下)
本文主要介绍WebRTC (我们翻译和整理的,译者:weizhenwei,校验:blacker),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:bl ...
- .NET 工具类ObjectDumper 打印对象
// Comes from the LINQ samples provided by Microsoft //Copyright (C) Microsoft Corporation. All righ ...
- html5 弹框 可用于安卓手机弹出输入框
function text() { name=prompt("请输入wifi密码"); // 弹出input框 prompt('提示语','默认输入框字段') //alert(na ...
- python猜数脚本(电脑猜测)(二分法)
# coding=utf-8# 猜数# 记录猜数的过程import randomcom_result=[] #存放电脑结果,数组com_count=0 #存放电脑猜测次数ran=random.ran ...
- SAMBA 服务器原理
SAMBA服务器 16.1.1 什么是SAMBA 在早期,一般使用FTP来传文件: 不过使用 FTP 传输档案却有个小小的问题, 那就是 你无法直接修改主机上面的档案数据!也就是说,你想要更改 ...
- Mathematica(MMA)闪电入门系列 目录与说明
Mathematica(MMA)闪电入门系列 入口 本文起到目录作用,点击以下链接,可以打开各章: 一.MMA概述二.表操作三.函数与递归四.表达式的计算五.过程式编程和调试技巧六.图形七.程序包 ...