节点(node)
在html文档中出现的所有东西都是节点
- 元素节点(HTML标签)
- 文本节点(文字内容)
- 注释节点(注释内容)
- 文档节点(document)
- …
每一种类型的节点都会有一些属性区分自己的特征与特性
- nodeType: 节点类型
- nodeName:节点名称
- nodeValue:节点值
元素节点
nodeType:1
nodeName:“DIV” //大写的标签名
nodeValue:null //节点值
文本节点
nodeType:3
nodeName:‘text’
nodeValue:文本内容
注释节点
nodeType:8
nodeName:‘#comment’
nodeValue:注释内容
文档节点
nodeType:9
nodeName:‘#document’
nodeValue:null
###描述节点关系之间的属性
parentNode
获取当前节点唯一的父亲节点
childNodes
获取当前元素的所有子节点
- 子节点:只获取儿子级别的
- 所有:含元素节点,文本节点
children
获取当前元素所有的元素子节点
- 在ie6-8把元素节点也当做元素节点获取到,所有兼容性不好
previousSibling
获取当前节点的上一个哥哥节点(可能是元素或者文本等)
previousElementSibling
获取当前节点的上一个哥哥元素节点(不兼容ie6-8)
nextSibling
获取当前节点的下一个弟弟节点(可能是元素或者文本等)
nextElementSibling
获取当前节点的下一个弟弟元素节点(不兼容ie6-8)
firstChild
获取当前元素第一个子节点(可能是元素或者文本等)
firstElementChild
获取当前元素第一个元素子节点(不兼容ie6-8)
lastChild
获取当前元素最后一个子节点(可能是元素或者文本等)
lastElementChild
获取当前元素最后一个元素子节点(不兼容ie6-8)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dv61APA2-1576556586036)(./1576551204505.png)]
需求1:获取当前元素的所有子节点
基于children不兼容ie低版本的浏览器(会把注释节点当做元素节点)
//=> 标准注释
/*
* children:获取当前元素的所有子节点 Gets all child nodes of the current element
* @parameter 参数
* curEle:current element
* @return
* [array] all the element nodes
*
* by team on 2018/04/07 12:36
* update lifei
*/
function children(curEle){
//1.先获取当前元素下所有的子节点
//2.存放新数组result
//3.遍历这些节点
//4.筛选出元素NODE-type===-1,把筛选出来的结果单独存储起来即可
var nodeList = curEle.childrenNodes,
result = [];
for(var i = 0; i < nodeList.length; i++){
var item = nodeList[i];
if(item.nodeType === -1){
result.push(item);
}
}
return result;
}
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 前端小白到前端全栈:勿忘初心,方得始终 -->
<ul id="course">
<!-- 第一阶段:原生js -->
<li>闭包,作用域,THIS,OOP</li>
<li>DOM渲染机制和性能优化</li>
<li>正则表达式解析处理</li>
<li>定时器和js异步编程</li