一、demo1.html,根据id获取元素的方法:
<!DOCTYPE html>
<html>
<head>
<title>根据id获取元素的方法</title>
<meta charset="utf-8">
</head>
<body>
<div style="width: 300px;height: 300px; border-radius: 10%;background-color: skyblue;">
<form style="padding:50px 20px;">
性 名：<input type="text" id="user" name="user"><br><br>
密 码：<input type="password" id="password" name="password"><br><br>
<input type="button" id="button" name="button" value="登录">
</from>
</div>
<script type="text/javascript">
let input1 = document.getElementById('user');
let input2 = document.getElementById('password');
let input3 = document.getElementById('button');
input1.style.backgroundColor = 'pink';
input2.style.backgroundColor = 'orange';
console.log(input3.value);
//如果需要使用多个id来获取元素，可以通过函数来简化操作
function getElements () { // 参数是多个id字符串
let elements = {}; //创建一个空的map映射对象用来保存结果
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("No element with id: " + id);
}
elements[id] = elt; // 将获取到的元素存入到映射数据中
}
return elements; // 返回查询到的元素(以对象字面量方式)
}
//获取页面上指定的id属性的元素,返回一个关联数组类型的对象,键名就是id的值
let elements = getElements('user','password');
for (let key in elements) {
elements[key].style.backgroundColor = 'coral';
}
</script>
</body>
</html>说明：根据id获取元素的方法使用的是document.getElementById()，其中如果需要使用多个id来获取元素，可以通过函数来简化操作，在实际开发中可以提高开发效率。
二、demo2.html,根据name属性获取元素的方法:
<!DOCTYPE html>
<html>
<head>
<title>根据name属性获取元素的方法</title>
<meta charset="utf-8">
</head>
<body>
<div style="width: 300px;height: 300px; border-radius: 10%;background-color: skyblue;">
<form name="login" style="padding:50px 20px;">
性 名：<input type="text" id="user" name="user"><br><br>
密 码：<input type="password" id="password" name="password"><br><br>
<input type="button" id="button" name="button" value="登录">
</from>
</div>
<script type="text/javascript">
// getElementsByName()返回是一个NodeList节点列表,不只一个元素
let login = document.getElementsByName('login')[0];
// console.log(login); //控制台查看
login.style.backgroundColor = 'yellow';
//还可以将name属性的值,当作docuemtn对象的属性来用,返回唯一元素
let login1 = document.login;
// console.log(login1); //控制台查看
login1.style.backgroundColor = 'green';
//这个name属性更多的用于表单数据提交到服务器时,用来识别提交的内容
</script>
</body>
</html>说明：根据name属性获取元素的方法使用的是document.getElementsByName()，值得注意是它返回是一个NodeList节点列表,不只一个元素。
三、demo3.html 根据标签名Tag来获取元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根据标签名Tag来获取元素</title>
</head>
<body>
<ul>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ul>
<script>
//getElementsByTagName(),根据标签名称获取元素,返回一个元素集合,有length属性,可以当数组来访问
let ul = document.getElementsByTagName('ul')[0];
ul.style.backgroundColor = 'lightgreen';
//元素集合也是一个对象,上面定义了一个方法:item()也可以获取指定元素
let ul1 = document.getElementsByTagName('ul').item(0);
ul1.style.backgroundColor = 'lightblue';
//获取所有的li元素
let lists = document.getElementsByTagName('li');
console.log(lists); //返回一个html元素集合: HTMLCollection
for (let i = 0; i < lists.length; i++) {
lists[i].style.backgroundColor = 'lightpink';
}
//getElementsByTagName()不仅在document对象上有定义,在Element元素对象上也有定义
let ul2 = document.getElementsByTagName('ul').item(0); // 获取ul
let item2 = ul2.getElementsByTagName('li').item(1); // 在父元素上调用该方法,获取ul中的第二个列表项
item2.style.backgroundColor = 'green';
</script>
</body>
</html>说明：根据标签名Tag来获取元素使用的是document.getElementsByTagName(），同样的，它返回一个元素集合,有length属性,可以当数组来访问。
四、demo4.html 根据元素的class属性值获取元素:
<!DOCTYPE html>
<html>
<head>
<title>根据class属性选取元素</title>
<meta charset="utf-8">
</head>
<body>
<ul class="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>
//根据元素的class属性值获取元素
let red = document.getElementsByClassName('red');
console.log(red); //返回一个html元素集合,与根据标签名获取的返回数据类型完全一样
red[0].style.backgroundColor = 'red';
//该方法也支持在父元素上调用
document.getElementsByClassName('ul').item(0)
.getElementsByClassName('green').item(0)
.style.backgroundColor = 'green';
//支持多个class 属性值
let large = document.getElementsByClassName('coral large')[0];
large.style.backgroundColor = 'coral';
large.style.fontSize = '1.5rem';
</script>
</body>
</html>说明：根据元素的class属性值获取元素使用的是 document.getElementsByClassName(),返回一个html元素集合,与根据标签名获取的返回数据类型完全一样。
五、demo5.html 根据css选择器来获取元素:
<!DOCTYPE html>
<html>
<head>
<title>根据css选择器来获取元素</title>
</head>
<body>
<ul id="ul">
<li class="red">列表项01</li>
<li>列表项02</li>
<li class="green">列表项03</li>
<li class="green">列表项04</li>
<li class="coral large">列表项05</li>
</ul>
</body>
<script>
//我们选择页面元素的时候,大多使用css选择器来获取元素,例如
// .red 获取 class="red"的元素,其实js也支持使用css选择器获取元素
let lists = document.querySelectorAll('li');
console.log(lists);
lists[0].style.backgroundColor = 'coral';
lists.item(1).style.backgroundColor = 'lightblue';
//该方法还可以在元素上调用,这也根据标签和class类名获取元素是一样的
let ul = document.querySelector('#ul'); //获取满足条件的第一个元素
console.log(ul);
let li = ul.querySelectorAll('.green');
for (let i = 0;i < li.length; i++){
li[i].style.backgroundColor = 'green';
}
</script>
</html>说明：根据css选择器来获取元素使用的是document.querySelectorAll(),我们选择页面元素的时候,大多使用css选择器来获取元素。
六、demo7.html 在线***聊天的实例：
<!DOCTYPE html>
<html>
<head>
<title>在线机器人</title>
<meta charset="utf-8">
</head>
<style type="text/css">
div:nth-child(1) {
margin: auto;
width: 450px;
height: 600px;
background-color:skyblue;
box-shadow: 2px 2px 2px black;
border-radius: 5%;
}
h2 {
text-align: center;
margin-top: 40px;
padding-top: 15px;
font-family: 楷体;
margin-bottom: 10px;
}
div:nth-child(2) {
width: 400px;
height: 420px;
margin: auto;
background-color: #eeeeee;
border:4px double green;
border-radius: 5% 5% 0 0;
}
ul {
list-style: none;
line-height: 1.5rem;
padding: 20px;
overflow: hidden;
}
table {
margin-top: 7px;
margin-left: 20px;
}
textarea {
resize: none;
}
</style>
<body>
<div>
<h2>***中心</h2>
<div>
<ul>
</ul>
</div>
<table>
<tr>
<td align="right"><textarea name="text" cols="48" rows="6"></textarea> </td>
<td align="left"><button>发送</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
let btn = document.getElementsByTagName('button')[0];
let text = document.getElementsByName('text')[0];
let list = document.getElementsByTagName('ul')[0];
let sum = 0;
btn.onclick = function () {
if (text.value.length === 0) {
alert('请输入内容...');
return false;
}
let user = text.value;
text.avlue = '';
let li = document.createElement('li');
li.innerHTML = user;
let userPic = '<img src="inc/2.jpg" width="30" height="30" style="border-radius:50%;">';
li.innerHTML = userPic+' '+user;
list.appendChild(li);
text.value = '';
sum += 1;
setTimeout(function(){
let info = [
'你好，请问有什么可以帮你的么？',
'你的问题已经在处理了',
'我们将尽快为你安排***',
'对不起，您的问题我们无法帮您解决',
'很高兴为您服务'
];
let temp = info[Math.floor(Math.random()*3)];
let reply = document.createElement('li');
let kefuPic = '<img src="inc/5.jpg" width="30" height="30" style="border-radius:50%;">';
reply.innerHTML = kefuPic+' '+'<span style="color:red">'+temp+'</span>';
list.appendChild(reply);
sum += 1;
},2000)
if(sum > 10) {
list.innerHTML = '';
sum = 0;
}
}
</script>
</body>
</html>说明：案例主要结合今天所学内容，包括以往所学习的内容，完成了一个类似***聊天的窗口，其中使用了页面元素的获取方式，还有点击事件的添加，还有css样式的编写和新节点的创建，在新节点中添加文本的方法以及如何将新节点插入到页面文档中，还使用了设置定时器的方法。
