1. 兄弟节点：nextSibling nextSibling 获取的是下一个兄弟节点 包含元素节点或者 文本节点等等
<div>我是div</div>
<script>
var div = document.querySelector('div');
//1. nextSibling获得的是下一个兄弟节点，它里面包含文本节点和元素节点
div.nextSibling
console.log(div.nextSibling );
// 他这里获取到的是下一个兄弟节点，但是里面包含的是文本节点和元素节点，因为原来的书写方式里面包含了换行和空格，所以他的第一个元素节点是text文本节点2. previousSibling 获得的是上一个兄弟节点，它里面包含文本节点和元素节点
<div>我是div</div>
//2. previousSibling 获得的是上一个兄弟节点，它里面包含文本节点和元素节点
div.previousSibling
console.log(div.previousSibling );
// 他这里获取到的是上一个兄弟节点，但是里面包含的是文本节点和元素节点，因为原来的书写方式里面包含了换行和空格，所以他的第一个元素节点是text文本节点3.nextElementSibling 获得的是下一个兄弟元素节点 但是当他找不到下一个元素节点的时候 ，它打印输出的值就是null 但是这个存在兼容性的问题
div.nextElementSibling
console.log(div.nextElementSibling);
// 它获得的是下一个兄弟元素节点 所以他打印输出的是span4.previousElementSibling 获得的是上一个兄弟元素节点 但是当他找不到上一个元素节点的时候 ，它打印输出的值就是null 但是这个存在兼容性的问题
div.previousElementSibling
console.log(div.previousElementSibling)
// 它获得的是上一个兄弟元素节点 因为它上面没有元素节点，所以它打印输出的是null5.如何解决兼容性问题：需要自己封装一个兼容性的函数
function getNextElementSiBling(element) {
//把元素给我们的el
var el =element;
//那我们的el就执行el = el.nextSibling 获取他下面的兄弟节点
while( el = el.nextSibling) {
// 如果获取的兄弟节点，他们的节点类型是元素节点，我们就将元素节点进行返回
if(el.nodeType ===1){
return el;
}
}
// 如果获取到的兄弟节点当中没有一个是元素节点，那么返回的值就是null
return null;
}留言板添加留言案例：
例分析：1）核心思路：点击发布按钮之后，就动态创建一个li , 添加到ul里面。
2）创建li的同时，把文本域里面的值通过li.innerHTML赋值给li
3）如果想要新的留言在后面显示就用appendChild 如果想要在前面显示就用insertBefore
追加以下的效果
2.当留言板里面的信息出现问题时，管理员可以删除留言案例
案例分析：1.当我们把文本域里面的值赋给li的时候，多添加一个删除的链接
2.我们需要把所有的链接获取过来，当我们点击链接的时候，删除当前链接所在的li
3.组织链接跳转，我们可以将链接里面的跳转地址更改为javascript:;
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
display: block;
width: 500px;
height: 100px;
margin: 0 auto;
border: 1px solid #ccc;
outline: none;
resize: none;
}
button{
display: block;
width: 100px;
height: 50px;
margin: 10px auto;
border: none;
outline: none;
border-radius: 20px;
background-color: #ccc;
}
ul {
width: 600px;
margin-top: 50px;
margin: 0 auto;
}
li {
list-style: none;
/* width: 600px; */
padding: 5px;
background-color: #ccc;
color: black;
font-size: 16px;
line-height: 25px;
margin: 15px 0;
}
li>a {
width:100px;
height: 25px;
border-radius: 20px;
background-color: white;
float: right;
text-decoration: none;
color: black;
text-align: center;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul> </ul><script>
// 1)获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2）注册事件
btn.onclick = function() {
// var text = document.querySelector('textarea').value;
// 将这个写在点击事件里面的时候，我们在点击按钮之后，下面的打印输出结果就可以打印获得用户输入的值
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var datearr = [year, month, day, hour, minutes, seconds];
for (var i = 0; i < datearr.length; i++) {
datearr[i] = datearr[i] > 9 ? datearr[i] : "0" + datearr[i];
}
if (text.value == '') {
alert('你没有输入内容')
return false;
} else {
// console.log(text)
// console.log(text.value);
// 判断获取是否获得text.value的数值
// 1)创建元素
var li = document.createElement('li');
// 先要有li 才能进行赋值
// 将text.value里面的值，赋值给li.innerHTML让他可以在li里面显示内容
li.innerHTML = +datearr[0] + "-" + datearr[1] + "-" + datearr[2] + " " + datearr[3] + ":" + datearr[4] + ":" + datearr[5] + "<br>" + text.value + "<a href ='javascript:;'>删除</a>";
text.value = '';
// 2)添加元素
// ul.appendChild(li);
// 这个发布内容是在发布内容的后面进行添加
ul.insertBefore(li, ul.children[0]);
// 这个发布之后是将每次新发布的内容放在第一个进行显示
// 3)删除元素，删除的是当前链接的li ，但是所有的li都必须可以实现点击删除，所以要对每一个li都添加点击事件
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// node.removeChild(child); 删除的是li 当前a所在的li 当前a所在的li就是this.parentNode; this.parentNode表示的就是当前a元素的父级元素就是li
ul.removeChild(this.parentNode);
}
}
}
}
</script>5，删除节点node.removeChild() 删除节点
node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。
<button> 删除</button>
<ul>
<li>加布兽</li>
<li>加鲁鲁兽</li>
<li>兽人加鲁鲁</li>
<li>钢铁加鲁鲁</li>
</ul>
<script type="text/javascript">
// node.removeChild() 删除节点
// node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。
// 1）获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2)删除元素
ul.removeChild(ul.children[0]);
// 删除ul底下的索引号为0的元素点击按钮依次删除里面的孩子
<button> 删除</button>
<ul>
<li>加布兽</li>
<li>加鲁鲁兽</li>
<li>兽人加鲁鲁</li>
<li>钢铁加鲁鲁</li>
</ul>
<script type="text/javascript">
// node.removeChild() 删除节点
// node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。
// 3）点击按钮依次删除里面的孩子
btn.onclick = function() {
//正常情况下，当被删除的内容为0的时候，用户就无法点击删除，或者弹出警示框告知
// 所以我们需要对被删除的内容进行一个内容长度的判断，因为ul.children获取到的是一个伪数组，所以我们可以对它的数组长度进行一个判断
if(ul.children.length==0){
// 当数组长度为0的时候，我们就可以让删除按钮进行一个禁用，让用户无法点击该按钮
this.disabled=true;
}else{
// 如果里面的长度没有到0，我们就可以让用户点击删除的时候进行删除操作
ul.removeChild(ul.children[0]);
}
}
</script>