1 , 实例演示 id,class,标签和css选择器获取元素的方法
实例ID选择法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM中页面元素的选择方法</title>
<style>
table,tr,th,td{
border: 1px solid #000;
border-collapse: collapse;
}
table {
width: 400px;
height: 200px;
text-align: center;
}
</style>
</head>
<body>
<h2>id选择法</h2>
<form>
<table id="table">
<tr id="title">
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>工资</th>
</tr>
<tr>
<td id="001">001</td>
<td>马小乖</td>
<td>18</td>
<td>3800</td>
</tr>
<tr>
<td id="002">002</td>
<td>江流儿</td>
<td>23</td>
<td>5800</td>
</tr>
<tr>
<td id="003">003</td>
<td>燕南天</td>
<td>40</td>
<td>19800</td>
</tr>
</table>
<script>
let idt = document.getElementById('table');
let idti = document.getElementById('title');
idt.style.backgroundColor = 'skyblue';
idti.style.backgroundColor = 'yellow';
function getIds() {
let Ids = {};
for(let i = 0;i <arguments.length;i++){
let id = arguments[i];
let ids = document.getElementById(id);
if (ids === null) {
throw new Error('No Element with id' + id);
}
Ids[id] = ids;
}
return Ids;
}
let Ids = getIds('001','002','003');
for (let key in Ids) {
Ids[key].style.backgroundColor = 'coral';
}
</script>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例CLASS选择法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM中页面元素的选择方法</title>
<style>
table,tr,th,td{
border: 1px solid #000;
border-collapse: collapse;
}
table {
width: 400px;
height: 200px;
text-align: center;
}
</style>
</head>
<body>
<h2>class选择法</h2>
<form>
<table id="table">
<tr id="title">
<th>ID</th>
<th class="xm">姓名</th>
<th>年龄</th>
<th>工资</th>
</tr>
<tr>
<td id="001">001</td>
<td class="mxg">马小乖</td>
<td>18</td>
<td>3800</td>
</tr>
<tr>
<td id="002">002</td>
<td class="jle">江流儿</td>
<td>23</td>
<td>5800</td>
</tr>
<tr class="tr">
<td id="003">003</td>
<td class="ynt">燕南天</td>
<td>40</td>
<td>19800</td>
</tr>
</table>
<script>
let xm = document.getElementsByClassName('xm')[0];
// console.log(xm);
xm.style.backgroundColor = 'green';
document.getElementsByClassName('mxg').item(0)
.style.backgroundColor = 'red';
let jle = document.getElementsByClassName('jle').item(0);
jle.style.backgroundColor = 'coral';
let tr = document.getElementsByClassName('tr').item(0);
console.log(tr);
tr.style.backgroundColor = 'blue';
tr.style.fontSize = '1.5rem';
document.getElementsByClassName('ynt').item(0)
.style.backgroundColor = 'red';
</script>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例Tag选择法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM中页面元素的选择方法</title>
<style>
table,tr,th,td{
border: 1px solid #000;
border-collapse: collapse;
}
table {
width: 400px;
height: 200px;
text-align: center;
}
</style>
</head>
<body>
<h2>Tag选择法</h2>
<form>
<table id="table">
<tr id="title">
<th>ID</th>
<th class="xm">姓名</th>
<th>年龄</th>
<th>工资</th>
</tr>
<tr>
<td id="001">001</td>
<td class="mxg">马小乖</td>
<td>18</td>
<td>3800</td>
</tr>
<tr>
<td id="002">002</td>
<td class="jle">江流儿</td>
<td>23</td>
<td>5800</td>
</tr>
<tr class="tr">
<td id="003">003</td>
<td class="ynt">燕南天</td>
<td>40</td>
<td>19800</td>
</tr>
</table>
<script>
let h2 = document.getElementsByTagName('h2')[0];
h2.style.color = 'red';
let table = document.getElementsByTagName('table').item(0);
table.style.backgroundColor = 'lightblue';
let ths = document.getElementsByTagName('th');
console.log(ths);
for (let i = 0; i<ths.length; i++){
ths[i].style.backgroundColor = 'lightpink';
}
let tdend = table.getElementsByTagName('tr').item(3);
tdend.style.backgroundColor = 'yellow';
</script>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例CSS选择法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM中页面元素的选择方法</title>
<style>
table,tr,th,td{
border: 1px solid #000;
border-collapse: collapse;
}
table {
width: 400px;
height: 200px;
text-align: center;
}
</style>
</head>
<body>
<h2>CSS选择法</h2>
<form>
<table id="table">
<tr id="title">
<th>ID</th>
<th class="xm">姓名</th>
<th>年龄</th>
<th>工资</th>
</tr>
<tr>
<td id="001">001</td>
<td class="mxg">马小乖</td>
<td>18</td>
<td>3800</td>
</tr>
<tr>
<td id="002">002</td>
<td class="jle">江流儿</td>
<td>23</td>
<td>5800</td>
</tr>
<tr class="tr">
<td id="end">003</td>
<td class="ynt">燕南天</td>
<td class="ynt">40</td>
<td class="ynt">19800</td>
</tr>
</table>
<script>
let trs = document.querySelectorAll('tr');
console.log(trs);
trs.item(0).style.backgroundColor = 'lightblue';
trs.item(1).style.backgroundColor = 'grey';
trs.item(2).style.backgroundColor = 'red';
let trend = document.querySelector('.tr');
console.log(trend);
let td1 = trend.querySelector('#end');
td1.style.backgroundColor = 'yellow';
let td2 = trend.querySelectorAll('.ynt');
for (let i = 0;i < td2.length;i++){
td2[i].style.backgroundColor = 'pink';
}
</script>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2 , 实战: 在线聊天机器人
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线某服</title>
<style>
div:nth-child(1){
width: 400px;
height: 500px;
/*background-color: lightsalmon;*/
color: #333333;
box-shadow: 1px 1px 1px #808080;
border: 1px solid grey;
}
div:nth-child(2){
width: 400px;
height: 100px;
/*background-color: lightyellow;*/
/*box-shadow: 2px 2px 2px #808080;*/
border: 1px solid grey;
border-top: 0;
}
textarea {
margin-left: 1px;
width: 395px;
height: 68px;
overflow: auto;
border: none;
resize: none;
}
.text:focus {
/*border: 0;*/
outline: none;
}
.button {
/*border: none;*/
margin-left: 285px;
}
button {
margin-right: 10px;
}
button:hover{
cursor: pointer;
background-color: lightcoral;
}
ul{
margin-top: 10px;
list-style: none;
line-height: 1.5rem;
overflow: hidden;
padding: 15px;
}
h3 {
margin: 0;
text-align: center;
}
</style>
</head>
<body>
<div>
<div>
<h3>在线某服</h3>
<ul>
<li></li>
</ul>
</div>
<div>
<textarea class="text" cols="50" rows="5"></textarea>
<script >
document.getElementsByTagName('textarea')[0].focus();
</script>
<button type="button" class="button">关闭</button>
<button type="button" class="button1">发送</button>
</div>
</div>
<script >
let button = document.getElementsByClassName('button1')[0];
let text = document.getElementsByClassName('text')[0];
let list = document.getElementsByTagName('ul')[0];
let sum = 0;
button.onclick = function () {
if (text.value.length ===0){
alert('你写啥我能看见？你特么在逗我？！');
return false;
}
let userComment = text.value;
text.value = '';
let li = document.createElement('li');
li.innerHTML = userComment;
let userPic = '<img src="inc/gyy.jpg" width="30" style="border-radius: 50%">';
li.innerHTML = userPic + '' +userComment;
list.appendChild(li);
sum += 1;
setTimeout(function () {
let info = [
'你有啥事儿呀，跟姐说，姐帮你~',
'除了退货、退钱，都可以商量！',
'快点说，别墨迹，老娘还要刷抖音',
'忙着呢，等姐空了再回复你吧。。。',
'好的，约呀，你在哪里？'
];
let temp = info[Math.floor(Math.random()*4)];
let reply = document.createElement('li');
let kefuPic = '<img src="inc/sl.jpg" width="30" style="border-radius: 50%">';
reply.innerHTML = kefuPic + '' + '<span style="color: red">' + temp + '</span>';
list.appendChild(reply);
sum +=1;
},2000);
if (sum > 11){
list.innerHTML = '';
sum = 0;
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
说明：实现了1、自动获取文本焦点；实现了2、reply自动回复；实现了3、简约风格；