兄弟節(jié)點(diǎn)
image
image
<span>我是span1</span>
<div>我是div</div>
<span>我是span2</span>
<script>
var div = document.querySelector('div')
// 下一個(gè)兄弟節(jié)點(diǎn)碾褂， 包含 元素節(jié)點(diǎn)、文本節(jié)點(diǎn)等等
console.log(div.nextSibling)
console.log(div.previousSibling)
// 得到上缸兔、下一個(gè)兄弟元素節(jié)點(diǎn)
console.log(div.nextElementSibling)
console.log(div.previousElementSibling)
</script>
創(chuàng)建節(jié)點(diǎn)
image
添加節(jié)點(diǎn)
image
<script>
// 1、創(chuàng)建節(jié)點(diǎn)值元素節(jié)點(diǎn)
var li= document.createElement('li')
// 2.添加節(jié)點(diǎn) node.appendChild(Child) node 父級(jí) Child是子集，append后面追加
var ul = document.querySelector('ul')
ul.appendChild(li)
// 添加節(jié)點(diǎn)
// node.insertBefore(child, 指定元素)
var lili = document.createElement('li')
ul.insertBefore(lili, ul.children[0])
// 總結(jié) 我們想要在頁面中添加一個(gè)元素 1/創(chuàng)建節(jié)點(diǎn) 2.添加元素
</script>
留言發(fā)布案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>發(fā)布</button>
<ul></ul>
<script>
// 獲取元素
var btn = document.querySelector('button')
var text = document.querySelector('textarea')
var ul = document.querySelector('ul')
// 注冊事件
btn.onclick =function () {
// console.log( text.value)
if (text.value == ''){
alert('您啥也沒寫就發(fā)布镊绪？')
return false;
}else {
// 創(chuàng)建 li
var li = document.createElement('li')
// console.log( text.value)
// 先有 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">
<title>Title</title>
<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>
<tr>
<td>小黑2</td>
<td>xiaohei@126.com</td>
</tr>
</tbody>
</table>
<script>
var btn = document.getElementById('btn')
btn.onclick = function () {
// console.log('haha')
// 獲取文本框的內(nèi)容
var uname = document.getElementById('uname')
var email = document.getElementById('email')
if (uname.value == '' || email.value == '') {
alert('信息不完整')
return false;
}
// 創(chuàng)建列
var td1 = document.createElement('td')
td1.innerHTML = uname.value
var td2 = document.createElement('td')
td2.innerHTML = email.value
//，把列添加到行中
var trObj = document.createElement('tr')
trObj.appendChild(td1)
trObj.appendChild(td2)
var tbd = document.getElementById('tbd')
// 把行添加到 tbody
tbd.appendChild(trObj)
}
</script>
</body>
</html>
刪除節(jié)點(diǎn)
image
node.removeChild() 方法從 node節(jié)點(diǎn)中刪除一個(gè)子節(jié)點(diǎn)洒忧，返回刪除的節(jié)點(diǎn)蝴韭。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>刪除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光頭強(qiáng)</li></ul>
<script>
var ul = document.querySelector('ul')
var btn = document.querySelector('button')
btn.onclick = function () {
if (ul.children.length == 0){
// alert('還刪吶')
this.disabled = true;
}else {
ul.removeChild(ul.children[0])
}
}
</script>
</body>
</html>
刪除留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>發(fā)布</button>
<ul></ul>
<script>
// 獲取元素
var btn = document.querySelector('button')
var text = document.querySelector('textarea')
var ul = document.querySelector('ul')
// 注冊事件
btn.onclick =function () {
// console.log( text.value)
if (text.value == ''){
alert('您啥也沒寫就發(fā)布？')
return false;
}else {
var li = document.createElement('li')
// li.innerHTML = text.value + "<a href='#'>刪除</a>"
// li.innerHTML = text.value + "<a href='javascript:;'>刪除</a>"
ul.insertBefore(li, ul.children[0])
// 刪除元素
var as = document.querySelectorAll('a')
for (var i = 0; i < as.length; i++) {
console.log('dd');
as[i].onclick = function () {
ul.removeChild(this.parentNode)
}
}
}
}
</script>
</body>
</html>
復(fù)制（克挛跏獭）節(jié)點(diǎn)
image
<ul>
<li>11111 <a href="#">dad</a></li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul')
// 只復(fù)制標(biāo)簽榄鉴，不復(fù)制內(nèi)容和子節(jié)點(diǎn)
var li1clone = ul.children[0].cloneNode(false);
ul.appendChild(li1clone)
</script>
表格動(dòng)態(tài)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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>
// 1.先去準(zhǔn)備好學(xué)生的數(shù)據(jù)
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
}];
var tbody = document.querySelector('tbody')
// 遍歷數(shù)據(jù)
for (var i = 0; i < datas.length; i++) {
// 創(chuàng)建tr
var tr = document.createElement('tr')
tbody.appendChild(tr)
for (var k in datas[i]){
var td = document.createElement('td')
// console.log(datas[i][k])
td.innerHTML = datas[i][k]
tr.appendChild(td)
}
// 添加刪除
var td = document.createElement('td')
td.innerHTML = ' <a href="#">刪除</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>
</body>
</html>
