一、排他操作
1.排他思想
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1.所有的元素全部清除样式
2.给当前的元素设置样式
注意顺序能不能颠倒，首先清除全部样式，再设置自己当前的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01排他思想</title>
</head>
<body>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<button class="btn">按钮4</button>
<button class="btn">按钮5</button>
<script>
//1.获取到所有的元素
var btns = document.getElementsByClassName('btn');
//console.log(btns);
//2.遍历 btns是一个数组（有length和根据索引获取元素，但是不具备数据中push等方法）
for(var i = 0; i < btns.length; i++){
//给所有的button都注册点击事件
btns[i].onclick = function(){
//alert('ok');
//1)清除所有按钮的样式(重新再遍历一遍所有的btns)
for(var j = 0; j < btns.length; j++){
btns[j].style.backgroundColor = '';
}
//2)添加样式
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
</html>
2.案例
案例一
百度换肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02百度换肤</title>
<style>
*{margin: 0; padding: 0;}
body{
background: url(images/1.jpg) no-repeat center top;
}
li{
list-style: none;
}
.baidu{
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li{
float: left;
}
.baidu img{
width: 100px;
}
.baidu:hover{
cursor: pointer; /*手的形状*/
}
</style>
</head>
<body>
<ul class="baidu" id="baidu">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
<script>
//1.获取元素
//1-1 获取到ul (通过id获取，就是只获取了一个对象)
var ulObj = document.getElementById('baidu');
//1-2 通过ul对象，找ul中的img
var imgs = ulObj.getElementsByTagName('img')
//console.log(imgs);
//2.循环imgs
for(var i = 0; i < imgs.length; i++){
//给每一个都注册事件
imgs[i].onclick = function(){
//console.log(this.src);
document.body.style.backgroundImage = 'url('+this.src+')'
}
}
</script>
</body>
</html>
案例二：隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03隔行变色</title>
<style>
*{margin: 0; padding: 0;}
table{
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr{
height: 30px;
}
tbody tr td{
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg {
background-color: #999;
}
</style>
</head>
<body>
<table id="mytable">
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最近公布净产值</th>
<th>净产值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>0121213</td>
<td>农银金穗3个月订气开放债券</td>
<td>1.09</td>
<td>1.09</td>
</tr>
<tr>
<td>0121213</td>
<td>农银金穗3个月订气开放债券</td>
<td>1.09</td>
<td>1.09</td>
</tr>
<tr>
<td>0121213</td>
<td>农银金穗3个月订气开放债券</td>
<td>1.09</td>
<td>1.09</td>
</tr>
<tr>
<td>0121213</td>
<td>农银金穗3个月订气开放债券</td>
<td>1.09</td>
<td>1.09</td>
</tr>
<tr>
<td>0121213</td>
<td>农银金穗3个月订气开放债券</td>
<td>1.09</td>
<td>1.09</td>
</tr>
<tr>
<td>0121213</td>
<td>农银金穗3个月订气开放债券</td>
<td>1.09</td>
<td>1.09</td>
</tr>
<tr>
<td>0121213</td>
<td>农银金穗3个月订气开放债券</td>
<td>1.09</td>
<td>1.09</td>
</tr>
<tr>
<td>0121213</td>
<td>农银金穗3个月订气开放债券</td>
<td>1.09</td>
<td>1.09</td>
</tr>
</tbody>
</table>
<script>
//1.获取到所有的tr（每一个tr就是一行）
var mytable = document.getElementById('mytable');
var trs = mytable.getElementsByTagName('tr');
//console.log(trs);
//2.遍历tr
for(var i = 0; i < trs.length; i++){
//隔行变色
// if(i != 0 && i % 2 ==0){ //偶数
// trs[i].style.backgroundColor ='pink'
// }
if(i== 0){
continue
}
//鼠标放在tr上，有一个背景颜色,给每个tr都注册一个鼠标放上去的事件
trs[i].onmouseover = function(){
this.className = 'bg';
}
//鼠标移开，移除背景样式
trs[i].onmouseout = function(){
this.className = ''
}
}
</script>
</body>
</html>
案例三：全选全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04全选和全部选</title>
<style>
*{margin: 0; padding: 0;}
.wrap {
width: 300px;
margin: 100px auto;
}
table {
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,td{
border: 1px solid #d0d0d0;
color: #404040;
padding: 10px;
}
th{
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td{
font: 14px "微软雅黑";
}
tbody tr{
background-color: #f0f0f0;
}
tbody tr:hover{
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<table class="wrap">
<thead>
<tr>
<th><input type="checkbox" id="j_chAll" /></th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="other"/></td>
<td>Iphone16</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox" class="other"/></td>
<td>华为mate70</td>
<td>9000</td>
</tr>
<tr>
<td><input type="checkbox" class="other"/></td>
<td>小米17</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox" class="other"/></td>
<td>vivo</td>
<td>4000</td>
</tr>
</tbody>
</table>
<script>
//1.获取元素
//1-1 全选复选框
var all = document.getElementById('j_chAll');
//1-2 所有的其它复选框
var others = document.getElementsByClassName('other');
//通过复选框对象.checked可以获取到复选框的状态，true是勾选状态，false取消勾选的状态
//通过复选框对象.checked = true/false 可以设置复选框的状态
//给全选和全部选复选框注册点击事件
all.onclick = function(){
var flag = all.checked; //复选框的状态
console.log(flag);
//2.遍历所有的其它复选框
for(var i = 0; i < others.length; i++){
others[i].checked = flag; //设置复选框的状态
}
}
// //看看all复选框，点击的时候发生了什么
// var flag = all.checked;
// console.log(flag);
// all.onclick = function(){
// var flag = all.checked;
// console.log(flag);
// }
</script>
</body>
</html>
升级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05全选和全部选升级</title>
<style>
*{margin: 0; padding: 0;}
.wrap {
width: 300px;
margin: 100px auto;
}
table {
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,td{
border: 1px solid #d0d0d0;
color: #404040;
padding: 10px;
}
th{
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td{
font: 14px "微软雅黑";
}
tbody tr{
background-color: #f0f0f0;
}
tbody tr:hover{
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<table class="wrap">
<thead>
<tr>
<th><input type="checkbox" id="j_chAll" /></th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="other"/></td>
<td>Iphone16</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox" class="other"/></td>
<td>华为mate70</td>
<td>9000</td>
</tr>
<tr>
<td><input type="checkbox" class="other"/></td>
<td>小米17</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox" class="other"/></td>
<td>vivo</td>
<td>4000</td>
</tr>
</tbody>
</table>
<script>
//1.获取元素
//1-1 全选复选框
var all = document.getElementById('j_chAll');
//1-2 所有的其它复选框
var others = document.getElementsByClassName('other');
//通过复选框对象.checked可以获取到复选框的状态，true是勾选状态，false取消勾选的状态
//通过复选框对象.checked = true/false 可以设置复选框的状态
//给全选和全部选复选框注册点击事件
all.onclick = function(){
var flag = all.checked; //复选框的状态
console.log(flag);
//2.遍历所有的其它复选框
for(var i = 0; i < others.length; i++){
others[i].checked = flag; //设置复选框的状态
}
}
//2.遍历所有的其它复选框
for(var i = 0; i < others.length; i++){
others[i].onclick = function(){
var ch = checkCheckbox(others); //会返回一个truefalse
//console.log(ch);
all.checked = ch;//给全选或全部选复选框设置值
}
}
//检查其它的复选框的状态，如果全选就返回true，只要有一个不选就返回false
function checkCheckbox(chks){
var ch = true;
// 遍历
for(var i = 0; i < chks.length; i++){
//检查每一个的状态
if(chks[i].checked == false){
ch = false;
break
}
}
return ch;
}
// //看看all复选框，点击的时候发生了什么
// var flag = all.checked;
// console.log(flag);
// all.onclick = function(){
// var flag = all.checked;
// console.log(flag);
// }
</script>
</body>
</html>
二、自定义属性操作
1.获取属性值
有两种方式：
- element.属性，就可以获取到该元素属性的值
- element.getAttribute(‘属性’)
区别：
- element.属性， 获取内置属性值 （元素本身自带的属性）
- element.getAttribute(‘属性’)；主要是获取自定义属性（我们程序自定义的属性）
2.设置属性的值
有两种方式：
- element.属性 = 值
- element.setAttribute(‘属性名’,'属性值);
区别：
- element.属性 = 值 设置内置属性的值
- element.setAttribute(‘属性名’,'属性值); 主要设置自定义属性的值
3.移除属性
element.removeAttribute(‘属性’);
4.案例
案例一：讲课案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06.获取属性值</title>
</head>
<body>
<div id="demo" index="1" class="nav">123</div>
<script>
//1.获取到div对象。根据id获取是获取到一个对象
var div = document.getElementById('demo');
console.log(div.id); //获取div对象中id属性的值
console.log(div.getAttribute('id')); //获取div这个对象中id这个属性的值
console.log(div.index); //***获取失败，对象.属性名只能获取本身自有属性，不能获取自定义属性
console.log(div.getAttribute('index')); //获取div这个对象中index这个属性的值
//2.设置对象的属性值值
//2-1 element.属性 = '值'
div.id = 'test'
console.log(div.id);
div.className = 'navs'
console.log(div.className);
//2-2 element.setAttribute('属性名','值').主要针对的是自定义属性
div.setAttribute('index',222)
console.log(div.getAttribute('index'));
div.setAttribute('class','abded')
console.log(div.className);
//3.移除自定义属性 removeAttribute('属性名')
div.removeAttribute('index')
div.removeAttribute('class');
</script>
</body>
</html>
案例二：tab栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07tab</title>
<style>
*{margin: 0; padding: 0;}
ul li{
list-style: none;
}
.tab{
width: 978px;
margin: 100px auto;
}
.tab_list{
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li{
float: left;
height: 39px;
line-height: 39px;
padding: 0px 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list" id="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障内容：京东商城向您保证所售商品均为正品行货，京东自营商品开具机打发票或电子发票。
</div>
<div class="item">
手机收到了。特别特别棒，货比三家才买的，店主人很好，回答问题很有耐心，也很详细，有需要还会再来的
</div>
<div class="item">
手机社区：心中疑惑就问问买过此商品的同学吧~我要提问
</div>
</div>
</div>
<script>
//1.获取元素
var tab_list = document.getElementById('tab_list');
var lis = tab_list.getElementsByTagName('li');
var items = document.getElementsByClassName('item');
//console.log(lis);
//2.利用for循环给li绑定点击事件
for(var i = 0; i < lis.length; i++){
//给每个li设置一个索引号
lis[i].setAttribute('index',i);
//注册事件
lis[i].onclick = function(){
//2-1 li点击有红色样式
//其它要干掉
for(var j = 0; j < lis.length; j++){
lis[j].className = '';
}
//给当前点击的红色样式
this.className = 'current'
//2-2 点击li下面显示的内容模块变化
var index = this.getAttribute('index');
console.log(index);
//其它的要隐藏
for(var k = 0; k < items.length; k++){
items[k].style.display = 'none'
}
items[index].style.display = 'block'
}
}
</script>
</body>
</html>
5.H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存在页面中而不用保存在数据库中
自定义一属性获取是通过getAttribute(‘属性名’) 获取
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
h5给我们新增了自定义属性
- 设置自定义属性
- h5规定自定义属性
data-开头作为属性名并赋值- 如：
- 设置：element.setAttribute(‘data-index’,1);
- 获取自定义属性
- 兼容属性获取：element.getAttribute(‘data-index’);
- h5新增了获取方式：element.dataset.index 或者 element.dataset(‘index’)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08.H5自定义属性</title>
</head>
<body>
<div id="my" getTime="20" data-index="2" data-list-name="admin"></div>
<script>
//1.获取元素
var div = document.getElementById('my');
console.log(div.getAttribute('getTime'));
//设置一个h5属性
div.setAttribute('data-time',20);
console.log(div.getAttribute('data-time'));
//h5新增的自定义属性的方法( 只能是data- 开头)
//dataset：是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index); //2
console.log(div.dataset['index']); //2
//如果自定义属性里面有多个链接的单词，我们获得时候采用驼峰写法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
</body>
</html>
三、节点操作
1.节点概述
节点：网页中所有的内容都是节点 （标签、属性、文本、注释等等），在DOM中，节点使用
node表示html DOM 树种所有的节点都可以通过javaScript来进行访问，所有的HTML元素（节点）均可被修改，也可以创建或删除
一般地：节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>09节点概述</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div id="box">
<span class="erweima">我是二维码</span>
</div>
<script>
var box = document.getElementById('box');
console.dir(box);
</script>
</body>
</html>
- 元素节点 nodeType 为 1
- 元素节点 nodeType 为 2
- 元素节点 nodeType 为 3 (文本节点内包含文字、空格、换行等等)
我们实际开发种，节点操作主要是操作元素节点
2.父节点
node.parentNode
属性可以返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点，返回null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10父节点</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div id="box">
<span class="erweima" id="erweima">我是二维码</span>
</div>
<script>
//获取到二维码对象
var erweima = document.getElementById('erweima');
//node.parentNode 得到的是离元素最近的父节点，如果找不到父节点就返回null
console.dir(erweima.parentNode); //div#box
</script>
</body>
</html>
3.子节点
所有的子节点：
parentNode.childNodes
返回的是包含指定节点的子节点的集合，该集合即时更新的集合
**注意：**返回值里面包含了所有的子节点，包括元素节点、文本节点等
如果只需要获取到里面的元素节点，则需要专门的处理，所以我们一般不提倡使用
childNodes
parentNode.children
是一个只读属性，返回的是所有的子元素节点，它只返回子元素节点，其它节点不返回（终点掌握这个）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11子节点</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<ul id="ul">
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div id="box">
<span class="erweima" id="erweima">我是二维码</span>
</div>
<script>
//获取ul
var ul = document.getElementById('ul');
//获取ul中所有的li
//var lis = ul.getElementsByTagName('li');
var lis = ul.children
console.log(lis);
//1.字节点
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType); //3
console.log(ul.childNodes[1].nodeType); //1
console.log(ul.children);
</script>
</body>
</html>
3.1 获取子节点
第一个节点和最后一个
parentNode.firstNode ;返回第一个子节点，找不到就返回null，通过也页包含所有的节点
parentNode.firstElementNode: 返回一个子元素节点，找不到就是null
parentNode.lastChild :最后一个子节点
parentNode.lastElementChild: 返回最后一个子元素节点，找不到就是null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13.新浪下拉菜单</title>
<style>
*{margin: 0; padding: 0;}
li{
list-style: none;
}
a{
text-decoration: none;
font-size: 14px;
}
#nav{
margin: 100px;
}
#nav>li{
position: relative;
float: left;
width: 80px;
height: 40px;
text-align: center;
}
#nav li a{
display: block;
width: 100%;
height: 100%;
line-height: 40px;
color: #333;
}
#nav ul{
display: none;
}
#nav>li>a:hover{
background-color: #eee;
}
#nav ul li a:hover{
background-color: #fff5da;
}
</style>
</head>
<body>
<ul id="nav">
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
</ul>
<script>
//1.获取元素
var nav = document.getElementById('nav');
//2.获取li
var lis = nav.children;
console.log(lis);
//3.循环注册事件
for(var i = 0;i < lis.length; i++){
lis[i].onmouseover = function(){
//this.children[1] 表示当前这个li种的ul
this.children[1].style.display = 'block'
}
lis[i].onmouseout = function(){
this.children[1].style.display = 'none'
}
}
</script>
</body>
</html>
3.2 兄弟节点
下一个兄弟 : nextElementSibling
上一个兄弟 : previousElementSibling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>我是h2</h2>
<div id="div">我是div</div>
<span>我是span</span>
<script>
var div = document.getElementById('div');
//1.nextSibling 下一个兄弟节点，包含了元素节点或者是文本节点等等 (了解)
console.log(div.nextSibling); //下一个
console.log(div.previousSibling); //上一个
//2.nextElementSibling 下一个兄弟 previousElementSibling 上一个兄弟 [掌握]
div.nextElementSibling.style.backgroundColor='pink'
console.log(div.nextElementSibling); //下一个
console.log(div.previousElementSibling); //上一个
div.previousElementSibling.style.backgroundColor = 'red'
</script>
</body>
</html>
4.创建添加节点
- 创建节点：docuemnt.createElement(tagName’);
- java添加节点：node.appendChild(child);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="ul">
<li>123</li>
</ul>
<script>
//1.创建节点
var li = document.createElement('li');
//2.添加节点到父节点
var ul = document.getElementById('ul');
//加入到父节点里子元素的最后
ul.appendChild(li);
//ul.children[1].innerHTML = '456'
//添加节点
var li2 = document.createElement('li');
//用insertBefore(参数一是创建的新元素，参数二添加的位置)
ul.insertBefore(li2,ul.children[0]); //将新的节点，加入到ul的第一个孩子的位置
console.log(li);
</script>
</body>
</html>
5.案例
发布留言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>16.留言板</title>
<style>
*{margin: 0; padding: 0;}
body{
padding: 100px;
}
textarea{
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none; /*不让修改大小*/
}
ul{
width: 300px;
padding: 5px;
background-color: rgb(245,209,243);
color: #fff;
font-size: 14px;
margin: 15px 0;
}
</style>
</head>
<body>
<textarea name="" id="comment"></textarea>
<br/>
<button id="btn">发布</button>
<ul id="ul">
</ul>
<script>
//1.获取元素
var btn = document.getElementById('btn');
var comment = document.getElementById('comment');
var ul = document.getElementById('ul');
//2.注册事件
btn.onclick = function(){
//判断是否有输入内容
if(comment.value == ''){
alert('请输入内容');
return false;
} else {
//2-1 创建元素
var li = document.createElement('li');
//设置内容
li.innerHTML = comment.value
//2-2 添加元素
//ul.appendChild(li); //添加到后面
ul.insertBefore(li,ul.children[0]);
//添加完成后清除输入框种的内容
comment.value = ''
}
}
</script>
</body>
</html>