1.6. 節點操作
1.6.1. 節點概述
網頁中的所有內容都是節點（標籤、屬性、文本、註釋等），在DOM 中，節點使用 node 來表示。
HTML DOM 樹中的所有節點均可通過 JavaScript 進行訪問，所有 HTML 元素（節點）均可被修改，也可以創建或刪除。
一般地，節點至少擁有nodeType（節點類型）、nodeName（節點名稱）和nodeValue（節點值）這三個基本屬性。
1.6.2. 節點層級
利用 DOM 樹可以把節點劃分爲不同的層級關係，常見的是父子兄層級關係。
1.6.3. 父級節點
<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. 子節點
所有子節點
子元素節點
<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);
</script>
第1個子節點
最後1個子節點
第1個子元素節點
最後1個子元素節點
實際開發中，firstChild 和 lastChild 包含其他節點，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性問題，那麼我們如何獲取第一個子元素節點或最後一個子元素節點呢？
<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. 案例：新浪下拉菜單
<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>
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. 創建節點
1.6.8. 添加節點
<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. 案例：簡單版發佈留言
<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() {
if (text.value == '') {
alert('您沒有輸入內容');
return false;
} else {
// console.log(text.value);
// (1) 創建元素
var li = document.createElement('li');
// 先有li 才能賦值
li.innerHTML = text.value;
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
}
}
</script>
</body>