目錄
筆記
###節點概述
1.網頁中的任何內容都是節點——文字、標籤、元素、文檔等。
節點至少有nodeType(節點類型)、nodeName(節點名稱)、nodeValue(節點值)三個基本屬性
節點的類型nodeType
元素節點：1 ———主要操作
屬性節點：2
文本節點：3
2.節點的層級關係
父子兄
父節點：
parentNode 得到的是最近的一個父節點
父節點使用：
element.parentNode 返回的是父節點
子節點：
childNode 得到的是所有的子節點(包括文本等)
children 得到的是所有子元素節點(不包括文本等)——常用
firstChildren lastChildren 得到的是第一個/最後一個子節點(包括文本等)
firstElementChildren lastElementChildren 得到的是第一個/最後一個子元素節點(不包括文本等)
子節點的使用：
element.children 返回的是所有子元素節點
實例：實現下拉菜單——使用節點獲取元素操作更方便
兄弟節點：
nextSibling：得到的是下一個子節點(包括文本等)
previousSibling：得到的是上一個子節點(包括文本等)
nextElementSibling：得到的是下一個子元素節點(不包括文本等)
previousElementSibling：得到的是上一個子元素節點(不包括文本等)
3.第一個子元素和最後一個子元素的獲取：
ele.children[0] ———— 第一個子元素節點
ele.children[ele.children.length - 1] ———— 最後一個子元素節點###節點的創建、添加、移除、複製
創建節點：
節點是文檔創建，創建後一般是要添加到知道地方的
document.createElement('TagName')方法 動態創建元素節點
比如：document.createElement('li')
添加節點：
node.appendChild(child) 方法
在node父節點列表的末尾添加child子節點
比如：ul.appendChild(li) 在ul的子元素列表末尾添加元素節點
node.insertBefore(child,指定元素)方法
在指定元素節點的前面添加子節點元素
比如：ul.insertBefore(li,ul.children[0]) 在ul的第一個子元素節點前面添加元素節點
刪除節點：
node.removeChild(child)方法
在node父節點列表刪除child子節點
複製節點：
node.cloneChild([child])方法
無參數：淺拷貝 —— 只複製標籤 不復制內容
有參數child：深拷貝 —— 標籤和標籤裏的所有內容都複製
方法的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>節點創建、添加、刪除、複製</title>
<style>
li {
background-color: pink;
margin-top: 20px;
padding: 5px 0;
width: 500px;
}
li button {
float: right;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li>1
<button>刪除元素</button>
<button>添加元素</button>
<button>刪除添加的</button>
</li>
<li>2
<button>刪除元素</button>
<button>添加元素</button>
<button>刪除添加的</button>
</li>
<li>3
<button>刪除元素</button>
<button>添加元素</button>
<button>刪除添加的</button>
</li>
<li>4
<button>刪除元素</button>
<button>添加元素</button>
<button>刪除添加的</button>
</li>
</ul>
<script>
// 點擊添加按鈕， 就添加一個li到下面列表中
// 獲取事件源
var ul = document.querySelector('ul');
var lis = ul.children;
var aaa = ul.children[0].cloneNode(true);
ul.appendChild(aaa);
// 遍歷每個li 找到其中的按鈕
for (var i = 0; i < lis.length; i++) {
// 註冊添加事件
var addbtn = lis[i].children[1];
addbtn.onclick = function () {
// 創建一個li
var lili = document.createElement('li');
// 並把這個創建的li添加到ul中
ul.appendChild(lili);
}
// 註冊刪除事件 點擊刪除按鈕，刪除的是按鈕所在的li 是當前按鈕的父節點
var removeBtn = lis[i].children[0];
removeBtn.onclick = function () {
ul.removeChild(this.parentNode); // 移除的是btn的父親 —— li
}
// 刪除添加的元素
var removeAdd = lis[i].children[2];
removeAdd.onclick = function () {
// 從最後一個開始刪除
ul.removeChild(ul.children[ul.children.length - 1]);
}
}
</script>
</body>
</html>
案例一、 動態生成表格
在實際中，表格中的數據是從數據庫中取得，這裏我是用對象模擬得數據。
圖中得列表中的行，都是自動生成的
點擊按鈕可以刪除行：
JS部分：
<script>
// 表格的數據應該是數據庫中的，暫時用對象模擬數據
var arr = [{
name: '薛',
subject: 'JavaScript',
source: 90
}, {
name: '朱',
subject: 'JavaScript',
source: 80
}, {
name: '張',
subject: 'JavaScript',
source: 90
}, {
name: '趙',
subject: 'JavaScript',
source: 99
}];
// 獲取元素 生成的表格是在tbody中
var tbody = document.querySelector('tbody');
// 把數組中的對象信息存入tbody
for (var i = 0; i < arr.length; i++) { //創建行
// 1.創建行 數組中幾個對象 就創建幾個行
var tr = document.createElement('tr');
// 2.添加行 把行添加到tbody中
tbody.appendChild(tr);
// 創建每一行的單元格 單元格的個數就是對象的屬性個數
// 遍歷對象 獲取屬性個數 key 獲取的是屬性 obj[key]是屬性值
for (var key in arr[i]) { // 創建列
// 有一個屬性就創建td列
var td = document.createElement('td');
// 獲取對象的值作爲列的內容
td.innerHTML = arr[i][key];
// 把列添加到行中
tr.appendChild(td);
}
// 3.創建刪除鏈接的單元格
var ass = document.createElement('td');
ass.innerHTML = '<a href="javascript:;">刪除</a>';
tr.appendChild(ass);
}
// 表格創建好之後，再進行其他操作
// 4.點擊刪除按鈕，刪除鏈接所在行
// 獲取事件源
var aas = document.querySelectorAll('a');
// 因爲有多個鏈接 所有需要循環註冊事件
for (var i = 0; i < aas.length; i++) {
aas[i].onclick = function () {
// 要刪除的是tr a的父親——td a的父親的父親——td的父親——tr
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
案例二、下拉菜單，鼠標經過和離開實現
<script>
// 鼠標經過，下拉菜單顯示
// 獲取事件源
var nav = document.querySelector('.nav');
var lis = nav.children; // nav的子節點就是所有的li li中有鏈接和下拉列表
// 註冊事件
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>
案例全部代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜單</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>
// 鼠標經過，下拉菜單顯示
// 獲取事件源
var nav = document.querySelector('.nav');
var lis = nav.children; // nav的子節點就是所有的li li中有鏈接和下拉列表
// 註冊事件
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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成績</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 表格的數據應該是數據庫中的，暫時用對象模擬數據
var arr = [{
name: '薛',
subject: 'JavaScript',
source: 90
}, {
name: '朱',
subject: 'JavaScript',
source: 80
}, {
name: '張',
subject: 'JavaScript',
source: 90
}, {
name: '趙',
subject: 'JavaScript',
source: 99
}];
// 獲取元素 生成的表格是在tbody中
var tbody = document.querySelector('tbody');
// 把數組中的對象信息存入tbody
for (var i = 0; i < arr.length; i++) { //創建行
// 1.創建行 數組中幾個對象 就創建幾個行
var tr = document.createElement('tr');
// 2.添加行 把行添加到tbody中
tbody.appendChild(tr);
// 創建每一行的單元格 單元格的個數就是對象的屬性個數
// 遍歷對象 獲取屬性個數 key 獲取的是屬性 obj[key]是屬性值
for (var key in arr[i]) { // 創建列
// 有一個屬性就創建td列
var td = document.createElement('td');
// 獲取對象的值作爲列的內容
td.innerHTML = arr[i][key];
// 把列添加到行中
tr.appendChild(td);
}
// 3.創建刪除鏈接的單元格
var ass = document.createElement('td');
ass.innerHTML = '<a href="javascript:;">刪除</a>';
tr.appendChild(ass);
}
// 表格創建好之後，再進行其他操作
// 4.點擊刪除按鈕，刪除鏈接所在行
// 獲取事件源
var aas = document.querySelectorAll('a');
// 因爲有多個鏈接 所有需要循環註冊事件
for (var i = 0; i < aas.length; i++) {
aas[i].onclick = function () {
// 要刪除的是tr a的父親——td a的父親的父親——td的父親——tr
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>節點創建、添加、刪除、複製</title>
<style>
li {
background-color: pink;
margin-top: 20px;
padding: 5px 0;
width: 500px;
}
li button {
float: right;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li>1
<button>刪除元素</button>
<button>添加元素</button>
<button>刪除添加的</button>
</li>
<li>2
<button>刪除元素</button>
<button>添加元素</button>
<button>刪除添加的</button>
</li>
<li>3
<button>刪除元素</button>
<button>添加元素</button>
<button>刪除添加的</button>
</li>
<li>4
<button>刪除元素</button>
<button>添加元素</button>
<button>刪除添加的</button>
</li>
</ul>
<script>
// 點擊添加按鈕， 就添加一個li到下面列表中
// 獲取事件源
var ul = document.querySelector('ul');
var lis = ul.children;
var aaa = ul.children[0].cloneNode(true);
ul.appendChild(aaa);
// 遍歷每個li 找到其中的按鈕
for (var i = 0; i < lis.length; i++) {
// 註冊添加事件
var addbtn = lis[i].children[1];
addbtn.onclick = function () {
// 創建一個li
var lili = document.createElement('li');
// 並把這個創建的li添加到ul中
ul.appendChild(lili);
}
// 註冊刪除事件 點擊刪除按鈕，刪除的是按鈕所在的li 是當前按鈕的父節點
var removeBtn = lis[i].children[0];
removeBtn.onclick = function () {
ul.removeChild(this.parentNode); // 移除的是btn的父親 —— li
}
// 刪除添加的元素
var removeAdd = lis[i].children[2];
removeAdd.onclick = function () {
// 從最後一個開始刪除
ul.removeChild(ul.children[ul.children.length - 1]);
}
}
</script>
</body>
</html>