原⽣JS获取指定元素下指定⼦元素(兼容所有浏览器)
好⼏天没有写博客了,今天分享下JS如何获取指定元素下指定的⼦元素。
原理:
由于JS内置获取⼦元素节点⽅法(children)不兼容低版本浏览器(ie 6-8),通过获取所有⼦节点(childNodes)⽅法获取所有⼦节点,循环判断取出元素⼦节点,存储在数组⾥,循环数组判断取出数组元素和传递元素相同的元素节点,具体见下⾯代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取指定元素下指定⼦元素children兼容写法</title>
<style type="text/css">
#create{width: 500px;height: 500px;margin:50px auto;border:1px solid red;}
p{background: blue;border-bottom: 1px solid #fff;width: 100%;height: 20px;}
</style>
</head>
<body>
<div id="create">
<p></p>
<p></p>
<div></div>
<div>
<p></p>
<p></p>
</div>
<p></p>
</div>
<script>
var creat = ElementById("create");
function children(curEle,tagName){
var nodeList = curEle.childNodes;
var ary = [];
if(/MSIE(6|7|8)/.test(navigator.userAgent)){
for(var i=0;i<nodeList.length;i++){
var curNode = nodeList[i];
deType ===1){
ary[ary.length] = curNode;
}
}
}else{
ary = Array.prototype.slice.call(curEle.children);
}
// 获取指定⼦元素
if(typeof tagName === "string"){
for(var k=0;k<ary.length;k++){
curTag = ary[k];
LowerCase() !== LowerCase()){
原生js和js的区别
ary.splice(k,1);
k--;
}
}
}
return ary;
}
console.log(children(create,"div"));
</script>
</body>
</html>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。