在js中选择元素的方法有很多种.以下我来演示关于如何使用js中的id,css,标签等选择器来选中想要获取的数据
以下是我的代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器和在线聊天机器人</title>
</head>
<style>
ul{
padding:0;
margin: 0;
list-style-type: none;
}
.ul li{
width: 30px;
float: left;
margin-left: 5px;
border: 1px solid black;
border-radius: 50%;
text-align: center;
}
.box {
width: 450px;
height: 650px;
background-color: lightskyblue;
margin: 30px auto;
color: #333;
box-shadow: 2px 2px 2px #808080
}
h2 {
text-align: center;
margin-bottom: -10px;
}
.xbox {
width: 400px;
height: 500px;
border: 4px double green;
background-color: #efefef;
margin: 20px auto 10px;
}
div ul {
list-style: none;
line-height: 2em;
overflow: hidden;
padding: 15px;
}
table {
width: 90%;
height:80px;
margin: auto;
}
textarea{
border: none;
resize: none;
background-color: lightyellow;
}
.button {
width: 60px;
height: 40px;
background-color: seagreen;
color: white;
border: none;
}
.button:hover {
cursor: pointer;
background-color: orange;
}
</style>
<body>
<ul class="ul">
<li id="a1">01</li>
<li>02</li>
<li id="a2">03</li>
<li class="b1 b2">04</li>
<li id="a3">05</li>
<li class="b2">06</li>
<li>07</li>
<li class="b3">08</li>
<li class="b4">09</li>
<li id="a4">10</li>
</ul>
<br>
<hr>
<div class="box">
<h2>在线***</h2>
<div class="xbox">
<ul class="UL">
<li></li>
</ul>
</div>
<table>
<tr>
<td align="right"><textarea cols="50" rows="4" name="text"></textarea></td>
<td align="left"><button type=button class="button">发送</button></td>
</tr>
</table>
</div>
<script>
//通过函数来遍历获取到的id
function aid() {
let id ={} //创建一个空元素来保存获取到的id
for (let i=0; i <arguments.length; i++){
let a= arguments[i]; //获取输入的id
let b = document.getElementById(a);
if (b === null) {
throw new Error("没有查到数据"+a); //抛出异常
}
id[a]=b;
}
return id;
}
let id = aid('a1','a2','a3');
for (let c in id){
id[c].style.background = 'red';
}
//使用class 选择器
let b1 = document.getElementsByClassName('b1 b2')[0];//支持一个li中的多个class名称
b1.style.background = 'blue';
document.getElementsByClassName('ul')[0] // 直接在元素上调用,一般用户父级元素
.getElementsByClassName('b3')[0]
.style.background = 'blue';
//使用标签名选择器
let ul= document.getElementsByTagName('ul')[0];
console.log('ul');
let li2 = ul.getElementsByTagName('li').item(1);
li2.style.background = 'green'
// let li1 = ul.getElementsByTagName('li');
// for (let i=0;i<li1.length;i++) {
// li1[i].style.background = 'red';
// }
//使用css选择器
// let li3= document.querySelectorAll('li');//使用css中的标签选择器
// for (let i=0; i<li3.length;i++){
// li3[i].style.background = 'yellow';
// }
let ul1 = document.querySelector('.ul') //使用css中的class选择器
console.log(ul1);
let li5 = ul1.querySelectorAll('.b4');
console.log(li5);
li5[0].style.backgroundColor = 'red';
</script>
<script>
//获取到页面中的按钮,文本域,对话内容区
let btn = document.getElementsByTagName('button')[0];
let text = document.getElementsByName('text')[0];
let list = document.getElementsByClassName('UL')[0];
let sum = 0;
//添加按钮点击事件,获取用户数据并推送到对话窗口中
btn.onclick = function () {
//获取用户提交的内容
if (text.value.length === 0) {
alert('请输入内容');
return false;
}
let userComment = text.value;
//立即清空用户信息区
text.value = '';
//创建一个新节点li
let li = document.createElement('li');
li.innerHTML = userComment; //将用户输入的内容添加到新节点中
let userPic = '<img src="images/1.jpg" width="30" style="border-radius:50%">'; // 设置用户头像
li.innerHTML = userPic + ' ' + userComment; // 将用户头像与用户的聊天内容合并
list.appendChild(li); //发送聊天内容,实际上就是将新节点插入到对话列表中
sum += 1; // 聊天记录自增1
//设置定时器,默认2秒后会自动回复
setTimeout(function(){
let info = [
'您输入的内容无法识别请重新输入',
'您的问题暂时没有查到相关答案',
'如不满意请转人工***',
'就没有人工***可以转哈哈',
'想投诉没门,我还没有设置投诉页面呢'
];
let temp = info[Math.floor(Math.random()*4)];//在数组中随机抽取一句话
let reply = document.createElement('li');
let kefuPic = '<img src="images/2.jpg" width="30" style="border-radius:50%; margin-left:100px">';
reply.innerHTML = kefuPic + ' ' + '<span style="color:red">'+temp+'</span>';
list.appendChild(reply);
sum += 1;
},2000);
// 当聊天记录达到10条时清空窗口
if (sum > 10) {
list.innerHTML = '';
sum = 0;
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例