//属性选择符
//author:司徒正美 ref:http://www.cnblogs.com/rubylouvre/archive/2009/10/26/1590102.html
//正则支持 tag[attrName ^\$\*\~\!=attrValue]
var getElementsByAttribute = function(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] || "*", //html标签
attribute = agent[3], //属性名
type = agent[4] + "=", //比较符号 ^ $ * | ~ !
value = agent[5],//属性值
ieAttrFix = {"class": "className","for": "htmlFor"}, //特殊属性名
returnElements = [],
//IE5.5不支持“*”
elements = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag),
length = elements.length;
if ((!!document.querySelectorAll) && type != "!=") {//ie8+ 标准browser
elements = document.querySelectorAll(search);
for (var i = 0,length = elements.length; i < length; i++) {
returnElements.push(elements[i]);
}
return returnElements
}
if (!+"\v1") //ie检测
attribute = ieAttrFix[attribute] ? ieAttrFix[attribute] : attribute;
while (length--) {
var current = elements[length],
_value = !+"\v1" ? current[attribute] : 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;
}
分享到:
相关推荐
`getElementsByClassName`, `getElementsByTagName`, `getElementsByAttribute`等方法在IE和Firefox中实现不同。IE不支持`getElementsByClassName`,但Firefox支持。对于IE,可以使用`querySelectorAll`或自定义...
- **查找元素**:使用`getElementsByTagName()`, `getElementById()`, 或`getElementsByAttribute()`等方法。 - **修改元素**:`setTextContent()`, `setAttribute()`, `removeChild()`等方法。 - **删除元素**:...
4. **使用属性获取元素**:`getElementsByAttribute(String key)` 对于获取到的元素,还可以使用以下方法进一步获取或设置元素的数据: - `attr(String key)`:获取元素的属性值。 - `attr(String key, String ...
- **`getElementsByAttribute()`**:根据属性查找节点。 #### XMLDOM节点信息 - **节点名称和值**:`nodeName`和`nodeValue`。 - **节点类型**:如`ELEMENT_NODE`、`TEXT_NODE`等。 #### XMLDOM节点列表 - **`...
为了实现更复杂的选择,如基于属性、值或样式选取元素,可以扩展类似的函数,例如 `getElementsByAttribute`。示例中给出了一个简单的 `getElementsByAttribute` 示例,它可以根据指定的属性名称和值来选取元素。 ...
例如,使用Java的DOM解析器(如javax.xml.parsers.DocumentBuilderFactory)可以创建一个Document对象,然后通过方法如`getElementsByTagName`或`getElementsByAttribute`查找特定元素。 SAX(Simple API for XML)...
`getElementsByClassName()`方法根据类名获取元素,`getElementsByAttribute()`(非标准,但某些浏览器支持)根据属性值获取元素。 7. **通过关系获取**: `parentNode`属性可以获取当前元素的父节点,`...
5. **`getElementsByAttribute()`**: 在一些旧的浏览器实现中,如IE,存在这个非标准的方法,根据属性名称和值来获取元素。但在现代浏览器中,推荐使用`querySelectorAll()`结合属性选择器。 6. **`document....
Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍。 attributes:获取一个属性作为对象getAttribute:获取某一个属性的值 object.getAttributes(attribute) getAttribute方法不属于document...