这节课学习用id,class,标签和css选择器获取元素的方法，基本上已经掌握了它们的用法，但是如果要完全手写还是有点困难，实战训练有40%还需要参考老师的代码
编程:实例演示 id,class,标签和css选择器获取元素的方法
id选择器：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
</head>
<body>
<ul class="lists">
<li id="item1">列表项01</li>
<li>列表项02</li>
<li id="item2">列表项03</li>
<li>列表项04</li>
<li id="item3">列表项05</li>
</ul>
<script>
//使用id来选择元素
//document 是document对象的一个引用，是一个全局变量
let item1 = document.getElementById('item1');
let item2 = document.getElementById('item2');
let item3 = document.getElementById('item3');
//设置元素样式
item1.style.backgroundColor = 'yellow';
item2.style.backgroundColor = 'yellow';
item3.style.backgroundColor = 'yellow';
//通过函数简化以上操作
function getElenment(){ //参数是多个id字符串
let elements = {};//保存获取到的对象元素
for (let i=0;i <arguments.length;i++){
let id = arguments[i] //获取到参数id
let elt =document.getElementById(id);//根据id字符串进行查找
if(elt === null){
throw new Error("没有这个元素"+ id);//抛出异常
}
elements[id] = elt;//将获取到的元素保存到结果集合中
}
return elements;//将获取到的元素返回
}
//根据id获取页面上的指定元素，返回一个关联数组（），键名就是id
let elements = getElenment('item1','item2','item3');
console.log(elements);
for(let key in elements){
elements[key].style.backgroundColor = 'coral';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
class,标签和css选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>name属性</title>
</head>
<body>
<!--name属性不是所有元素都有,只有一些特定的元素才会有，表单，表单内的元素
，图像，iframe-->
<form action="" name="login">
<input type="text" name="username">
<input type="password" name="password">
<button name="button">提交</button>
</form>
<script>
//getElementsByName()返回的是一个数组，nodelist
let login = document.getElementsByName('login')[0];
//console.log(login);
login.style.backgroundColor = 'yellow';
//可以把name属性当成docment对象的属性来用
let login1 = document.login;
login1.style.backgroundColor = 'green';
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>类表项01</li>
<li>类表项02</li>
<li>类表项03</li>
<li>类表项04</li>
<li>类表项05</li>
</ul>
<script>
//返回的是一个元素的集合，就会有一个length
let ul = document.getElementsByTagName('ul')[0];
ul.style.backgroundColor = 'lightgreen';
// console.log(document.getElementsByTagName('ul').length);
//元素集合其实是一个对象，item();
let ull = document.getElementsByTagName('ul').item(0);
ull.style.backgroundColor = 'lightblue';
//获取到所有的li元素
let lists = document.getElementsByTagName('li');
console.log(lists.length);
for (let i=0;i<lists.length;i++){
lists[i].style.backgroundColor = 'lightpink';
}
//该方法不仅定义在document对象上，换在元素对象页有定义
let ul2 =document.getElementsByTagName('ul').item(0);
let item2 = ul2.getElementsByTagName('li').item(1);
item2.style.backgroundColor = 'green';
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用标签名和name属性选择元素的快捷方式</title> </head> <body> <img src="img/fbb.jpg" alt="" name="pic"> <form action="" name="register"> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码不少于8位"> <button>提交</button> </form> <p><a href="http://www.php.cn" name="php">php中文网</a></p> <script> // document.images:获取所有的img元素，返回是一个数组 document.images[0].style.width = '200px'; //标签的数字索引 document.images['pic'].style.width = '300px'; //name属性 //如果将images看成对象，name就可以看出属性 document.images.pic.style.width = '250px';//name做为images对象的属性 //forms属性：获取到页面中的所有的form document.forms[0].style.backgroundColor = 'lightgreen';//索引 document.forms['register'].style.backgroundColor = 'lightblue';//name属性 document.forms.register.style.backgroundColor = 'red';//name做为images对象的属性 document.forms.item(0).style.backgroundColor = 'lightgreen';//item方法 //links document.links[0].style.backgroundColor ='yellow'; document.links['php'].style.backgroundColor ='red'; document.links.php.style.backgroundColor = 'lightgreen'; //body document.body.style.backgroundColor = 'wheat'; </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class</title>
</head>
<body>
<ul>
<li class="red">列表项01</li>
<li>列表项02</li>
<li class="green">列表项03</li>
<li>列表项04</li>
<li class="coral large">列表项05</li>
</ul>
<script>
let red = document.getElementsByClassName('red');
red[0].style.backgroundColor ='red';
//该方法不仅定义在document对象上调用，一般是在父元素调用
document.getElementsByTagName('ul').item('0')
.getElementsByClassName('green').item(0)
.style.backgroundColor = 'green';
//class支持多值
let large = document.getElementsByClassName('coral large')[0];
large.style.backgroundColor = 'red';
large.style.fontSize = '20px';
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实战: 在线聊天机器人
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom实战:</title>
<style>
div:nth-child(1){
width: 450px;
height: 650px;
background-color: lightskyblue;
margin: 30px auto;
color: #333;
box-shadow: 2px 2px 2px #888888;
}
h2{
text-align: center;
margin-bottom: -10px;
}
div:nth-child(2){
width: 400px;
height: 500px;
border: 4px double green;
background-color: #efefef;
margin: 20px auto 10px;
}
ul{
list-style-type: none;
line-height: 2em;
overflow: hidden;
padding: 15px;
}
table{
width: 90%;
height: 80px;
text-align: center;
margin: auto;
}
textarea{
border: none;
resize: none;
background-color: lightyellow;
width: 100%;
}
button{
width: 60px;
height: 40px;
background-color: seagreen;
color: white;
border: none;
}
button:hover{
cursor: pointer;
background-color: orange;
}
</style>
</head>
<body>
<div>
<h2>实战</h2>
<div>
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td align="right"><textarea name="text" cols="50" rows="4"></textarea></td>
<td align="left"><button type="button">发送</button></td>
</tr>
</table>
</div>
<script>
//获取到页面中的元素
let text = document.getElementsByName('text')[0];
let button = document.getElementsByTagName('button')[0];
let list = document.getElementsByTagName('ul')[0];
let sum = 0; //计数器
//添加点击事件，获取用户说的内容并发送到窗口
button.onclick = function () {
// alert(text.value);
//获取用户提交的内容
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="img/fbb.jpg" width="30" style="border-radius: 50%">';
li.innerHTML = userPic + '' + userComment;
list.appendChild(li);//将用户信息添加到窗口中
sum += 1;
//设置定时器,2秒后发送
setTimeout(function () {
//自动回复信息模板
let info =[
'我是php中文网第三期学员',
'您有什么问题',
'请把您的问题留言给我们',
'真的棒极了',
'下课了',
];
let tcmp = info[Math.floor(Math.random()*6)];
let reply = document.createElement('li');
let kefuPic = '<img src="img/sl.jpg" width="30" style="border-radius: 50%">';
reply.innerHTML = kefuPic + ' ' + '<span style="color: red">'+ tcmp +'</span>';
list.appendChild(reply);
sum += 1;
},2000);
//清空窗口并将计算器清零
if (sum>10) {
list.innerHTML = '';
sum =0;
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例