なぜノード操作
1.6.1ノードの概要
すべてのコンテンツのページが表現するためにノードを使用してDOMノードで、ノード（タグ、属性、テキスト、コメントなど）です。
すべてのHTML DOMツリーノードには、JavaScriptを介してアクセスすることができ、すべてのHTML要素（ノード）は変更できますが、作成または削除することができます。
一般的に、ノードは、これらの3つの基本的特性の少なくともnodeTypeの（ノードタイプ）のnodeName（ノード名）とのnodeValue（ノード値）を有します。
1.6.2ノードレベル
ノードを使用してDOMツリーは関係の異なるレベルに分けることができ、それが一般的であり、父と弟の階層。
1.6.3親ノード
node.parentNode 1、のparentNodeプロパティはノードの親ノードを返し、注意があり、最近の親ノード。
図2に示すように、指定されたノードは親ノード、またはnullを有していない場合。
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode); //
</script>1.6.4子ノード
1、すべての子ノード
1. parentNode.childNodes（标准）
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes var ul = document.querySelector(‘ul’);
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeType == 1) {
// ul.childNodes[i] 是元素节点
console.log(ul.childNodes[i]);
}
}2、子要素ノード
2. parentNode.children（非标准）
parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回 （这个是我们重点掌握的）。
虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
// DOM 提供的方法（API）获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
// 补充的代码
for (var i = 0; i < ul.children.length; i++) {
console.log(ul.children[i]);
}
</script>3、最初の子ノード
4、最後の子ノード
5、最初の子要素ノード
6、最後の子要素ノード
実際の開発、のfirstChildとlastChildは、他のノードが含まれ、操作が便利ではない、とfirstElementChildとlastElementChild我々はそれが最初の子ノードまたは最後の子要素ノードを得るのですか互換性の問題が存在しますか？
解决方案：
1. 如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
2. 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1] 
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>1.6.5ケース：シーナドロップダウンメニュー
<!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>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<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>
</body>
</html>1.6.6兄弟
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibling 得到下一个兄弟元素节点
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
</script>
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
} ノードの作成1.6.7
document.createElement('tagName')
document.createElement()方法： 创建由 tagName 指定的 HTML 元素。
因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为`动态创建元素节点`。
1.6.8追加ノード
1. node.appendChild(child)
node.appendChild()方法： 将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的after 伪元素。
2. node.insertBefore(child, 指定元素)
node.insertBefore()方法： 将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before伪元素。
<ul>
<li>123</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
</script>1.6.9ケース：シンプルな解放メッセージ
<!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>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</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() {
// 注意，不是text.innerHTML，文本域的值是value
if (text.value == '') {
alert('您没有输入内容');
return false;
} else {
var li = document.createElement('li'); // (1) 创建元素
li.innerHTML = text.value; // 先有li 才能赋值
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]); // (2) 添加元素
text.value = ''; // 加的代码，点击按钮后，清空文本域的内容
}
}
</script>
</body>
</html>