JS-dom-热身实战总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战热身</title>
<style>
body{
margin: 0;
padding: 0;
background: #00FF00;
}
ul li {
list-style: none;
width: 30px;
height: 30px;
border-radius: 50%;
}
img{
background-color: red;
}
.wap_box{
width: 600px;
height: 500px;
margin: 0 auto;
background: #2F4056;
position: relative;
}
h3{
text-align: center;
color: #fff;
}
.input_box{
width: 260px;
position: absolute;
left: 50%;
margin-left: -130px;
bottom: 0;
text-align: center;
}
</style>
</head>
<body>
<div class="wap_box">
<h3>正在跟王小花聊天...</h3>
<div class="input_box">
<input type="text" name="info">
<button>发送</button>
</div>
<ul>
</ul>
</div>
<script>
//获取元素
let input = document.getElementsByName('info')[0];
let button = document.getElementsByTagName('button')[0];
let ul = document.getElementsByTagName('ul')[0];
let wap_box = document.getElementsByClassName('wap_box')[0];
//鼠标点击事件
button.onclick = function () {
// 创建dom元素 createElement("li");
let li = document.createElement('li');
li.innerHTML = input.value; //li插入input的value值
// 添加dom
ul.appendChild(li); //将用户框显示到列表中
// input.value = ''; //将文本框清空
};
</script>
</body>
</html>本节知识点:
获取dom：
dom通过name值获取： document.getElementsByName（）
dom通过标签名值获取：document.getElementsByTagName（）
dom通过class获取：ocument.getElementsByClassName（）
点击事件：onclick
创建li标签 createElement("li");
创建一个js 变量存放 li标签
li插入input的value值
更新li标签 .appendChild(li);