背景

今天在逛知乎时候,看到一个JavaScript方面的问题:



最近在学习JavaScript DOM,就好奇地查阅资料,以及请教学长,得到下面解答:

http://www.w3help.org/zh-cn/causes/SD9012

http://www.w3help.org/zh-cn/causes/SD9001

document.getElementsByName(elementName) 方法是 HTMLDocument 接口提供的方法,该方法传入的参数应该是目标元素的 name 属性的值:

目标元素的 name 是一个大小写敏感的字符串,仅 BUTTON, TEXTAREA, APPLET, SELECT, FORM, FRAME, IFRAME, IMG, A, INPUT, OBJECT, MAP, PARAM, META 元素允许有 name 属性1,并且 name 属性可以不是唯一的。

在IE 中,只有这些标签有 'name' 属性时,可以使用 document.getElementsByName(elementName) 方法获取他们创建的 DOM 元素,但在其他浏览器中,有 'name' 属性的其他标签也可以用这种方法获取。即

可以在其他浏览器中通过使用 document.getElementsByName('test')[0] 来获取,但在 IE 中却不行,得到的将是 undefined。

使用 document.getElementsByName 方法获取页面内的元素时,在 IE6 IE7 IE8 中的 name 是大小写不敏感的。

源代码


var reliableGetByName = true; // IE6/7/8(Q)有id和name混淆的问题, IE6/7/8有不能获取非form和不区分大小写的问题
(function () {
var div = document.createElement('div');
var expando = 'selector-' + new Date().getTime();
document.body.appendChild(div).name = expando;
reliableGetByName = !document.getElementsByName(expando.toUpperCase()).length;
document.body.removeChild(div);
div = null;
})(); function getElemensByName(name, context) { context = context || document; var seeds; // 只有document有这个方法
if (reliableGetByName && context.getElementsByName) {
seeds = context.getElementsByName(name);
}
else {
seeds = context.getElementsByTagName('*');
} var results = [];
var elem; for (var i = 0, len = seeds.length; i !== len && (elem = seeds[i]) != null; i++) {
if (elem && elem.nodeType === 1 && elem.getAttribute('name') === name) {
results.push(elem);
}
} return results;
}

具体思路

1.判断浏览器是否支持getElementsByName函数

先生成一个div,给div加一个name = 随机串,如果可以找到,就说明是IE9+;找不到就是IE8-,还有一种方法是利用IE6/7/8不区分大小写判断的。


var reliableGetByName = true; // IE6/7/8(Q)有id和name混淆的问题, IE6/7/8有不能获取非form和不区分大小写的问题
(function () {
var div = document.createElement('div');
var expando = 'selector-' + new Date().getTime();
document.body.appendChild(div).name = expando;
reliableGetByName = !document.getElementsByName(expando.toUpperCase()).length;
document.body.removeChild(div);
div = null;
})();

2.在context中找name为name的所有元素,返回一个数组


function getElemensByName(name, context) { context = context || document; var seeds;
if (reliableGetByName && context.getElementsByName) {
seeds = context.getElementsByName(name);
}
else {
seeds = context.getElementsByTagName('*');
}

3.判断elem存在,elem.nodeType=== 1 是元素,然后elem.name 是给的name

var results = [];
var elem; for (var i = 0, len = seeds.length; i !== len && (elem = seeds[i]) != null; i++) {
if (elem && elem.nodeType === 1 && elem.getAttribute('name') === name) {
results.push(elem);
}
} return results;
}

分析

以上代码可以解决四个问题:

1、IE67混淆id和name

2、IE678不能获取非表单元素

3、IE678忽略大小写

4、只有document.getElementByName而没有elem.getElementByName的问题

posted @
2015-04-07 17:05 
青青flye 
阅读(...) 
评论(...) 
编辑 
收藏

