循环遍历 DOM 元素，包括 span 元素答案

【问题标题】：Looping through DOM elements including span elements循环遍历 DOM 元素，包括 span 元素
【发布时间】：2016-06-23 09:04:23
【问题描述】：

我正在尝试使某个功能正常工作，但没有任何运气，所以我想向 Stackoverflow 智囊团问一个新手问题！

基本上，我有一个表单，我正在遍历所有元素以查看是否存在自定义数据属性。如果存在，则保持元素可见，如果不存在，则隐藏元素。

当我使用下面的函数时，它会遍历表单上的所有输入字段，但它会忽略任何 span 或 div 元素，即使它们具有值为 'FocusGroup' 的 'data-group' 属性

function DropDownSelection_Focus(FocusGroup)
{
var elements = frm_FormName.elements;
var el;
for (var i=0, iLen=elements.length; i<iLen; i++) 
    {
    el = elements[i];
    var GetGroup = document.getElementById(el.name).getAttribute('data-group');
    if (GetGroup != null && GetGroup !='')
        {
        if (GetGroup == FocusGroup.value)
            {
             document.getElementById(el.name).style.visibility = 'visible';
            }
        else
            {
            document.getElementById(el.name).style.visibility = 'hidden';
            }
        }
    }
}

span/div 元素同时具有 id 和 name 值，因此是否有理由将它们从循环中排除？

【问题讨论】：

你知道jquery吗？
不，还没有，但是一旦我了解了 JS 的基础知识，它就在我的“待办事项”清单上
这可能对你有帮助：developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll
document.querySelectorAll('#form :not([data-group])') 应该选择表单中没有数据组属性的所有元素（id 为form）。
这里有一个给你的小提琴，它在特殊条件下隐藏了一个 div jsfiddle.net/cqtkocga

标签： javascript html dom

【解决方案1】：

FORM 对象的 element 属性返回一个表单中所有元素的集合。元素意味着输入、文本区域、按钮或选择。支持“用户操作”的东西 - 可以被按下、选择等。如果你想获取所有具有 data-group 属性的元素，你可以使用这样的东西：

var elementsWithGroupAttr = frm_FormName.querySelectorAll("*[data-group]");

frm_FormName 是表单（来自您的代码 sn-p 的变量）。

【讨论】：

好的，那是有道理的......我会更好地使用 querySelectorAll()，因为这似乎出现在我的一些搜索中

【解决方案2】：

感谢大家帮助解决这个问题。我能够让我的循环使用以下内容（为了其他人以后搜索的利益）：

var elements = frm_FormName.querySelectorAll("*[data-group]");
var el;
for (var i=0, iLen=elements.length; i<iLen; i++) 
{
el = elements[i]
var GetGroup = el.getAttribute('data-group');
    if (GetGroup == FocusGroup.value)
    {
    el.style.visibility = 'visible';
    }
    else
    {
    el.style.visibility = 'hidden';
    }
}

虽然 Georgi 是唯一被接受的“答案”，但来自 Werner、yariash 和 lordkain 的帮助也得到了承认。

谢谢大家！

【讨论】：