`
caniggia1986
  • 浏览: 151706 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

getElementsByAttribute

 
阅读更多
//属性选择符
//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;
}
分享到:
评论

相关推荐

    javascript在IE和Firefox中兼容性问题

    `getElementsByClassName`, `getElementsByTagName`, `getElementsByAttribute`等方法在IE和Firefox中实现不同。IE不支持`getElementsByClassName`,但Firefox支持。对于IE,可以使用`querySelectorAll`或自定义...

    jdom-1.0包,可用

    - **查找元素**:使用`getElementsByTagName()`, `getElementById()`, 或`getElementsByAttribute()`等方法。 - **修改元素**:`setTextContent()`, `setAttribute()`, `removeChild()`等方法。 - **删除元素**:...

    网络爬虫原理与实战

    4. **使用属性获取元素**:`getElementsByAttribute(String key)` 对于获取到的元素,还可以使用以下方法进一步获取或设置元素的数据: - `attr(String key)`:获取元素的属性值。 - `attr(String key, String ...

    web的xml技术

    - **`getElementsByAttribute()`**:根据属性查找节点。 #### XMLDOM节点信息 - **节点名称和值**:`nodeName`和`nodeValue`。 - **节点类型**:如`ELEMENT_NODE`、`TEXT_NODE`等。 #### XMLDOM节点列表 - **`...

    javascript getElementsByClassName函数

    为了实现更复杂的选择,如基于属性、值或样式选取元素,可以扩展类似的函数,例如 `getElementsByAttribute`。示例中给出了一个简单的 `getElementsByAttribute` 示例,它可以根据指定的属性名称和值来选取元素。 ...

    CSCU9T4-XML-Practical1:适用于CSCU9T4的XML Practical 1

    例如,使用Java的DOM解析器(如javax.xml.parsers.DocumentBuilderFactory)可以创建一个Document对象,然后通过方法如`getElementsByTagName`或`getElementsByAttribute`查找特定元素。 SAX(Simple API for XML)...

    document节点对象的获取方式示例介绍

    `getElementsByClassName()`方法根据类名获取元素,`getElementsByAttribute()`(非标准,但某些浏览器支持)根据属性值获取元素。 7. **通过关系获取**: `parentNode`属性可以获取当前元素的父节点,`...

    JS简单获得节点元素的方法示例

    5. **`getElementsByAttribute()`**: 在一些旧的浏览器实现中,如IE,存在这个非标准的方法,根据属性名称和值来获取元素。但在现代浏览器中,推荐使用`querySelectorAll()`结合属性选择器。 6. **`document....

    详解JS中的attribute属性

    Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍。 attributes:获取一个属性作为对象getAttribute:获取某一个属性的值 object.getAttributes(attribute) getAttribute方法不属于document...

Global site tag (gtag.js) - Google Analytics