Question

JS查找网页元素遇到的问题

由于特殊需要，需要在网页上根据条件查找元素，比如说某某属性等于某某值之类的，于是就在JS中写了个函数
function Find(me,emt,val){ //me为当前元素，emt是某某属性，val是属性值
var arr=me.parentNode; //获得当前元素的父节点
for(var i=0;i<arr.length;i++){ //遍历父节点所有元素
if (arr[i]["emt"]==val){return arr[i];} //如果元素的emt某某属性等于val值则返回改元素
}
return null; //遍历完毕后没有结果就返回空
}
现在主要就是属性是变动的，有可能是name属性，有可能是class属性，可有可能是自定义的属性，不知道如何才能用emt这个变量表示某个属性，现在返回全是空null

Answer 1

arr 得到的结果是父级节点，并不是数组，不能用于循环。

需要循环的是父级节点的子元素 —— children

下面函数按你的稍作改动，只能匹配第一个元素，如果有两个或以上元素拥有相同属性和值，后面的都会被忽略。

function Find(ele, attr, val) {
    // 父级节点
    var parent = ele.parentNode;
    // 父级节点的子元素，也就是当前元素的同级元素
    var children = parent.children;
                                                                           
    // 循环子元素
    for(var i = 0; i < children.length; i++) {
        // 如果此元素属性等于某值(val)
        if(children[i].getAttribute(attr) === val) {
            // 返回此元素
            return children[i];
        }
    }
                                                                           
    // 如果循环没有找到元素，返回 null
    return null;
}

应用、测试

window.onload = function() {
    // 参考元素，也就是当前元素
    var ref = document.getElementById("baz");
                                                            
    // 查找属性 max-length 为 64 的元素
    var e1 = Find(ref, "max-length", "64");
    // 返回 input 元素
    console.log(e1);
                                                            
    // 查找属性 class 为 bar 的元素
    var e2 = Find(ref, "class", "bar");
    // 返回 p 元素
    console.log(e2);
                                                            
    // 查找属性 title 为 link title 的元素
    var e3 = Find(ref, "title", "link title");
    // 返回 a 元素
    console.log(e3);
};

<div id="foo">
    <p class="bar">bar</p>
    <span id="baz">baz</span>
    <a href="#" title="link title">link</a>
    <input name="username" max-length="64" value="" />
</div>

Answer 2

if (arr[i].getAttribute(emt)==val){
return arr[i];
}
这样就可以了

Answer 3

获得当前元素的父节点，那只是一个父节点，怎么下面就遍历所有？？