一、demo1.html,根據(jù)id獲取元素的方法:
收藏
<!DOCTYPE html>
<html>
<head>
<title>根據(jù)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來獲取元素，可以通過函數(shù)來簡化操作
function getElements () { // 參數(shù)是多個id字符串
let elements = {}; //創(chuàng)建一個空的map映射對象用來保存結(jié)果
for (let i = 0; i < arguments.length; i++){
let id = arguments[i]; //獲取到要查詢的每個id
let elt = document.getElementById(id);//根據(jù)id查找元素
if (elt === null) {
throw new Error("No element with id: " + id);
}
elements[id] = elt; // 將獲取到的元素存入到映射數(shù)據(jù)中
}
return elements; // 返回查詢到的元素(以對象字面量方式)
}
//獲取頁面上指定的id屬性的元素,返回一個關聯(lián)數(shù)組類型的對象,鍵名就是id的值
let elements = getElements('user','password');
for (let key in elements) {
elements[key].style.backgroundColor = 'coral';
}
</script>
</body>
</html>說明：根據(jù)id獲取元素的方法使用的是document.getElementById()，其中如果需要使用多個id來獲取元素，可以通過函數(shù)來簡化操作，在實際開發(fā)中可以提高開發(fā)效率。
二、demo2.html,根據(jù)name屬性獲取元素的方法:
<!DOCTYPE html>
<html>
<head>
<title>根據(jù)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節(jié)點列表,不只一個元素
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屬性更多的用于表單數(shù)據(jù)提交到服務器時,用來識別提交的內(nèi)容
</script>
</body>
</html>說明：根據(jù)name屬性獲取元素的方法使用的是document.getElementsByName()，值得注意是它返回是一個NodeList節(jié)點列表,不只一個元素。
三、demo3.html 根據(jù)標簽名Tag來獲取元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根據(jù)標簽名Tag來獲取元素</title>
</head>
<body>
<ul>
<li>列表項01</li>
<li>列表項02</li>
<li>列表項03</li>
<li>列表項04</li>
<li>列表項05</li>
</ul>
<script>
//getElementsByTagName(),根據(jù)標簽名稱獲取元素,返回一個元素集合,有l(wèi)ength屬性,可以當數(shù)組來訪問
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); // 在父元素上調(diào)用該方法,獲取ul中的第二個列表項
item2.style.backgroundColor = 'green';
</script>
</body>
</html>說明：根據(jù)標簽名Tag來獲取元素使用的是document.getElementsByTagName(），同樣的，它返回一個元素集合,有l(wèi)ength屬性,可以當數(shù)組來訪問。
四、demo4.html 根據(jù)元素的class屬性值獲取元素:
<!DOCTYPE html>
<html>
<head>
<title>根據(jù)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>
//根據(jù)元素的class屬性值獲取元素
let red = document.getElementsByClassName('red');
console.log(red); //返回一個html元素集合,與根據(jù)標簽名獲取的返回數(shù)據(jù)類型完全一樣
red[0].style.backgroundColor = 'red';
//該方法也支持在父元素上調(diào)用
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>說明：根據(jù)元素的class屬性值獲取元素使用的是 document.getElementsByClassName(),返回一個html元素集合,與根據(jù)標簽名獲取的返回數(shù)據(jù)類型完全一樣。
五、demo5.html 根據(jù)css選擇器來獲取元素:
<!DOCTYPE html>
<html>
<head>
<title>根據(jù)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';
//該方法還可以在元素上調(diào)用,這也根據(jù)標簽和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>說明：根據(jù)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>發(fā)送</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('請輸入內(nèi)容...');
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 = [
'你好，請問有什么可以幫你的么？',
'你的問題已經(jīng)在處理了',
'我們將盡快為你安排***',
'對不起，您的問題我們無法幫您解決',
'很高興為您服務'
];
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>說明：案例主要結(jié)合今天所學內(nèi)容，包括以往所學習的內(nèi)容，完成了一個類似***聊天的窗口，其中使用了頁面元素的獲取方式，還有點擊事件的添加，還有css樣式的編寫和新節(jié)點的創(chuàng)建，在新節(jié)點中添加文本的方法以及如何將新節(jié)點插入到頁面文檔中，還使用了設置定時器的方法。
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
