JS系列：js节点

Posted 2021-03-22 公子清

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS系列：js节点相关的知识，希望对你有一定的参考价值。

节点（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）

Alt text

需求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">

        <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>

以上是关于JS系列：js节点的主要内容，如果未能解决你的问题，请参考以下文章

JS系列：js节点

js怎样添加、移除、移动、复制、创建和查找节点？

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

JavaScript 系列博客