演示 id.class.标签和css选择器获取元素的方法
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <ul id="ul1"> <li id="nav1">导航1</li> <li id="nav2">导航2</li> <li id="nav3">导航3</li> </ul> </div> <div> <table> <tr class="tr1"> <td class="name">111</td> <td class="name">222</td> <td class="name">333</td> </tr> </table> </div> <script> //通过id获取 let list1 = document.getElementById('nav1'); //通过class获取 let list2 = document.getElementsByClassName('name')[0]; let list3 = document.getElementsByClassName('name').item(1); let list4 = document.getElementsByClassName('tr1')[0].getElementsByClassName('name')[2]; list4.style.backgroundColor='red'; //标签选择器 let lists = document.querySelectorAll('li'); //通过css选择器 let list5 = document.querySelector('#name'); list5 = document.querySelectorAll('#name')[0]; </script> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
2.实战: 模拟在线聊天机器人
实例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>在线聊天机器人</title>
</head>
<style>
body{
background-color: skyblue;
}
.msg-box{
width:350px;
height:500px;
margin:0 auto;
border: 1px solid black;
background-color: ghostwhite;
overflow:auto;
}
p{
text-align: center;
}
.msg{
width:350px;
margin:0 auto;
height:50px;
}
textarea{
width:290px;
height:50px;
margin-top: 10px;
border-radius: 10px;
resize:none;
}
button{
background-color: #bc1322;
border:0;
width:50px;
height:30px;
border-radius: 10px;
}
ul{
padding: 5px;
}
ul li{
list-style-type: none;
min-height:30px;
margin:5px;
clear:both;
}
img{
border-radius: 50%;
/*float:right;*/
}
span{
display: inline-block;
background-color: lightgrey;
border-radius: 10px 0 10px 10px;
max-width:260px;
min-width: 30px;
min-height: 30px;
/*float:right;*/
margin: 0 5px 5px 0;
padding:0 5px;
line-height: 30px;
}
</style>
<body>
<p>在线聊天机器人</p>
<div class="msg-box">
<ul>
</ul>
</div>
<div class="msg">
<table>
<tr>
<td><textarea name="msg" id="msg" cols="50" rows="4" ></textarea></td>
<td><button type="button">发送</button></td>
</tr></table>
</div>
<script>
let btn = document.getElementsByTagName('button')[0];
let pic1 = "<img src='http://dwz.cn/Ht3qWIsK' width='30px' style='float:right'>";
let pic2 = "<img src='http://dwz.cn/KnhVYsJg' width='30px' style='float:left'>";
let all = document.getElementsByTagName('div')[0];
let i = 0;
btn.onclick = function(){
let msg_box = document.getElementsByTagName('textarea')[0];
let msg = msg_box.value;
//显示到聊天框
if(msg.length>0){
i++;
msg_box.value='';
let li = document.createElement('li');
li.innerHTML =pic1 +'<span style="float:right;background-color: #0e90d2">'+msg+'</span>';
let ul = document.getElementsByTagName('ul')[0];
if( i>=50){
ul.innerHTML = '';
}
ul.appendChild(li);
all.scrollTop = all.scrollHeight;
setTimeout(function(){
let replace_msg = document.createElement('li');
let msg_list =[
'我也不知道怎么形容现在这种感觉，反正就是，不想活了。除非你亲我一下。',
'你说走就走，从未顾虑过我的感受，见你第一眼就知道，你是一条难养的狗。',
'坏人需要实力，败类更需要品位。',
'时间是用来流浪的，身躯是用来相爱的，生命是用来遗忘的，而灵魂，是用来歌唱的。',
'种草不让人去躺，不如改种仙人掌！',
'混社会是个体力活儿，讲究四门功课：闪转腾挪。',
'每当冲锋号响起，我就赶紧躲进壕沟里，因为：我是卧底！',
'就你这个样子，这个年龄，已经跌破发行价了。',
'你走你的过街天桥，我过我的地下通道。',
'为什么一看书，就困呢？因为书，是梦开始的地方。',
'提问：为什么暑假一定比寒假长?回答：因为热胀冷缩。',
'心情不好的时候，我就半夜给别人打骚扰电话，把他们吵醒了，我就睡觉。',
'我这人从不记仇，一般有仇我当场就报了。',
'我的兴趣爱好可分为静态和动态两种，静态就是睡觉，动态就是翻身…',
'每个人出生的时候都是原创，很可惜，很多人渐渐成了盗版。',
'我哪是什么朴实，节俭，会过日子的人，我只是单纯的穷而已。',
'待你长发及腰，我便开启双刀，十字斩加暴走，长发全带走！',
'蚊子不可恶，可恶的是唐伯虎忘了给我们点蚊香。',
'粗腿女生羡慕嫉妒各种小细腿，不管他是男是女。',
'找不到被子长短边的时候，感觉整个人在做印度甩饼。',
'听说女生上辈子造的孽越多，今世的胸就越大。',
'我长不高的原因大概是因为一直在迷你。',
'我的灵魂在唱歌在跳舞，只是肉体赖在床上。',
'我有八十多种小辣条，现在考虑跟我做朋友还来得及。',
'每次跟别人吵完架，等躺在床上的时候，才知道当时应该怎么骂。',
'我好像对纸过敏，每次做作业都难受。',
'他不理你怎么了，别担心，还有我，我也懒得理你。',
'我是说呢为何咱俩总是混不熟，原来你特别喜欢见外啊。',
'从小学到大学，唯一不变的就是一颗不想念书的心。',
'考试：开卷和闭卷的不同就在于，一个在上面抄，一个在下面抄。',
'怎么给MM过一个难忘的生日？先把她爆揍一顿，然后把广州最贵楼盘的房证送上，保证既难忘又惊喜！'
];
let msg2 = msg_list[Math.floor(Math.random()*(msg_list.length-1))];
replace_msg.innerHTML = pic2+'<span style="float:left;border-radius: 0 10px 10px 10px;">'+msg2+'</span>';
ul.appendChild(replace_msg);
all.scrollTop = all.scrollHeight;
},2000);
}else{
alert('请输入内容');
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
