Correction status:Uncorrected
Teacher's comments:
在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>
点击 "运行实例" 按钮查看在线实例