绑定事件,操作DOM树
var input = document.querySelector('input');
var ol = document.querySelector('ol');
document.querySelector('button').onclick = function(){
var todo = input.value;
console.log(todo);
var li = `<li>${todo}</li>`;
console.log(li);
//把li标签追加到ol下的HTML中
ol.innerHTML = ol.innerHTML + li;
}
创建元素对象
var input = document.querySelector('input');
var ol = document.querySelector('ol');
document.querySelector('button').onclick = function(){
var todo = input.value;
console.log(todo);//把todo包装成li标签对象
//创建一个<li>标签对象
var li = document.createElement('li');
li.innerText = todo;//把todo文本作为li的内部文本添加到对象上
ol.appendChild(li);//把li对象,作为ol的孩子,尾插上去
}
删除节点
//增加一项功能,点击某个li时,删除该li
li.onclick = function(){
//this代表事件源
//把this从ol中删除
ol.removeChild(li);
ol.removeChild(this);
}
应用一:猜数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猜数字</title>
<style>
.error{
color:red;
}
.right{
color:blue;
}
</style>
</head>
<body>
<button id="reset">重新开始一句游戏</button>
<div>
<label for="input">请输入要猜的数字</label>
<input type="text" id="input">
<button id="guess">猜</button>
</div>
<div>
已经猜的次数:
<span id="count">0</span>
</div>
<div>