Finding child element of parent pure javascript

2020/11/13 23:42 · javascript ·  · 0评论

What would the most efficient method be to find a child element of (with class or ID) of a particular parent element using pure javascript only. No jQuery or other frameworks.

In this case, I would need to find child1 or child2 of parent, assuming that the DOM tree could have multiple child1 or child2 class elements in the tree. I only want the elements of parent

    <div class="parent">
        <div class="child1">
            <div class="child2">
            </div>
        </div>
    </div>

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

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

有其他替代方法querySelector,如document.getElementsByClassName('parent')[0]您愿意。


编辑:现在我考虑了一下,您可以使用拥有类名称的querySelectorAll后裔parentchild1

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

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

如果已经拥有var parent = document.querySelector('.parent');,则可以执行以下操作以将搜索范围限定为parent的子项:

parent.querySelector('.child')

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

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

应该返回所有具有.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")
本文地址:http://javascript.askforanswer.com/finding-child-element-of-parent-pure-javascript.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!