收藏
批改状态：未批改
老师批语：
根据id、class、标签和css选择器来获取元素
（1）利用id获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据id选择元素</title>
</head>
<body>
<ul id="list">
<li id="item1">列表项1</li>
<li>列表项2</li>
<li id="item2">列表项3</li>
<li>列表项4</li>
<li id="item3">列表项5</li>
</ul>
<script>
//使用id选择元素
let item1 = document.getElementById('item1');
let item2 = document.getElementById('item2');
let item3 = document.getElementById('item3');
//设置元素样式
item1.style.backgroundColor = 'lightblue';
item2.style.backgroundColor = 'lightblue';
item3.style.backgroundColor = 'lightblue';
//如果需要用多个id来获取多个元素，可以构建一个函数
function getElement(){
let elements = {};//存储获取到的元素
for (let i=0; i<arguments.length; i++){//arguments函数的参数数组
let id = arguments[i]; //获取id
let tmp = document.getElementById(id);
//判断是否获取成功
if (tmp === null){
throw new Error('NO element with id：'+id);//在控制台 抛出异常对象
}
elements[id] = tmp;
}
return elements;//返回查询到的元素 对象字面量形式
}
let elements = getElement('item1','item2','item3');
//遍历数组
for (let key in elements){
elements[key].style.backgroundColor = 'coral';
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
（2）利用标签获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据tagname获取元素</title>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<script>
//获取所有li元素
let lis = document.getElementsByTagName('li');
for (let i=0; i<lis.length; i++){
lis[i].style.backgroundColor = 'skyblue';
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
其实这些获取方法都基本一样，getElementsByClassName（）利用class属性值来获取，querySelectorAll（）则是传入 css选择器来获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据name属性来获取元素</title>
</head>
<body>
<!--拥有name属性的元素并不多 表单 图像 内联框架-->
<form action="" name="login">
<input type="text" name="username">
<input type="password" name="password">
<button name="button">提交</button>
</form>
<script>
//getElementsByName()返回一个节点列表，并不是一个元素
let login = document.getElementsByName('login')[0];
// console.log(login);
login.style.backgroundColor = 'coral';
//可以将属性值 作为document的属性来用 返回唯一的元素
let login1 = document.login;
login1.style.backgroundColor = 'blue';
//表单快捷方式 forms 数组
document.forms[0].style.backgroundColor = 'yellow';
document.forms['login'].style.backgroundColor = 'red';
document.forms.login.style.backgroundColor = 'green';
//images body link
//js也支持css选择器来获取元素
let text = document.querySelectorAll("form");
text[0].style.backgroundColor = 'coral';
let input = document.querySelector('form');//返回 满足条件的第一个
input.style.backgroundColor = 'blue';
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
在线***的案例
其基本的原理就是：用户在文本框输入信息，获取完输入的信息马上就把文本框清空，点击按钮把信息发送到上方的显示框，然后再发送预先准备的语句,当然这些准备的语句通过定时器来触发，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线***系统</title>
<style>
div:first-child{
margin: 15px auto;
width: 400px;
height: 630px;
background: skyblue;
color: #333333;
box-shadow: 2px 2px 2px #636363;
text-align: center;
}
h2{
margin-bottom: 10px;}
ul{
list-style-type: none;
border: 4px double greenyellow;
width: 350px;
height: 460px;
margin: auto;
background-color: white;
padding: 10px 0px;
overflow: hidden;
}
table{
margin: 15px auto;}
textarea{
resize: none;}
button{border:none;
width: 50px;
height:30px;}
button:hover{
background-color: coral;
cursor: pointer;
}
li{
margin: 0 10px;
text-align: left;
height: 30px;
line-height: 30px;
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div class="box">
<h2>在线***</h2>
<ul>
</ul>
<table>
<tr>
<td align="right"><textarea name="text" id="" cols="40" rows="4"></textarea></td>
<td align="left"><button type="button">发送</button></td>
</tr>
</table>
<script>
//获取按钮、li、文本元素
let text = document.getElementsByName('text')[0];
let btn = document.getElementsByTagName('button')[0];
let ul = document.getElementsByTagName('ul')[0];
let sum = 0; //计数器
//给按钮添加点击事件
btn.onclick = function(){
//获取用户内容
if (text.value.length ===0){
alert('请输入内容');
return false;// 停止执行
}
let content = text.value;
text.value = '';//清空用户信息
//创建一个新节点
let li = document.createElement('li');
let userPic = '<img src="inc/boy.jpeg" width="30" style="border-radius: 50%;vertical-align: middle">';
li.innerHTML = userPic+ ' ' + content;
ul.appendChild(li);
sum += 1; //聊天记录自增1
//设置定时器，2s后自动回复
setTimeout(function () {
let reply = [
'真烦人,有话快说,别耽误我玩抖音',
'除了退货,退款,咱们什么都可以聊',
'说啥,本姑娘怎么听不懂呢?再说一遍',
'在我方便的时候再回复你吧~~',
'投诉我的人多了,你算老几~~~'
];
let temp = reply[Math.floor(Math.random()*5 )];
let replyText = document.createElement('li');
replyText.setAttribute('style','text-align: right');
let kefuPic = '<img src="inc/gyy.jpg" width="30" style="border-radius: 50%;vertical-align: middle;">';
replyText.innerHTML = '<span style="color: yellow;">'+temp+' '+ kefuPic+'</span>';
ul.appendChild(replyText);
sum += 1;
},1500);
if (sum > 10){
sum = 0;
setTimeout(function () {
ul.innerHTML = '';
},1500);
}
}
</script>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：js用来获取元素的方法很类似，都是getElementsById/class name/tag name，不过要注意其中返回的是一个元素还是一个数组，有s或者all这些字眼的就是返回数组，反之则是返回一个元素。
同时innerHtml这个属性可以写入html代码，很方便代码的插入。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
