1. 洗掉節點
node.removeChild() 方法從 node節點中洗掉一個子節點，回傳洗掉的節點，
<button>洗掉</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光頭強</li>
</ul>
<script>
// 1.獲取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2. 洗掉元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
// 3. 點擊按鈕依次洗掉里面的孩子
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
</script>
<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 + "<a href='javascript:;'>洗掉</a>";
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
// (3) 洗掉元素 洗掉的是當前鏈接的li 它的父親
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// 洗掉的是 li 當前a所在的li this.parentNode;
ul.removeChild(this.parentNode);
}
}
}
}
</script>
2. 復制（克隆）節點
<ul>
<li>1111</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括號為慷訓者里面是false 淺拷貝 只復制標簽不復制里面的內容
// 2. node.cloneNode(true); 括號為true 深拷貝 復制標簽復制里面的內容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
3. 案例：動態生成表格
<script>
// 1.先去準備好學生的資料
var datas = [{
name: '魏瓔珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘歷',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}, {
name: '大豬蹄子',
subject: 'JavaScript',
score: 0
}];
// 2. 往tbody 里面創建行： 有幾個人（通過陣列的長度）我們就創建幾行
var tbody = document.querySelector('tbody');
// 遍歷陣列
for (var i = 0; i < datas.length; i++) {
// 1. 創建 tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2. 行里面創建單元格td 單元格的數量取決于每個物件里面的屬性個數
// 使用for in遍歷學生物件
for (var k in datas[i]) {
// 創建單元格
var td = document.createElement('td');
// 把物件里面的屬性值 datas[i][k] 給 td
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 3. 創建有洗掉2個字的單元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">洗掉 </a>';
tr.appendChild(td);
?
}
// 4. 洗掉操作 開始
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// 點擊a 洗掉 當前a 所在的行(鏈接的爸爸的爸爸) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
4. 創建元素的三種方式
<script>
// 三種創建元素方式區別
// 1. document.write() 創建元素 如果頁面檔案流加載完畢，再呼叫這句話會導致頁面重繪
var btn = document.querySelector('button');
btn.onclick = function() {
document.write('<div>123</div>');
}
?
// 2. innerHTML 創建元素
var inner = document.querySelector('.inner');
for (var i = 0; i <= 100; i++) {
inner.innerHTML += '<a href="https://www.cnblogs.com/llanq123/archive/2020/09/26/#">百度</a>'
}
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="https://www.cnblogs.com/llanq123/archive/2020/09/26/#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3. document.createElement() 創建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
</script>
5. innerTHML和createElement效率對比
innerHTML字串拼接方式（效率低）
<script>
function fn() {
var d1 = +new Date();
var str = '';
for (var i = 0; i < 1000; i++) {
document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
createElement方式（效率一般）
<script>
function fn() {
var d1 = +new Date();
?
for (var i = 0; i < 1000; i++) {
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '2px';
div.style.border = '1px solid red';
document.body.appendChild(div);
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
innerHTML陣列方式（效率高）
<script>
function fn() {
var d1 = +new Date();
var array = [];
for (var i = 0; i < 1000; i++) {
array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
}
document.body.innerHTML = array.join('');
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/132201.html
標籤：.NET技术
上一篇：NETCORE 設定監聽URL