Question

我喜欢HTML：

<div id="hooray" class="section">
   <div>
      <div>
        <div id="click">click</div>
      </div>
   </div>
 </div>

当我点击div类click时，我想向上移动DOM，直到到达最近的section并抓住id。

使用JQuery，我会使用像$().closest('div.section')这样的东西，但是如何在每个parentNode没有硬编码的情况下使用纯Javascript来做到这一点？

var node = document.getElementById('click').parentNode.parentNode....etc

Answer 1

你可以走向父链，寻找具有适当类的祖先。此版本的代码允许在感兴趣的对象上有其他类名，因此代码可以更灵活地使用：

function hasClass(elem, cls) {
    var str = " " + elem.className + " ";
    var testCls = " " + cls + " ";
    return(str.indexOf(testCls) != -1) ;
}

function closest(el, cls) {
    while (el  && el !== document) {
        if (hasClass(el, cls)) return el;
        el = el.parentNode;
    }
    return null;
}

因此，您可以通过点击处理程序执行以下操作：

var id;
var target = closest(this, "section");
if (target) {
    id = target.id;
    // do whatever you want with the id
}

工作演示：http://jsfiddle.net/jfriend00/6V7HG/

仅供参考，此代码的一个版本可以采用任意任意选择器，因为您基本上必须创建一个CSS选择器解析器，然后评估给定对象是否匹配该选择器中的所有需求，因此要复杂得多。对于这个特定的操作来说，这可能比你想做的更多。

通常，你没有查找id的链，因为你可以直接获取带有该id的元素，所以我提供了一个与类名一起使用的版本。其他版本（如与属性匹配的版本）也可以编写。

此版本比您的特定问题（返回目标元素而非目标ID）更通用，允许您在更多情况下使用它。如果你真的只想要一个返回目标id的函数，可以这样做：

function closest(el, cls) {
    while (el  && el !== document) {
        if (hasClass(el, cls)) return el.id;
        el = el.parentNode;
    }
    return null;
}

Answer 2

有很多方法可以做到这一点，你可以试试这个：

document.getElementById('click').onclick = function(e) {
    e = e || window.event;
    var el = e.target || e.srcElement;
    if (el = el.parentNode) do { //its an inverse loop
        var cls = el.className;
        if (cls) {
            cls = cls.split(" ");
            if (-1 !== cls.indexOf("section")) {
                console.log("here it is: ");
                console.log(el);
                break;
            }
        }
    } while (el = el.parentNode); //its assignment
    if (!el) {
        console.log('not found !');
    }
    console.log('end..');
};

Answer 3

您可以只使用Element.closest()：

let closestElement = document.getElementById('click').closest('.section');

以下是在操作中展示它的摘要：

console.log(document.getElementById('click').closest('.section').id);

<div id="hooray" class="section">
   <div>
      <div>
        <div id="click">click</div>
      </div>
   </div>
 </div>

Javascript遍历DOM直到达到课程

3 个答案: