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

Question

我正在使用Drupal的Webform模塊，該模塊自動寫入所有ID和類，因此無法將Id添加到要添加的位置。 Drupal不會幫我。 rr

當我僅將代碼與簡單的getElementById（'myid'）一起使用時，我沒有問題，但是我需要的元素是空白，無id，在“傳奇”（沒有類但沒有類）中的類“ a” id）位於具有ID的字段集中。

我嘗試了這段代碼和幾種變體，但是沒有用：

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

我覺得我不了解如何正確訪問DOM的那部分。 誰能提供幫助或建議？

謝謝！

Answer 1

getElementsByTagName返回具有找到的元素的節點列表，因此必須選擇該元素的索引

第一個元素的示例

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

演示視圖

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開始遞歸。