批量处理标签属性中document.getElementsByName()的替代方案的更多相关文章

  1. vue.js如何在标签属性中插入变量参数

    html的标签的属性,比如id.class.href需要动态传递参数,拼接字符串,查了一些资料,并没有找到合适的解决方法,琢磨了一上午,终于试出了方法: v-bind:属性=" '字符串'+ ...

  2. jsp页面从标签属性中获取值

    你还可以在"data-*" 属性里使用json语法,例如 <div id="awesome-json" data-awesome='{"game ...

  3. DOM中document对象的常用属性方法

    每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返 ...

  4. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  5. html页面中插入html的标签,JS控制标签属性

    html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...

  6. PHP通用的XSS攻击过滤函数,Discuz系统中 防止XSS漏洞攻击,过滤HTML危险标签属性的PHP函数

    XSS攻击在最近很是流行,往往在某段代码里一不小心就会被人放上XSS攻击的代码,看到国外有人写上了函数,咱也偷偷懒,悄悄的贴上来... 原文如下: The goal of this function ...

  7. javascript中document对象的属性和方法

    document.documentElement; document.firstChild;document.childNodes[0];// 取得对<html>的引用document.b ...

  8. 如何自定义JSTL标签与SpringMVC 标签的属性中套JSTL标签报错的解决方法

    如何自定义JSTL标签 1.创建一个类,从SimpleTagSupport继承 A) 通过继承可以获得当前JSP页面上的对象,如JspContext I) 实际上可以强转为PageContext II ...

  9. 关于在JS中设置标签属性

    Attribute 该属性主要是用来在标签行内样式,添加.删除.获取属性.且适用于自定义属性. setAttribute("属性名",属性值“”):这个是用来设置标签属性的: re ...

随机推荐

  1. Mybitis+springMVC 套路

    springMVC:确保能够扫描到所有注解 <!-- 使用Annotation自动注册Bean,只扫描@Controller --> <context:component-scan ...

  2. mvvm模式下在WPF项目中动态加载项目的程序集和类

    在mvvm模式的wpf项目中有个需求需要去加载解决方案的程序集,并且根据程序集去动态加载当前程序集的类,做成下拉框形式. 效果: //全局定义 private ComboBox abList= nul ...

  3. 使用metasploit进行栈溢出攻击-3

    有了shellcode,就可以进行攻击了,但是要有漏洞才行,真实世界中的漏洞很复杂,并且很难发现,因此我专门做一个漏洞来进行攻击. 具体来说就是做一个简单的tcp server,里面包含明显的栈溢出漏 ...

  4. Appium的常用定位方法

    使用uiautomatorviewer.bat工具来找到属性定位元素,在SDK的tools目录下找到该工具,双击打开.左边框内展示app的界面元素,右上角框内展示元素的层级关系,右下角框内展示元素的属 ...

  5. SnackBar使用

    注意:build(BuildContext context)在 Scaffold.of(context)之前时,会报错,解决办法:通过build widget来解决,如下代码. import 'pac ...

  6. [SinGuLaRiTy] 2017-04-08 综合性测试

    [SinGuLaRiTy-1016] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 对于所有的题目:Time Limit:1s  |  Me ...

  7. bzoj3684: 大朋友和多叉树(拉格朗日反演+多项式全家桶)

    题面 传送门 题解 首先你得知道什么是拉格朗日反演->这里 我们列出树的个数的生成函数 \[T(x)=x+\prod_{i\in D}T^i(x)\] \[T(x)-\prod_{i\in D} ...

  8. loj#6485. LJJ 学二项式定理(单位根反演)

    题面 传送门 题解 首先你要知道一个叫做单位根反演的东西 \[{1\over k}\sum_{i=0}^{k-1}\omega^{in}_k=[k|n]\] 直接用等比数列求和就可以证明了 而且在模\ ...

  9. HashMap resize导致死循环

    原文链接:https://blog.csdn.net/hll174/article/details/50915346 问题的症状 从前我们的Java代码因为一些原因使用了HashMap这个东西,但是当 ...

  10. Python项目完成

    今天,来对之前自学python做的一个小任务进行复习和总结,首先回顾之前任务的每一个步骤,按照自己个人的思路,一布一步往下做 需求:根据主网站,爬取出大连市各年地区生产总值,观察2010至2015年的 ...