<!
DOCTYPE html
>
DOCTYPE html
>
<html
lang=
“en”
>
lang=
“en”
>
<head>
<meta
charset=
“UTF-8”
>
charset=
“UTF-8”
>
<meta
name=
“viewport”
content=
“width=device-width, initial-scale=1.0”
>
name=
“viewport”
content=
“width=device-width, initial-scale=1.0”
>
<meta
http-equiv=
“X-UA-Compatible”
content=
“ie=edge”
>
http-equiv=
“X-UA-Compatible”
content=
“ie=edge”
>
<title>Document
</title>
</title>
</head>
<body>
<ul>
<li>1
</li>
</li>
<li>2
</li>
</li>
<li>3
</li>
</li>
<li>4
</li>
</li>
<li>5
</li>
</li>
</ul>
<script>
var
ul
=
document.
getElementsByTagName(
‘ul’)[
0];
ul
=
document.
getElementsByTagName(
‘ul’)[
0];
console.
log(
ul.
childNodes)
log(
ul.
childNodes)
function
getElements(
node){
getElements(
node){
// 1 获取childNodes
var
nodes
=
node.
childNodes;
nodes
=
node.
childNodes;
var
n
= [];
n
= [];
for(
var
i
=
0;
i
<
nodes.
length;
i
++){
var
i
=
0;
i
<
nodes.
length;
i
++){
if(
nodes[
i].
nodeType
===
1){
nodes[
i].
nodeType
===
1){
n.
push(
nodes[
i])
push(
nodes[
i])
}
}
return
n;
n;
}
console.
log(
getElements(
ul));
log(
getElements(
ul));
/* for(var i = 0;i<ul.childNodes.length;i++){
alert(ul.childNodes[i].nodeName)
} */
// alert(ul.childNodes.length)
// console.log(ul.children)
// alert(ul.children.length)
// alert(ul.getElementsByTagName(‘*’).length)
<
/script>
/script>
</body>
</html>
<!–
childNodes获取到的是DOM对象下所有的节点（包含文本节点，元素节点，注释节点）
IE8和主流浏览器获取到的内容不同，不包含文本节点，只包含 元素节点，注释节点
childNodes中文本节点输出的是换行符，根本原因是HTML结构中的换号导致的
children获取到元素中element对象集合，但是在IE8中会获取注释节点（解决办法，不在对应的结构中写注释）
兼容childNodes
function getElements(node){
// 1 获取childNodes
var nodes = node.childNodes;
var n = [];
for(var i = 0;i<nodes.length;i++){
if(nodes[i].nodeType === 1){
n.push(nodes[i])
}
}
return n;
}
function getEven(arr){
var n = [];
for(var i = 0;i<arr.length;i++){
if(!(arr[i] % 2)){
n.push(arr[i]);
}
}
return n;
}
获取第一个元素节点
主流浏览器
firstElementChild 获取到childNodes中的第一个元素节点
IE8及以下没有该属性（也不需要有）
firstChild获取的是childNodes中的第一个节点
lastElementChild
lastChild 同上，是最后一个
获取兄弟节点
nextSibling
nextElementSibling
previousSibling
previousElementSibling
IE8不存在所有的关于element的查询操作
–>
今天的文章childNodes操作分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/9855.html
