位置：首页>> 网络编程>> JavaScript>> getElementsByAttribute

getElementsByAttribute

作者：司徒正美　来源：Ruby's Louvre　发布时间：2009-10-27 12:13:00　

标签：JQuery,选择符,getElementsByAttribute

这个可以说属性选择符的JS版，用来遴选元素是适合不过。在开始之前，我们复习一下CSS2的属性选择符，JQuery高手可以跳过。

属性选择符：

名称	语法	描述	例子
Simple Attribute Selector	[Attr] 或者tagName[Attr]	选择具有此属性的元素	blockquote[title] { color: red }
Attribute Value Selector	[Attr="value"] 或者tagName[Attr="value"]	选出属性值精确等于给出值的元素	h2[align="left"] { cursor: hand }
"Begins-with" Attribute Value Selector	[Attr^="value"] 或者tagName[Attr^="value"]	选出属性值以给出值开头的元素	h2[align^="right"] { cursor: hand }
"Ends-with" Attribute Value Selector	[Attr$="value"] 或者tagName[Attr$="value"]	选出属性值以给出值结尾的元素	div[class$="vml"]{behavior: url(#VMLRender)}
Substring-match Attribute Value Selector	[Attr="value"] 或者tagName[Attr="value"]	选出属性值包含给出值的元素	div[class*="grid"]{float:left}
One-Of-Many Attribute Value Selector	[Attr~="value"] 或者tagName[Attr~="value"]	原元素的属性值为多个单词，给出值为其中一个。	li[class~="last"]{padding-left:2em}
Hyphen Attribute Value Selector	[Attr\|="value"] 或者tagName[Attr\|="value"]	原元素的属性值等于给出值，或者以给出值加“-”开头	span[lang\|="en"]{color:green}
反选属性值选择器	[Attr!="value"] 或者tagName[Attr!="value"]	非标准，jQuery中出现的	span[class!="red"]{color:green}

当然属性值不定要用双引号，也可以用单引号，或干脆不写。属性值可以是字母，数字，或者gb2312等编码的文字，总之，平时怎样命名变量，也应该怎样命名此属性值。如，我们可以用中文来命名变量，因此同样的事出在属性值上也没有问题。如果属性值是"#"就肯定所错，因为变量名也不能这样用。不过建议尽量用英文单词。

好了，是getElementsByAttribute的表演时间了，比网上的同名函数强大得多了。传入两个参数，第一个是字符串，必选，就是CSS2的属性选择符，由于是字符串，里面就不要加双引号与单引号了，我也懒得匹配它。第二个是元素节点，可选，从来加快查找速度，默认是document。不过自从IE8等支持querySelector与querySelectorAll后，jQuery的选择器基本只剩下半条命，也只能在IE6，IE7这些要啥没啥的非标准浏览器作威作福罢了。因此，如果检测到浏览器支持querySelectorAll，就调用该原生方法，否则就全文档遍历匹配。

最后切记，如果要使用到属性值，不要把属性值用引号引起来，直接放到等于号后面即可。放一些测试页面，让大家看看如何使用此函数。

<!doctype html><title>getElementsByAttribute by 司徒正美</title><meta charset="utf-8"/><meta name="keywords" content="getElementsByAttribute by 司徒正美" /><meta name="description" content="getElementsByAttribute by 司徒正美" /><script type="text/javascript" defer="defer"> function getElementsByAttribute(search){ var tag = /([\*a-zA-Z1-6]*)?(\[(\w+)\s*(\^|\$|\*|\||~|!)?=?\s*([\w\u00C0-\uFFFF\s\-_\.]+)?\])?/, node = arguments[1] || document, agent = search.match(tag), tag = agent[1] || "*", attribute = agent[3], type = agent[4]+"=", value = agent[5], returnElements = [], elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), length = elements.length; if((!!document.querySelectorAll) && type != "!="){ elements = document.querySelectorAll(search); for(var i=0,length = elements.length;i < length;i++){ returnElements.push(elements[i]); } return returnElements } while(--length >= 0){ var current = elements[length], _value = current.getAttribute(attribute); if(typeof _value === "string" && _value.length > 0){ if(!!value){ var condition = type === "=" ?//完全等于 _value === value : type === "!=" ?//不等于 _value != value : type === "*=" ?//包含 _value.indexOf(value) >= 0 : type === "~=" ?//匹配当中的某个单词，如<span class="red bold">警告</span> (" " + _value + " ").indexOf(value) >= 0: type === "^=" ?//以XX开头 _value.indexOf(value) === 0 : type === "$=" ?//以XX结尾 _value.slice(-_value.length) === value: type === "|=" ?//匹配属性值为XX或以XX-打头的元素 _value === value || _value.substring(0,value.length+1) === value+"-" : false; condition && returnElements.push(current); }else{ returnElements.push(current) } } } return returnElements; } Array.prototype.each = function(fn) { var scope = arguments[1] || window; for( var i=0, j=this.length; i < j; ++i ) { fn.call(scope, this[i], i, this); } }; window.onload = function(){ getElementsByAttribute("a[href]").each(function(el){ el.style.backgroundColor = "#69c" }) }</script><h1>[attr]</h1><h2>getElementsByAttribute by 司徒正美</h2><p><a name="anchor">This is an anchor.</a></p><p><a href="https://www.aspxhome.com/">This is a hyperlink.</a></p><p><a href="司徒正美">This is a hyperlink,too.</a></p>

<!doctype html><title>getElementsByAttribute by 司徒正美</title><meta charset="utf-8"/><meta name="keywords" content="getElementsByAttribute by 司徒正美" /><meta name="description" content="getElementsByAttribute by 司徒正美" /><script type="text/javascript" defer="defer"> function getElementsByAttribute(search){ var tag = /([\*a-zA-Z1-6]*)?(\[(\w+)\s*(\^|\$|\*|\||~|!)?=?\s*([\w\u00C0-\uFFFF\s\-_\.]+)?\])?/, node = arguments[1] || document, agent = search.match(tag), tag = agent[1] || "*", attribute = agent[3], type = agent[4]+"=", value = agent[5], returnElements = [], elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), length = elements.length; if((!!document.querySelectorAll) && type != "!="){ elements = document.querySelectorAll(search); for(var i=0,length = elements.length;i < length;i++){ returnElements.push(elements[i]); } return returnElements } while(--length >= 0){ var current = elements[length], _value = current.getAttribute(attribute); if(typeof _value === "string" && _value.length > 0){ if(!!value){ var condition = type === "=" ?//完全等于 _value === value : type === "!=" ?//不等于 _value != value : type === "*=" ?//包含 _value.indexOf(value) >= 0 : type === "~=" ?//匹配当中的某个单词，如<span class="red bold">警告</span> (" " + _value + " ").indexOf(value) >= 0: type === "^=" ?//以XX开头 _value.indexOf(value) === 0 : type === "$=" ?//以XX结尾 _value.slice(-_value.length) === value: type === "|=" ?//匹配属性值为XX或以XX-打头的元素 _value === value || _value.substring(0,value.length+1) === value+"-" : false; condition && returnElements.push(current); }else{ returnElements.push(current) } } } return returnElements; } Array.prototype.each = function(fn) { var scope = arguments[1] || window; for( var i=0, j=this.length; i < j; ++i ) { fn.call(scope, this[i], i, this); } }; window.onload = function(){ getElementsByAttribute("[class~=first]").each(function(el){ el.style.backgroundColor = "#E8FFE8"; }) }</script><h1>[attr~="value"]</h1><h2>getElementsByAttribute by 司徒正美</h2> <ul> <li class="first">First class.</li> <li class="second">Second class.</li> <li class="third">Third class.</li> <li class="first second">First and second class.</li> <li class="first third">First and third class.</li> <li class="second third">Second and third class.</li> <li class="first second third">First, second and third class.</li> </ul> <p class="first">First class only ;-)</p>

<!doctype html><title>getElementsByAttribute by 司徒正美</title><meta charset="utf-8"/><meta name="keywords" content="getElementsByAttribute by 司徒正美" /><meta name="description" content="getElementsByAttribute by 司徒正美" /><script type="text/javascript" defer="defer"> function getElementsByAttribute(search){ var tag = /([\*a-zA-Z1-6]*)?(\[(\w+)\s*(\^|\$|\*|\||~|!)?=?\s*([\w\u00C0-\uFFFF\s\-_\.]+)?\])?/, node = arguments[1] || document, agent = search.match(tag), tag = agent[1] || "*", attribute = agent[3], type = agent[4]+"=", value = agent[5], returnElements = [], elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), length = elements.length; if((!!document.querySelectorAll) && type != "!="){ elements = document.querySelectorAll(search); for(var i=0,length = elements.length;i < length;i++){ returnElements.push(elements[i]); } return returnElements } while(--length >= 0){ var current = elements[length], _value = current.getAttribute(attribute); if(typeof _value === "string" && _value.length > 0){ if(!!value){ var condition = type === "=" ?//完全等于 _value === value : type === "!=" ?//不等于 _value != value : type === "*=" ?//包含 _value.indexOf(value) >= 0 : type === "~=" ?//匹配当中的某个单词，如<span class="red bold">警告</span> (" " + _value + " ").indexOf(value) >= 0: type === "^=" ?//以XX开头 _value.indexOf(value) === 0 : type === "$=" ?//以XX结尾 _value.slice(-_value.length) === value: type === "|=" ?//匹配属性值为XX或以XX-打头的元素 _value === value || _value.substring(0,value.length+1) === value+"-" : false; condition && returnElements.push(current); }else{ returnElements.push(current) } } } return returnElements; } Array.prototype.each = function(fn) { var scope = arguments[1] || window; for( var i=0, j=this.length; i < j; ++i ) { fn.call(scope, this[i], i, this); } }; window.onload = function(){ getElementsByAttribute("[class|=first]").each(function(el){ el.style.backgroundColor = "#F1FAFA"; }) }</script><h1>[attr|="value"]</h1><h2>getElementsByAttribute by 司徒正美</h2><ul> <li class="first">First class.</li> <li class="second">Second class.</li> <li class="third">Third class.</li> <li class="first-second">First and second class.</li> <li class="first-third">First and third class.</li> <li class="second-third">Second and third class.</li> <li class="first-second-third">First, second and third class.</li> </ul> <p class="first">First class only ;-)</p>

<!doctype html><title>getElementsByAttribute by 司徒正美</title><meta charset="utf-8"/><meta name="keywords" content="getElementsByAttribute by 司徒正美" /><meta name="description" content="getElementsByAttribute by 司徒正美" /><script type="text/javascript" defer="defer"> function getElementsByAttribute(search){ var tag = /([\*a-zA-Z1-6]*)?(\[(\w+)\s*(\^|\$|\*|\||~|!)?=?\s*([\w\u00C0-\uFFFF\s\-_\.]+)?\])?/, node = arguments[1] || document, agent = search.match(tag), tag = agent[1] || "*", attribute = agent[3], type = agent[4]+"=", value = agent[5], returnElements = [], elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), length = elements.length; if((!!document.querySelectorAll) && type != "!="){ elements = document.querySelectorAll(search); for(var i=0,length = elements.length;i < length;i++){ returnElements.push(elements[i]); } return returnElements } while(--length >= 0){ var current = elements[length], _value = current.getAttribute(attribute); if(typeof _value === "string" && _value.length > 0){ if(!!value){ var condition = type === "=" ?//完全等于 _value === value : type === "!=" ?//不等于 _value != value : type === "*=" ?//包含 _value.indexOf(value) >= 0 : type === "~=" ?//匹配当中的某个单词，如<span class="red bold">警告</span> (" " + _value + " ").indexOf(value) >= 0: type === "^=" ?//以XX开头 _value.indexOf(value) === 0 : type === "$=" ?//以XX结尾 _value.slice(-_value.length) === value: type === "|=" ?//匹配属性值为XX或以XX-打头的元素 _value === value || _value.substring(0,value.length+1) === value+"-" : false; condition && returnElements.push(current); }else{ returnElements.push(current) } } } return returnElements; } Array.prototype.each = function(fn) { var scope = arguments[1] || window; for( var i=0, j=this.length; i < j; ++i ) { fn.call(scope, this[i], i, this); } }; window.onload = function(){ getElementsByAttribute("p[title^=good]").each(function(el){ el.style.backgroundColor = "#D7FFF0" }) }</script><h1>[attr^="value"]</h1><h2>getElementsByAttribute by 司徒正美</h2> <p title="hello">This is a normal paragraph.</p> <p title="bye">This is a normal paragraph.</p> <p title="goodbye">This starts out good...</p>

<!doctype html><title>getElementsByAttribute by 司徒正美</title><meta charset="utf-8"/><meta name="keywords" content="getElementsByAttribute by 司徒正美" /><meta name="description" content="getElementsByAttribute by 司徒正美" /><script type="text/javascript" defer="defer"> function getElementsByAttribute(search){ var tag = /([\*a-zA-Z1-6]*)?(\[(\w+)\s*(\^|\$|\*|\||~|!)?=?\s*([\w\u00C0-\uFFFF\s\-_\.]+)?\])?/, node = arguments[1] || document, agent = search.match(tag), tag = agent[1] || "*", attribute = agent[3], type = agent[4]+"=", value = agent[5], returnElements = [], elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), length = elements.length; if((!!document.querySelectorAll) && type != "!="){ elements = document.querySelectorAll(search); for(var i=0,length = elements.length;i < length;i++){ returnElements.push(elements[i]); } return returnElements } while(--length >= 0){ var current = elements[length], _value = current.getAttribute(attribute); if(typeof _value === "string" && _value.length > 0){ if(!!value){ var condition = type === "=" ?//完全等于 _value === value : type === "!=" ?//不等于 _value != value : type === "*=" ?//包含 _value.indexOf(value) >= 0 : type === "~=" ?//匹配当中的某个单词，如<span class="red bold">警告</span> (" " + _value + " ").indexOf(value) >= 0: type === "^=" ?//以XX开头 _value.indexOf(value) === 0 : type === "$=" ?//以XX结尾 _value.slice(-_value.length) === value: type === "|=" ?//匹配属性值为XX或以XX-打头的元素 _value === value || _value.substring(0,value.length+1) === value+"-" : false; condition && returnElements.push(current); }else{ returnElements.push(current) } } } return returnElements; } Array.prototype.each = function(fn) { var scope = arguments[1] || window; for( var i=0, j=this.length; i < j; ++i ) { fn.call(scope, this[i], i, this); } }; window.onload = function(){ getElementsByAttribute("p[title$=bye]").each(function(el){ el.style.cssText = "background:#B45B3E;color:#fff"; }) }</script><h1>[attr$="value"]</h1><h2>getElementsByAttribute by 司徒正美</h2> <p title="hello">This is a normal paragraph.</p> <p title="bye">This is a normal paragraph.</p> <p title="goodbye">This starts out good...</p>

<!doctype html><title>getElementsByAttribute by 司徒正美</title><meta charset="utf-8"/><meta name="keywords" content="getElementsByAttribute by 司徒正美" /><meta name="description" content="getElementsByAttribute by 司徒正美" /><script type="text/javascript" defer="defer"> function getElementsByAttribute(search){ var tag = /([\*a-zA-Z1-6]*)?(\[(\w+)\s*(\^|\$|\*|\||~|!)?=?\s*([\w\u00C0-\uFFFF\s\-_\.]+)?\])?/, node = arguments[1] || document, agent = search.match(tag), tag = agent[1] || "*", attribute = agent[3], type = agent[4]+"=", value = agent[5], returnElements = [], elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), length = elements.length; if((!!document.querySelectorAll) && type != "!="){ elements = document.querySelectorAll(search); for(var i=0,length = elements.length;i < length;i++){ returnElements.push(elements[i]); } return returnElements } while(--length >= 0){ var current = elements[length], _value = current.getAttribute(attribute); if(typeof _value === "string" && _value.length > 0){ if(!!value){ var condition = type === "=" ?//完全等于 _value === value : type === "!=" ?//不等于 _value != value : type === "*=" ?//包含 _value.indexOf(value) >= 0 : type === "~=" ?//匹配当中的某个单词，如<span class="red bold">警告</span> (" " + _value + " ").indexOf(value) >= 0: type === "^=" ?//以XX开头 _value.indexOf(value) === 0 : type === "$=" ?//以XX结尾 _value.slice(-_value.length) === value: type === "|=" ?//匹配属性值为XX或以XX-打头的元素 _value === value || _value.substring(0,value.length+1) === value+"-" : false; condition && returnElements.push(current); }else{ returnElements.push(current) } } } return returnElements; } Array.prototype.each = function(fn) { var scope = arguments[1] || window; for( var i=0, j=this.length; i < j; ++i ) { fn.call(scope, this[i], i, this); } }; window.onload = function(){ getElementsByAttribute("p[title*=by]").each(function(el){ el.style.backgroundColor = "#6cc" }) }</script><h1>[attr*="value"]</h1><h2>getElementsByAttribute by 司徒正美</h2> <p title="hello">This is a normal paragraph.</p> <p title="bye">This is a normal paragraph.</p> <p title="goodbye">This starts out good...</p>

<!doctype html><title>getElementsByAttribute by 司徒正美</title><meta charset="utf-8"/><meta name="keywords" content="getElementsByAttribute by 司徒正美" /><meta name="description" content="getElementsByAttribute by 司徒正美" /><script type="text/javascript" defer="defer"> function getElementsByAttribute(search){ var tag = /([\*a-zA-Z1-6]*)?(\[(\w+)\s*(\^|\$|\*|\||~|!)?=?\s*([\w\u00C0-\uFFFF\s\-_\.]+)?\])?/, node = arguments[1] || document, agent = search.match(tag), tag = agent[1] || "*", attribute = agent[3], type = agent[4]+"=", value = agent[5], returnElements = [], elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), length = elements.length; if((!!document.querySelectorAll) && type != "!="){ elements = document.querySelectorAll(search); for(var i=0,length = elements.length;i < length;i++){ returnElements.push(elements[i]); } return returnElements } while(--length >= 0){ var current = elements[length], _value = current.getAttribute(attribute); if(typeof _value === "string" && _value.length > 0){ if(!!value){ var condition = type === "=" ?//完全等于 _value === value : type === "!=" ?//不等于 _value != value : type === "*=" ?//包含 _value.indexOf(value) >= 0 : type === "~=" ?//匹配当中的某个单词，如<span class="red bold">警告</span> (" " + _value + " ").indexOf(value) >= 0: type === "^=" ?//以XX开头 _value.indexOf(value) === 0 : type === "$=" ?//以XX结尾 _value.slice(-_value.length) === value: type === "|=" ?//匹配属性值为XX或以XX-打头的元素 _value === value || _value.substring(0,value.length+1) === value+"-" : false; condition && returnElements.push(current); }else{ returnElements.push(current) } } } return returnElements; } Array.prototype.each = function(fn) { var scope = arguments[1] || window; for( var i=0, j=this.length; i < j; ++i ) { fn.call(scope, this[i], i, this); } }; window.onload = function(){ getElementsByAttribute("p[class!=red]").each(function(el){ el.style.backgroundColor = "#a9ea00"; }) }</script><h1>[attr!="value"] <span style="color:red">(非标准)</span></h1><h2>getElementsByAttribute by 司徒正美</h2> <p class="red">This is a normal paragraph.</p> <p class="green">This is a normal paragraph.</p> <p class="yellow">This starts out good...</p>

投稿

getElementsByAttribute

猜你喜欢