查找父纯javascript的子元素

IT技术 javascript dom
2021-02-28 00:11:14

最有效的方法是仅使用纯 javascript 查找特定父元素的(带有类或 ID)的子元素。没有 jQuery 或其他框架。

在这种情况下,我需要找到child1的child2,假设DOM树可以有多个child1的child2树类元素。我只想要元素

    <div class="parent">
        <div class="child1">
            <div class="child2">
            </div>
        </div>
    </div>
5个回答

如果您已经有了,var parent = document.querySelector('.parent');您可以这样做以将搜索范围限定为parent的孩子:

parent.querySelector('.child')
你也parent.querySelectorAll('.child')可以返回一个 NodeList
2021-05-14 00:11:14

children属性返回一个元素数组,如下所示:

parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]

有替代方案querySelector,例如,document.getElementsByClassName('parent')[0]如果您愿意的话。


编辑:现在我考虑了一下,您可以使用以下querySelectorAll方法获得parent具有以下类名的后代child1

children = document.querySelectorAll('.parent .child1');

qS 和 qSA 的区别在于,后者返回匹配选择器的所有元素,而前者只返回第一个这样的元素。

只需添加另一个想法,您就可以使用子选择器来获取直接子项

document.querySelectorAll(".parent > .child1");

应该返回所有具有 class .child1 的直系孩子

我一直看到每个人都建议使用 querySelector 而不是 getElementBy**。它更有效率吗?
2021-05-04 00:11:14
也许这会有所帮助。stackoverflow.com/questions/14377590/...
2021-05-07 00:11:14
.child2正如@Blyde 所问,这不会返回,以及其他孩子
2021-05-15 00:11:14

Element.querySelector()是最好的方法;

const parent = document.querySelector('.parent'); 
// Do anything next //When you want
parent.querySelector('.child1'); // <div class="child1">

您有一个父元素,您想获取特定属性 1 的所有子元素。获取父元素 2. 通过使用parent.nodeName.toLowerCase()将节点名转换为小写来获取父节点名,例如 DIV 将是 div 3。为了进一步的特定目的,获取一个属性父母,例如parent.getAttribute("id")这将为您id提供父节点 4。然后document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); 如果您想要输入父节点的子节点,请使用

let parent = document.querySelector("div.classnameofthediv")
let parent_node = parent.nodeName.toLowerCase()
let parent_clas_arr = parent.getAttribute("class").split(" ");
let parent_clas_str = '';
  parent_clas_arr.forEach(e=>{
     parent_clas_str +=e+'.';
  })
let parent_class_name = parent_clas_str.substr(0, parent_clas_str.length-1)  //remove the last dot
let allchild = document.querySelectorAll(parent_node+"."+parent_class_name+" input")