---
tags: API,DOM,第二章
---
# 串接API之DOM第二章
## getAttribute
element.屬性 獲取屬性值
獲取內置屬性
element.getAttribute('屬性')
獲取自定義屬性
...
設置屬性值
方法一
element.屬性='值' 設置內置屬性
方法二
element.setAttribute('屬性','值')
...
移除屬性
element.removeAttribute('屬性')
```
<body>
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('div');
console.log(div); // 結果像是把後面的程式碼執行完才來執行這一行
console.log(div.id); // demo
console.log(div.getAttribute('id')); // demo
console.log(div.getAttribute('index')); // 1
div.id = 'text';
div.className = 'nav'; // 注意是className
console.log(div.id); // text
console.log(div.className); // nav
div.setAttribute('index', '2');
div.setAttribute('class', 'footer'); // class比較特殊
div.removeAttribute('index');
</script>
</body>
```
## tab欄切換製作
:::danger
未完成
:::
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: red;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介紹</li>
<li>規格與包裝</li>
<li>售後保障</li>
<li>商品評價</li>
<li>手機社區</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block">商品介紹模塊內容</div>
<div class="item">規格與包裝模塊內容</div>
<div class="item">售後保障模塊內容</div>
<div class="item">商品評價模塊內容</div>
<div class="item">手機社區模塊內容</div>
</div>
</div>
<script>
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i);
lis[i].onclick = function () {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
console.log(index);
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
};
}
</script>
</body>
</html>
```
## H5自定義屬性
data-開頭
element.setAttribute('data-index','2')
兼容性獲取element.getAttribute('data-index')
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime); // 錯誤寫法
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', '20');
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name')); // 看下面的注意
// H5新增
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
console.log(div.dataset.listName);
console.log(div.dataset['listName']); // 注意
</script>
</body>
</html>
```
## 節點
利用DOM獲取元素
document.getElementById()
document.getElementsByTagName()
document.querySelector()
邏輯不強、繁瑣
...
利用節點獲取元素
利用父子兄節點關係
邏輯性強、兼容性稍差
nodeName節點名稱
nodeType節點類型
nodeValue節點值
元素節點nodeType=1
屬性節點nodeType=2
文本節點nodeType=3(包含文字、空格、換行)
實際開發幾乎只用元素節點nodeType=1
...
Element.parentNode
Element.childNodes
Element.childNodes[0]
Element.children
Element.children[0]
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div class="demo">
<div class="box">
<span class="erweima">x</span>
</div>
</div>
<script>
var erweima = document.querySelector('.erweima');
var box = document.querySelector('.box');
console.dir(box);
// 得到離元素最近的父節點
// 如果找不到就返回null
console.log(erweima.parentNode);
// 傳統獲取方式
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 子節點 childNodes 所有子節點 包含 元素節點 文本節點
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType); // 3
console.log(ul.childNodes[1].nodeType); // 1
// children(非標準)獲取所有元素節點 開發常用
console.log(ul.children);
</script>
</body>
</html>
```
Element.firstChild
Element.lastChild
Element.firstElementChild
Element.lastElementChild
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ol>
<script>
var ol = document.querySelector('ol');
// firstChild 第一個子節點 不管文本節點還是元素節點
console.log(ol.firstChild);
console.log(ol.lastChild);
// firstElementChild 第一個元素節點
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
</script>
</body>
</html>
```
## 新浪下拉菜單
:::danger
未完成
:::
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.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; // 得到4個小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>
```
## 兄弟節點
Element.nextSibling
Element.previousSibling
Element.nextElementSibling
Element.previousElementSibling
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// nextSibling 下一個兄弟節點 包含 元素節點 或 文本節點
console.log(div.nextSibling); // 文本節點
console.log(div.previousSibling); // 文本節點
// 下一個兄弟元素節點 找不到返回null
console.log(div.nextElementSibling); // <span>我是span</span>
console.log(div.previousElementSibling); // null
</script>
</body>
</html>
```
## 創建元素
var li = document.createElement('li');
ul.appendChild(li);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li>123</li>
</ul>
<script>
var li = document.createElement('li');
var ul = document.querySelector('ul');
// 類似數組中的push
ul.appendChild(li); // 123的下一個
// 插入節點
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]); // 123的上一個
</script>
</body>
</html>
```
## 留言板
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">123</textarea>
<button>發布</button>
<ul></ul>
<script>
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function () {
if (text.value == '') {
alert('您沒有輸入內容');
return false; // 阻止表單提交
} else {
var li = document.createElement('li');
li.innerHTML = text.value;
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
}
};
</script>
</body>
</html>
```
## 刪除節點
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>刪除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光頭強</li>
</ul>
<script>
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// ul.removeChild(ul.children[0]);
btn.onclick = function () {
if (ul.children.length == 1) {
ul.removeChild(ul.children[0]);
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
};
</script>
</body>
</html>
```
## 刪除留言
href='javascript:;'
不修改網址、不跳轉連結
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">123</textarea>
<button>發布</button>
<ul></ul>
<script>
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function () {
if (text.value == '') {
alert('您沒有輸入內容');
return false;
} else {
var li = document.createElement('li');
li.innerHTML = text.value + "<a href='javascript:;'>刪除</a>";
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
ul.removeChild(this.parentNode);
};
}
}
};
</script>
</body>
</html>
```
## 複製節點
cloneNode(true) 深拷貝
cloneNode(false) 淺拷貝
cloneNode() 淺拷貝
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
</body>
</html>
```
## 動態生成表格
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成績</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>張嘉航</td>
<td>JavaScript</td>
<td>100</td>
<td><a href="#">刪除</a></td>
</tr>
<tr>
<td>張嘉航</td>
<td>JavaScript</td>
<td>100</td>
<td><a href="#">刪除</a></td>
</tr>
<tr>
<td>張嘉航</td>
<td>JavaScript</td>
<td>100</td>
<td><a href="#">刪除</a></td>
</tr>
<tr>
<td>張嘉航</td>
<td>JavaScript</td>
<td>100</td>
<td><a href="#">刪除</a></td>
</tr>
</tbody>
</table>
</body>
<script>
var datas = [
{
name: '張葦航',
subject: 'JavaScript',
score: 100
},
{
name: '張葦航',
subject: 'JavaScript',
score: 100
},
{
name: '張葦航',
subject: 'JavaScript',
score: 100
},
{
name: '張葦航',
subject: 'JavaScript',
score: 100
}
];
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) {
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (var k in datas[i]) {
var td = document.createElement('td');
console.log(datas[i]);
console.log(datas[i][k]);
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
var td = document.createElement('td');
td.innerHTML = '<a href ="javascript:;">刪除</a>';
tr.appendChild(td);
}
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
tbody.removeChild(this.parentNode.parentNode);
};
}
</script>
</html>
```
Sign in with Wallet
Connect another wallet