遍历 HTML 结构搜索属性

Question

我有一个 traverse 对象包含两个方法 up() 和 down()，这些方法的目标是通过 html 向上或向下循环寻找特定 dataset-attribute 的第一次出现，如果找到 return 该元素。

"specific" dataset-attribute 作为参数传递到方法中，例如我们有 data-up 和 data-down。

var o1 = traverse.up(e.target,'up');
var o2 = traverse.down(e.target,'down');

现在，向上遍历方法 traverse.up(e.target,'up') 工作正常，因为 parentNode 与单击的元素 (e.target) 是一对一的关系，但是我的问题是尝试向下遍历时，因为单击的元素 (e.target) 可能有多个子元素，我需要遍历每个子元素及其子元素等...搜索 dataset-down 属性。

问题： 为什么我的 traverse.down(e.target,'down') 方法 return 不是第一个出现 HTML 元素的 dataset-down 属性?

这里是 JSFiddle 演示

//HTML

<body>
    <div id='black'>
        <div id='red' data-up='upwards'>
            <div id='blue'>
                <div id='green'>
                    <div id='yellow'></div>
                    <div id='royalblue' data-down='downwards'></div>
                    <div id='fuscia'></div>
                </div>
            </div>
        </div>  
    </div>
</body>

//JS

function init(){
    document.getElementById('black').addEventListener('click', handles);
}
function handles(e){
//  var o1 = traverse.up(e.target,'up');
    var o2 = traverse.down(e.target,'down');
    console.log(o2);
}
traverse={
    up:function(o,a){
        while(o.dataset[a] === undefined){
            if(o.parentNode.tagName === 'HTML') break;
            o = o.parentNode;
        }
        return o;
    },
    down:function(o,a){
        if(o.dataset[a] === undefined){
            if(o.children.length > 0){
                o.children.forEach((o)=>{
                    traverse.down(o,a);
                })
            }
            else console.log("DOES NOT HAVE CHILD");
        }
        else{
            //console.log(o) **this does return the correct element with the data-down attribute however the return statement below isn't returning it back to the original caller.
            return o;
        }
    }
};
NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach;
document.onreadystatechange=()=>(document.readyState === 'interactive') ? init() : null;

Answer 1

像这样：

if(o.children.length > 0){
    o.children.forEach((o)=>{
        var t = traverse.down(o,a);
        if (t) return t; // return the first element that matches. There might be more but we're ignoring them
    });
    // none were found
    return false;
}

遍历 HTML 结构搜索属性

Traversing an HTML structure searching for attribute

javascript

traversal

tree-traversal