兄弟节点
image
image
<span>我是span1</span>
<div>我是div</div>
<span>我是span2</span>
<script>
var div = document.querySelector('div')
// 下一个兄弟节点， 包含 元素节点、文本节点等等
console.log(div.nextSibling)
console.log(div.previousSibling)
// 得到上、下一个兄弟元素节点
console.log(div.nextElementSibling)
console.log(div.previousElementSibling)
</script>
创建节点
image
添加节点
image
<script>
// 1、创建节点值元素节点
var li= document.createElement('li')
// 2.添加节点 node.appendChild(Child) node 父级 Child是子集，append后面追加
var ul = document.querySelector('ul')
ul.appendChild(li)
// 添加节点
// node.insertBefore(child, 指定元素)
var lili = document.createElement('li')
ul.insertBefore(lili, ul.children[0])
// 总结 我们想要在页面中添加一个元素 1/创建节点 2.添加元素
</script>
留言发布案例
<!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>发布</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('您啥也没写就发布？')
return false;
}else {
// 创建 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')
// 获取文本框的内容
var uname = document.getElementById('uname')
var email = document.getElementById('email')
if (uname.value == '' || email.value == '') {
alert('信息不完整')
return false;
}
// 创建列
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>
删除节点
image
node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</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>发布</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('您啥也没写就发布？')
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>
复制（克隆）节点
image
<ul>
<li>11111 <a href="#">dad</a></li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul')
// 只复制标签，不复制内容和子节点
var li1clone = ul.children[0].cloneNode(false);
ul.appendChild(li1clone)
</script>
表格动态
<!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.先去准备好学生的数据
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')
// 遍历数据
for (var i = 0; i < datas.length; i++) {
// 创建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>
