javascript通过元素id和name直接取得元素的方法

   这篇文章主要介绍了javascript通过元素id和name直接取得元素的方法,涉及javascript获取元素的相关技巧,非常具有实用价值,需要的朋友可以参考下

  本文实例讲述了javascript通过元素id和name直接取得元素的方法。分享给大家供大家参考。具体分析如下:

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

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

  在js中如果id名称不和内置属性或全局变量重名的话,该名称自动成为window对象的属性,而在一个html页面中的最顶层环境中有:

  ?

1

this === window

  所以如果我们写一个如下的html元素代码就可以这样引用它:

  ?

1
2
3
4
5

<input type="button" id="btn_ok" value="Ok" onclick="..." />
//可以这样引用
btn_ok.onclick = function(){};
//或者下面也是一样的
window.btn_ok.style = ...;

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

  ?

1
2
3
4
5
6
7
8
9
10
11

<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);
//或者是非"标准"语法each语句方式
for each(img in pic)
console.log(img.alt);

  希望本文所述对大家的javascript程序设计有所帮助。

时间: 2024-12-04 16:24:07

javascript通过元素id和name直接取得元素的方法的相关文章

javascript通过元素id和name直接取得元素的方法_javascript技巧

本文实例讲述了javascript通过元素id和name直接取得元素的方法.分享给大家供大家参考.具体分析如下: 我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然.而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单介绍下. 在html中,一般最直接的辨别html元素使用的是name和id属性,两者有着细微的不同:id必须页面唯一,但name可以有重复. 在js中如果id名称不和内置属性或全局变量重名的话,该名称自动成为window对

javascript中通过元素id和name直接取得元素

我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然.而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单介绍下. 在html中,一般最直接的辨别html元素使用的是name和id属性,两者有着细微的不同:id必须页面唯一,但name可以有重复. 在js中如果id名称不和内置属性或全局变量重名的话,该名称自动成为window对象的属性,而在一个html页面中的最顶层环境中有: this === window 所以如果我们写一个如下的htm

jQuery选择id属性带有点符号元素的方法

 这篇文章主要介绍了jQuery选择id属性带有点符号元素的方法,涉及jQuery选择器的使用技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery选择id属性带有点符号元素的方法.分享给大家供大家参考.具体分析如下: 如果jquery要选择的元素id中带有点符号,在选择时需要在点前面加上两个反斜杠,如: ? 1 $("#address.street").text("Enter this field"); 具体代码如下: ? 1 2 3 4

Javascript调用iframe父窗口与子窗口元素例子总结

1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 代码如下: $("#objid",document.frames('iframename').document) 3.js 在iframe子页面获取父页面元素代码如下: indow.parent.document.getElementByIdx_x("元素id");

jQuery选择id属性带有点符号元素的方法_jquery

本文实例讲述了jQuery选择id属性带有点符号元素的方法.分享给大家供大家参考.具体分析如下: 如果jquery要选择的元素id中带有点符号,在选择时需要在点前面加上两个反斜杠,如: $("#address\\.street").text("Enter this field"); 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-typ

jquery检测网页元素id是否存在

使用传统javascript方法,如下:  代码如下 复制代码 if(document.getElementById('div')) {           // 找到到对应元素   } else {           // 没有找到找到到对应元素   } 使用jQuery则比较简单,只需判断此元素的长度是否为0,如果为0则此元素不存在,代码如下:  代码如下 复制代码 if ($("#div").length > 0){       // 找到对应id=div的元素,然后执行

Javascript实例教程:处理页面中的空格元素

文章简介:今天第二章,继续讲获取页面中DOM元素.大家都知道在JQ中想获取一个元素的兄弟元素,父级元素,子元素等等是非常方便的.其实在原生的也JS也有这些属性.和JQ几乎相同但是比JQ少一些.但是用起来却比JQ麻烦一点.主要因为FF浏览器,因为FF会把你的换行也当做一个DOM元素 今天第二章,继续讲获取页面中DOM元素.大家都知道在JQ中想获取一个元素的兄弟元素,父级元素,子元素等等是非常方便的.其实在原生的也JS也有这些属性.和JQ几乎相同但是比JQ少一些.但是用起来却比JQ麻烦一点.主要因为

JavaScript通过join函数连接数组里所有元素的方法

 这篇文章主要介绍了JavaScript通过join函数连接数组里所有元素的方法,实例分析了javascript中join函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JavaScript通过join函数连接数组里所有元素的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 <script type="text/javascript"> var days = ["Sunday","Mond

使用jQuery时Form表单元素ID和name命名大忌

 将自己的表单元素ID和name命名为了nodeName,在chrome浏览器下报错,结果发现是表单元素命名的原因 在做自己的毕业设计的时候将自己的表单元素ID和name命名为了nodeName:  代码如下: <form>    <input type="text" name="nodeName" id="nodeName">    ...........    </form>    在chrome浏览器下可