[TOC] # 页面添加节点步骤 我们想要页面添加一个新的元素: 1.创建元素2.添加元素 # 5.1为什么学节点操作  ~~~ 获取元素通常使用两种方式: 1.利用DOM提供的方法获取元素 document.getElementByld() document.getElementsByTagName() document.querySelector等 逻辑性不强、繁琐 2.利用节点层级关系获取元素 利用父子兄节点关系获取元素 逻辑性强,但是兼容性稍差 这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单 ~~~ # 5.2节点概述 （主要获取标签元素节点）  # 5.2节点（使用）概述  ~~~ 一般地，节点至少拥有nodeType(节点类型) 、nodeName(节点名称）和nodeValue(节点值)这三个基本属性。 1.元素节点nodeType为1 2.属性节点nodeType 为2 3.文本节点nodeType为3(文本节点包含文字、空格、换行等) 我们在实际开发中，节点操作主要操作的是元素节点 ~~~ # 5.3节点层级 （使用） 利用DOM树可以把节点划分为不同的层级关系,常见的是**父子兄层级**关系。  # 1.父级节点（父子节点） （**主要 重点**） ~~~ 根据这个元素获取他父元素属性 node.parentNode ~~~ 注意   ## 2.子节点（1）（所有节点都获取 太麻烦 很少使用） ~~~ 1. parentNode.childNodes(标准) ~~~ parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。  ~~~ var ul = document. queryselector ( 'ul'); for(var i = o; i < ul.childNodes . length; i++) { if (ul.childNodes[i].nodeType -- 1){ // ul.childNodes[i]是元素节点 console.log(ul.childNodes[i]); } } ~~~ ## 2.子节点（2 获取子节点**常用**）（只获取元素节点） ~~~ 2. parentNode.children(非标准) 在开发常用 ~~~  ### 子节点使用 1、先获取父节点 2、父节点名.children（获取 子节点）   ## 获取第一个子节点和最后一个节点 （不常用） 获取所有节点（包括不用的 换行，空格等**所以不常用**） 3\. parentNode.firstChild 第一个节点 firstChild返回第一个子节点，找不到则返回null。同样，也是**包含所有的节点。** 4\. parentNode . lastChild 最后一个节点 ## 获取第一个子节点和最后一个节点 注意:这两个方法有兼容性问题，IE9以上才支持。 ~~~ 第一个子元素节点 5. parentNode .firstElementChild firstElementchild 返回第一个子元素节点，找不到则返回null。 6. parentNode . lastElementChild lastElementchild返回最后一个子元素节点，找不到则返回null。 ~~~ ## 获取第一个子节点和最后一个节点 （开发版 使用） ~~~ //querySelector( 'ol '）获取ol元素 querySelector( '.call '）获取类元素 var ol = document.querySelector( 'ol '） //获取标签元素 // 3.实际开发的写法 既没有兼容性问题又返回第一个子元素 console.log(ol.children[0]);//获取第一个子节点 console.log(ol.children[ol.children.length -1]);//获取最后一个节点 ~~~ ## 2.兄弟节点 ### 下一个兄弟节点 ~~~ 1. node.nextsibling ~~~ nextsibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。 ### 下一个兄弟节点 ~~~ 2. node.previoussibling ~~~ previoussibling返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。 ## 兄弟元素节点  ### 下一个兄弟元素节点 ~~~ 3. node.nextElementsibling nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null ~~~ ### 上一个兄弟元素节点 ~~~ 4. node.previousElementsibling previousElementsibling返回当前元素上一个兄弟元素节点，找不到则返回null。 注意∶这两个方法有兼容性问题，IE9以上才支持。 ~~~  ### 解决兄弟元素节点兼容性  # 5.4创建节点 ~~~ document.createElement ( "tagName " ) ~~~  ## 添加节点 (在后面添加节点) ~~~ 1. node.appendchild(child) ~~~  ### 后面添加节点使用方法  ## 添加节点 (在（指定的元素）前面添加节点) ~~~ 2. node.insertBefore (child，指定元素) ~~~  ### 前面添加节点使用方法  # （父子节点）案例:下拉菜单 （节点）  一开始是显示布局的开发 （下面是用定位做的 做完隐藏 display: none ;）  布局完后，所有样式隐藏起来 （display: none ;）  ## 案例分析 ①导航栏里面的i都要有鼠标经过效果,所以需要循环注册鼠标事件 ②核心原理:当鼠标经过Ii里面的第二个孩子ul显示，当鼠标离开,则u|隐藏 ## 代码实验 1、获取元素 2、循环注册事件 ~~~ <script> // 1.获取元素 var nav = document.querySelector(' .nav' );//（获取它的类元素） var lis =nav.children; //得到4个小li （获取它的子节点） // 2.循环注册事件 for (var i = 0; i < lis.length; i++) { lis [i] . onmouseover = function() { this. children[1].style.display = ' block'; } lis[i]. onmouseout = function() { this. children[1].style.display = 'none' ; } } </script> ~~~ # （创建节点）案例:简单版发布留言案例  ## 案例分析 ①核心思路:点击按钮之后,就动态创建一个i ,添加到ul里面。 ②创建i的同时,把文本域里面的值通过li.innerHTML赋值给li ③如果想要新的留言后面显示就用appendChild如果想要前面显示就用insertBefore ## 代码实验 ### html  ### js ~~~ <script> //1.获取元素 var text = document.querySelector( ' textarea'); //获取文本域 var btn = document.querySelector( ' button' ); // 获取发布按钮 var ul = document.querySelector('ul' ); // 获取 （内容发布后展示位置） //2.注册事件 btn. onclick = function() { if (text.value == ' ' ) { alert('你没有发布内容) return false } else { // console.log(text.value); //(1)创建元素 var li = document.createElement(' li' ) //先有li 才能赋值 li. innerHTML = text.value; //文本的内容 赋予给左边的 li.内容 //(2)添加元素 //ul.appendChild(li) //在后面 插入 ul.insertBefore(li, ul.children[0]) //在前面 插入 } </script> ~~~