一.自定義屬性操作
文章目錄
1 獲取屬性值
2. 設置屬性值
3. 移出屬性
4.自定義屬性
1.父親節點
2.所有子節點(包括換行標籤br)
3.兄弟節點
4. 創建節點
5.添加節點
1 獲取屬性值
2. 設置屬性值
// 2. 設置元素屬性值
// (1) element.屬性= '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('屬性', '值'); 主要針對於自定義屬性
div.setAttribute('index', 2);
div.setAttribute('class', 'footer'); // class 特殊 這裏面寫的就是
3. 移出屬性
// class 不是className
// 3 移除屬性 removeAttribute(屬性)
div.removeAttribute('index');
4.自定義屬性
獲取是通過getAttribute(‘屬性’) 獲取。
H5給我們新增了自定義屬性：
兼容性較好，常用：
// 新增的獲取自定義屬性的方法 它只能獲取data-開頭的
console.log(div.getAttribute('data-list-name'));//常用
h5新增：考慮兼容性
// dataset 是一個集合裏面存放了所有以data開頭的自定義屬性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定義屬性裏面有多個-鏈接的單詞，我們獲取的時候採取 駝峯命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
二.節點操作
1 . 節點概述
網頁中的所有內容都是節點（標籤、屬性、文本、註釋等），在DOM 中，節點使用 node 來表示。
1.父親節點
<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>
2.所有子節點(包括換行標籤br)
單個子節點 (不含換行標籤):
// 3. 實際開發的寫法 既沒有兼容性問題又返回第一個子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
3.兄弟節點
1.node.nextSibling
nextSibling 返回當前元素的下一個兄弟元素節點，找不到返回null。同樣，也是包含所有的節點。
2.node.previousSibling
previousSibling 返回當前元素上一個兄弟元素節點，找不到返回null。同樣，也是包含所有的節點。
3. node.nextElementSibling
nextElementSibling 返回當前元素下一個兄弟元素節點，找不到則返回null。
4.node.previousElementSibling
previousElementSibling 返回當前元素上一個兄弟節點，找不到則返回null。
==注意：==3和4都有兼容性問題，i9以上支持
4. 創建節點
5.添加節點
<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);
</script>
此部分爲作業部分：
添加表格內容（加強訓練）
題目描述
用戶在頁面上點擊按鈕,可以把文本框中的數據在表格的新的一行中顯示，具體表現如下圖：
1）如果如果輸入框內容有一項爲空，彈出對話框‘請將數據填入完全
<style>
table {
width: 600px;
cursor: pointer;
}
table td {
text-align: center;
}
table th {
background-color: blueviolet;
}
table tr {
background-color: pink;
}
</style>
</head>
<body>
<div id="dv">
請輸入姓名:
<input type="text" value="" id="uname"/>
<br/> 請輸入郵箱:
<input type="text" value="" id="email"/>
</div>
<input type="button" value="添加" id="btn" />
<table border="1" cellpadding="0" cellspacing="0" id="tb">
<thead>
<tr>
<th>姓名</th>
<th>郵箱</th>
</tr>
</thead>
<tbody id="tbd">
<tr>
<td>小黑</td>
<td>xiaohei@126.com</td>
</tr>
</tbody>
</table>
<script>
var btn = document.getElementById('btn');
// 獲取按鈕註冊點擊事件
btn.onclick = function () {
var flag = true;
// 獲取文本框
var uname = document.getElementById('uname');
var email = document.getElementById('email');
if(uname.value == '' || email.value == ''){
alert('請將數據填入完全')
return;
}
// 創建一行
var trObj = document.createElement('tr');
// 把行加入到tbody中
var tbd = document.getElementById('tbd');
tbd.appendChild(trObj);
// 創建列，添加到行中
var td1 = document.createElement('td');
td1.innerHTML = uname.value;
var td2 = document.createElement('td');
td2.innerHTML = email.value;
trObj.appendChild(td1);
trObj.appendChild(td2);
};
</script>
分享到這，有錯誤之處請指出！