一個元素可以修改它的內容、屬性和樣式，
一、修改
1.修改屬性
（1）字串型別的HTML標準屬性（上篇）
（2）bool型別的HTML標準屬性（上篇）
（3）自定義擴展屬性
HTML標準中沒有規定，程式員根據自身的需要自發添加的屬性就是自定義屬性，
a：自定義屬性經常用于代替id、class或元素選擇器，作為查找觸發事件的元素的條件；CSS的各種選擇器均有自己的不足之處：
i. id選擇器，只能選1個；
ii. class選擇器，本職作業是定義樣式，而樣式的修改極其頻繁！如果用class選擇器查找元素系結事件，一旦樣式類發生變化，程式必然出錯；
iii. 元素選擇器，因為實作同一種效果，可選的標簽名優很多，沒有統一規定，如果用元素選擇器查找觸發事件的元素，系結事件，則元素一改，功能又立刻出錯，
為了解決以上問題，就可以為元素添加自定義屬性，當查找觸發事件的元素時，用屬性選擇器[自定義屬性]來查找即可，
b：在js中訪問自定義擴展屬性
要注意自定義屬性不能用 . 訪問，因為自定義屬性是后天程式員自發添加的，在HTML標準中沒有規定，所有在記憶體中的元素物件上，不包含自定義擴展屬性！
可以用舊核心DOM：
元素.getAttribute("自定義屬性名")
元素.setAttribute("自定義屬性名", "屬性值")
在新版的HTML5標準中，有新的規定：
①HTML中，所有自定義屬性名必須以data-開頭：<元素 data-自定義屬性名="屬性值">
②如果在html中以data-開頭了，則js中: 元素.dataset.自定義屬性名，
舉例：點擊按鈕，記錄次數；
<body>
<button data-n="0" data-btn>click me</button>
<script>
//想點按鈕，給n屬性的值+1
//DOM 4步
//1. 查找觸發事件的元素
// 本例中: 查找帶有data-btn屬性的一個按鈕
var btn = document.querySelector("[data-btn]");
//2. 系結事件處理函式
btn.onclick = function () {
//3. 查找要修改的元素
//4. 修改元素
//4.1 獲取自己身上data-n屬性中保存的舊點擊次數，轉為整數
var n = parseInt(
this.getAttribute("data-n")
);
//4.2 次數+1
n++;
//4.3 再放回去
this.setAttribute("data-n", n);
}
</script>
</body>2.修改樣式
（1）修改行內樣式
格式：元素.style.css屬性="屬性值"
由于有些css屬性名中帶-，這樣會和減法的-號沖突；所以所有帶-的css屬性名必須去-變駝峰，比如：font-size -> fontSize、background-color -> backgroundColor、list-style-type -> listStyeType，
（2）獲取樣式
使用元素.style.css屬性的方式，只能獲取行內樣式，無法獲得內部或外部樣式表中層疊或繼承來的css屬性值，所以今后要想獲得元素任意css屬性值，都要獲得計算后的樣式，計算后的樣式就是最終應用到一個元素上的所有css屬性的總和，
獲取方法分為兩步：
i. 先獲得計算后的樣式物件：var style=getComputedStyle(元素物件);
ii. 從完整的樣式物件中只提取個別css屬性：style.css屬性;
舉例：獲取h1元素計算后的樣式；
<body>
<h1 id="h1" style="color:yellow">Welcome</h1>
<p>Welcome to my web site</p>
<script>
var h1 = document.getElementById("h1");
//用style，獲得字體顏色，背景顏色，字體大小
console.log(h1.style.color);
console.log(h1.style.backgroundColor);
console.log(h1.style.fontSize);
//用計算后的樣式，獲得字體顏色，背景顏色，字體大小
var style = getComputedStyle(h1);
console.log(style.color);
console.log(style.backgroundColor);
console.log(style.fontSize);
</script>
</body>在實際的專案中，很多效果都需要批量修改一個元素的多個css屬性，而.style一句話只能修改一個css屬性，如果修改多個css屬性時代碼會很繁瑣；所以只要批量設定一個元素的多個css屬性，都用class代替.style，
二、添加/洗掉元素
1.添加一個新元素
（1）創建一個新的空元素物件：
var 新元素物件=document.createElement("標簽名")
//eg：
var a=document.createElement("a");//<a></a>
（2）為新元素添加必要屬性：
元素物件.屬性名=新值
//eg：
a.innerHTML="go to tmooc";
a.href="http://tmooc.cn";
//<a href=" http://tmooc.cn "> go to tmooc </a>
（3）將新元素添加到DOM樹的指定父元素下：
//在父元素下末尾追加新元素
父元素.appendChild(新元素)
//在父元素下插入到一個現有子元素之前
父元素.insertBefore(新元素，現有子元素)
//替換父元素下的一個現有的子元素
父元素.replaceChild(新元素，現有子元素)
舉例：創建一個a元素和一個文本框；
<body>
<script>
//向頁面中添加一個a
// 1.創建一個空元素
var a = document.createElement("a");
// 2.為新元素添加必要屬性
a.innerHTML = "進入百度官網";
a.href = "www.baidu.com";
// 3.將新元素添加到DOM樹
document.body.appendChild(a);
//再創建普通的文本框
var input = document.createElement("input");
//將文本框放在a的后邊?
document.body.appendChild(input)
//將文本框放在a的前邊?
//document.body.insertBefore(input, a);
//用文本框替換a?
//document.body.replaceChild(input,a);
</script>
</body>2.優化
修改DOM樹的內容會導致重排重繪，但頻繁重排重繪會降低頁面加載的效率，如果父元素已經在頁面上了，要添加多個平級子元素，就要借助于檔案片段物件來實作，
檔案片段是指記憶體中臨時保存多個平級子元素的虛擬父元素，使用方法：
（1）先創建檔案片段物件:
var 檔案片段物件=document.createDocumentFragment();（2）將子元素先添加到檔案片段物件中
檔案片段物件.appendChild(子元素)（3）將檔案片段物件一次性添加到頁面上
父元素.appendChild(檔案片段物件);3.洗掉元素
父元素.removeChild(子元素)舉例：動態生成表格；
<head>
<title>動態創建表格</title>
<meta charset="utf-8" />
<style>
table {
width: 600px;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #ccc
}
</style>
</head>
<body>
<div id="data">
<table>
<thead>
<tr>
<th>姓名</th>
<th>薪資</th>
<th>年齡</th>
<th>洗掉</th>
</tr>
</thead>
</table>
</div>
<script>
var json = [{
"ename": "Tom",
"salary": 11000,
"age": 25
},
{
"ename": "John",
"salary": 13000,
"age": 28
},
{
"ename": "Mary",
"salary": 12000,
"age": 25
}
];
//1. 先創建一個tbody
var tbody = document.createElement("tbody");
//2. 再遍歷json陣列中每個員工物件
for (var emp of json) {
//每遍歷一個員工物件，就創建一個tr，追加到tbody中
var tr = document.createElement("tr");
tbody.appendChild(tr);
//3. 遍歷當前員工物件中每個屬性值
for (var key in emp) {
//每遍歷一個屬性值，就創建一個td，追加到tr中，并設定當前td的內容為當前屬性的屬性值
var td = document.createElement("td");
tr.appendChild(td);
td.innerHTML = emp[key];
}
//說明當前行的屬性值td已經添加完成
//就可以為當前行中再多添加一個td
var td = document.createElement("td");
tr.appendChild(td);
//創建button，放入td中
var btn = document.createElement("button");
btn.innerHTML = "洗掉";
td.appendChild(btn);
// 為當前按鈕系結單擊事件
btn.onclick = function () {
// 點哪個按鈕，就讓哪個洗掉
// 查找tbody
var tbody = document.querySelector("#data>table>tbody");
// 獲得當前點擊的洗掉按鈕
var str = this.parentElement.parentElement;
// 獲得員工姓名當前tr下的第一個td
var ename = tr.childNodes[0].innerHTML;
// 先確認，再洗掉
var result = confirm(`是否繼續洗掉${ename}`);
if (result == true) {
tbody.removeChild(tr);
}
}
}
//3. 整個遍歷結束后，再將tbody一次性追加到table中
var table = document.querySelector("#data>table");
table.appendChild(tbody);
</script>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/302813.html
標籤：其他
上一篇：了解JavaScript/JavaScript發展前景
下一篇：微信小程式繪制二維碼