一、id,class,标签和css选择器获取元素的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id,class,标签和css选择器获取元素的方法</title>
</head>
<body>
<div id="item1">
<ul class="class1">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li class="pink">列表项04</li>
<li>列表项05</li>
</ul>
</div>
<div id="item2">
<ul class="class2">
<li>列表项01</li>
<li class="pink">列表项02</li>
<li>列表项03</li>
<li class="pink">列表项04</li>
<li>列表项05</li>
</ul>
</div>
<div id="item3">
<ul class="class3">
<li class="pink">列表项01</li>
<li>列表项02</li>
<li class="three">列表项03</li>
<li>列表项04</li>
<li class="five linwu">列表项05</li>
</ul>
</div>
<script>
//1.通过id来选择元素
let item1 = document.getElementById('item1');
// 设置选中元素背景
item1.style.backgroundColor = 'red';
//通过函数来获取所有id
function getItem() { //参数是id字符串
let getitems = {}; //保存获取到的DOM对象元素
for(let i=0;i < arguments.length;i++) {//arguments 参数
let id = arguments[i];
let item = document.getElementById(id);//根据id字符串查找
if(item === null){
throw new Error ("没有这个元素"+id);//抛出异常
}
getitems[id] = item; //将获取到的元素保存到结果集中
}
return getitems;
}
//根据id获取页面指定元素，返回一个关联数组对象，键名就是id
let items = getItem('item1','item2','item3');
console.log(items);
for(let key in items){
items[key].style.backgroundColor='green';
}
// 2.根据class来获取元素
let class1 = document.getElementsByClassName('class1')[0];
console.log(class1);
class1.style.backgroundColor='red';
document.getElementsByClassName('class3').item(0)
.getElementsByClassName('three')[0]
.style.backgroundColor = 'cyan';
let five = document.getElementsByClassName('five linwu')[0];
console.log(five);
five.style.backgroundColor = 'pink';
//根据标签来选择
let ul = document.getElementsByTagName('ul')[1];
ul.style.backgroundColor = 'blue';
let ul1 = document.getElementsByTagName('li').item(3);
ul1.style.backgroundColor = 'wheat';
//通过标签获取所有li元素
let li_lists = document.getElementsByTagName('li');
// console.log(document.getElementsByTagName('li').length);
console.log(li_lists);
for(let t=0;t<li_lists.length;t++){
li_lists[t].style.backgroundColor = 'lightgreen';
}
//item()该方法也可用在元素对象中
let ul3 = document.getElementsByTagName('ul').item((0));
let item3 = ul3.getElementsByTagName('li').item(2);
item3.style.backgroundColor = 'skyblue';
// 4.根据css选择器获取元素
let lists1 = document.querySelectorAll('li');//根据标签选择器: li 获取
console.log(lists1);
lists1[0].style.backgroundColor = 'coral';
lists1.item(1).style.backgroundColor = 'lightcoral';
let ul5 = document.querySelector('ul'); //返回满足条件第一个
// console.log(ul5);
let ul6 = document.querySelectorAll('ul').item(2);
ul6.style.backgroundColor = 'black';
let li6 = ul6.querySelectorAll('li')[4];
li6.style.backgroundColor = 'red';
// 根据class .来选择
let li7 = document.querySelectorAll('.pink');
console.log(li7);
for(let e=0;e<li7.length;e++){
li7[e].style.backgroundColor='pink';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、模拟智能在线对话系统实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM实战:模拟智能在线***系统 </title>
<style>
div:nth-child(1){
width:600px;
min-height:550px;
background: #efefef;
margin: 30px auto;
color: #444;
box-shadow: 5px 5px 5px #e0e0e0;
}
h2{
text-align: center;
margin-bottom: -10px;
color:#888 ;
font-size:16px;
padding-top: 20px;
}
div:nth-child(2){
width: 500px;
height: 300px;
border: 1px solid #ccc;
margin: 20px auto 10px;
background: #fefefe;
border-radius: 5px;
overflow: hidden;
}
ul{
list-style: none;
line-height: 2em;
overflow: hidden;
padding: 15px;
}
div:nth-child(3){
margin: 20px auto;
width: 500px;
text-align: center;
}
div:nth-child(3) button{
width: 100px;
height:35px;
float: right;
}
button:hover{
background:orange;
}
textarea{
width: 500px;
resize: none;
border-radius: 5px;
}
img{
border-radius: 50%;
}
</style>
</head>
<body>
<div>
<h2>在线***</h2>
<div>
<ul>
<li></li>
</ul>
</div>
<div>
<p><textarea name="text" cols="50" rows="5"></textarea> </p>
<p><button type="button">发送</button></p>
</div>
</div>
<script>
//获取元素
let btn = document.getElementsByTagName('button')[0];
let text = document.getElementsByName('text')[0];
let list = document.getElementsByTagName('ul')[0];
let num = 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.style = 'line-height: 40px;\n' +
' height: 40px;\n' +
' border-radius: 20px;\n' +
' width: 90%;\n' +
' margin-left: 50px;';
//用户头像
let userPic = '<img style="float: left; margin-left:-20px;" src="img/n.jpg" width="30" style="border-radius: 50%">';
li.innerHTML = userPic+ ' '+'<span style="margin-left:30px;">'+userComment+'</span>';
list.appendChild(li); //将用户信息添加到聊天窗口中
num +=1;
//设置定时器, 自动回复
setTimeout(function () {
//自动回复信息
let info = [
'有什么事',
'找我干嘛',
'说明问题',
'要买什么',
'天天开心'
];
let tmp = info[Math.floor(Math.random()*4)];
let replay = document.createElement('li');
replay.style = 'color: red;\n' +
' line-height: 40px;\n' +
' height: 40px;\n' +
' border-radius: 20px;\n' +
' width: 90%;\n' +
' margin-left: 50px;';
let kfpic = '<img style="float: left;margin-left:-20px" src="img/g.jpg" width="30" style="border-radius: 50%" src="img/g.jpg" width="30" style="border-radius: 50%">';
replay.innerHTML = kfpic + ' '+'<span style="color: red;padding-left:20px;">'+tmp+'</span>';
list.appendChild(replay);
num+=1;
},2000);
//清屏
if(num > 10){
list.innerHTML = '';
num = 0;
}
}
//回车Enter 键绑定按钮
document.onkeydown = function (event) {
let e = event || window.event;
if (e && e.keyCode == 13) { //回车键的键值为13
btn.click(); //调用登录按钮的登录事件
}
};
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
