码迷,mamicode.com
首页 > Web开发 > 详细

JS系列:js节点

时间:2019-12-17 13:07:00      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:for循环   one   constant   blob   定时   mon   解析   请求   mic   

节点(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)

技术图片

需求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>
<li>js中的事件模型</li>
<li>JQ实战应用和源码解读</li>
<li>JS中的设计模式:单例,发布订阅,构造,原型,Promise...</li>
<!-- 第二阶段:项目实战和响应式开发 -->
<li>Hybrid混合式响应式布局开发</li>
<li>Ajax及跨域请求</li>
<li>前后端分离和http基础</li>
<!-- 第三阶段:全栈工程化开发 -->
<li>NODE基础:能够基于Express/koa等框架编写伪API</li>
<li>VUE及全家桶:vue-cli\vue\vue-router\vuex\axios...</li>
<li>React及全家桶:react\react-dom\react-router\redux\react-redux\dva\ant...</li>
<li>webpack</li>
<li>git</li>
<!-- 第四阶段:选学 -->
<li>微信小程序</li>
<li>Canvas高级开发</li>
<li>React Native</li>
</ul>
<script>
// var course = document.getElementById
function children(curEle) {
//1.先获取当前元素下所有的子节点
//2.存放新数组result
//3.遍历这些节点
//4.筛选出元素NODE-type===-1,把筛选出来的结果单独存储起来即可
var nodeList = curEle.childNodes,
result = [];
for (var i = 0; i < nodeList.length; i++) {
var item = nodeList[i];
if (item.nodeType === 1) {
result.push(item);
}
}
return result;
}
console.log(children(course));
 
</script>
</body>
 
</html>

效果如下:

技术图片

需求2:获取当前元素的上一个哥哥元素节点

previousSibling: 上一个哥哥节点
previousElementSibling : 上一个哥哥元素节点,但不兼容ie6-8

<!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>
<li>js中的事件模型</li>
<li>JQ实战应用和源码解读</li>
<li>JS中的设计模式:单例,发布订阅,构造,原型,Promise...</li>
<!-- 第二阶段:项目实战和响应式开发 -->
<li>Hybrid混合式响应式布局开发</li>
<li>Ajax及跨域请求</li>
<li>前后端分离和http基础</li>
<!-- 第三阶段:全栈工程化开发 -->
<li>NODE基础:能够基于Express/koa等框架编写伪API</li>
<li>VUE及全家桶:vue-cli\vue\vue-router\vuex\axios...</li>
<li>React及全家桶:react\react-dom\react-router\redux\react-redux\dva\ant...</li>
<li>webpack</li>
<li>git</li>
<!-- 第四阶段:选学 -->
<li id="itemN">微信小程序</li>
<li>Canvas高级开发</li>
<li>React Native</li>
</ul>
<script>
/* 标准注释:
需求2:获取当前元素的上一个哥哥元素节点
* Gets the last sibling element node of the current element 获取当前元素的上一个哥哥元素节点
* @parament参数
* curEle: [object] current element
* @return
* [object] last elder brother element
* by team on 2018/04/04 12:44
*/
function pre(curEle) {
//=>先找当前元素的哥哥的节点,看是否为元素节点,不是的话,基于哥哥找哥哥的哥哥就是上一个哥哥节点,一直找到元素节点或者已经没有哥哥了,说明我就是老大,则结束查找
// * for循环知道次数,while不知道循环次数,使用while循环
var pre = curEle.previousSibling;
while (pre && pre.nodeType !== 1){
/*
* pre && pre.nodeType !== 1 其中pre是验证还有没有,这样写代表有,没有pre是null
* pre.nodeType是验证是否为元素
*/
pre = pre.previousSibling;
}
return pre;
}
console.log(pre(itemN));
 
// 需求1:获取当前元素的所有子节点
/*
* 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.childNodes,
// result = [];
// for (var i = 0; i < nodeList.length; i++) {
// var item = nodeList[i];
// if (item.nodeType === 1) {
// result.push(item);
// }
// }
// return result;
// }
// console.log(children(course));
</script>
</body>
 
</html>

结构如下:

技术图片

扩展:next下一个弟弟元素节点,preAll获取所以哥哥元素节点,nextAll获取所以弟弟元素节点,siblings获取所有兄弟元素节点,index获取当前元素的索引…

 

JS系列:js节点

标签:for循环   one   constant   blob   定时   mon   解析   请求   mic   

原文地址:https://www.cnblogs.com/fron-tend/p/12053830.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!