Question

我正在使用Drupal的Webform模块，它自动写入所有ID和类，因此我无法将ID添加到我想要添加的地方。而Drupal并没有为我准备一个。哎呀。

当我使用我的代码只有一个简单的getElementById（'myid'）时我没有问题，但我需要的元素是空白，没有id，没有类“a”在“图例”里面（有一个class，但没有id）在一个带有id的字段集中。

我尝试了这个代码和一些变体，但它没有用：

document.getElementById('webform-created-id-here').getElementsByTagName('legend').getElementsByTagName('a');

我觉得我不理解如何正确访问DOM的那一部分。有人可以提供帮助或建议吗？

谢谢！

Answer 1

getElementsByTagName返回包含找到的元素的nodelist，因此您必须选择元素的索引

第一个元素的示例

var test = document.getElementById('webform-created-id-here').getElementsByTagName('legend')[0].getElementsByTagName('a')[0];

DEMO VIEW

Answer 2

自己通过DOM递归。对任何元素的子元素的引用都存储在每个节点都存在的childNodes属性中。

function recurseDOM (el,test) {
    if (test(el)) {
        return el;
    }
    else {
        var children = el.childNodes;
        var result;
        for (var i=0; i<children.length; i+) {
            result = recurseDOM(children[i],test);
            if (result) {
                return result;
            }
        }
    }
    return null;
}

这只是我在2分钟内写出的一个可能的实现，它让我输入了这个答案。所以它可能会使用一些改进。但是你明白了。

像这样使用：

recurseDOM(document.body,function(el){
    if (el == something_something) { return 1}
    return 0
});

您可以编写类似的功能来测试父母：

function testParents (el, test) {
    var parent = el.parentNode;

    if (test(parent)) {
        return 1;
    }
    else {
        if (parent != document.body) {
            return testParents(parent,test);
        }
    }
    return 0;
}

所以你可以这样写：

recurseDOM(document.body,function(el){
    if (el.tagName == 'a' && testParents(el,function(p){
        if (p.tagName == 'legend' && testParents(p,function(pp){
            if (pp.id == 'webform-created-id-here') {
                return 1;
            }
            return 0;
        })) {
            return 1;
        }
        return 0;
    })) {
        return 1;
    }
    return 0;
});

或者，您可以从getElementById而不是document.body开始递归。

DOM帮助，父母的父母，孩子的孩子

2 个答案: