收藏
PHPz批改狀態(tài)：合格
老師批語：完成的很好, 繼續(xù)加油
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>11.7作業(yè)</title><!-- 作業(yè)內(nèi)容：1. 實(shí)例演示二個(gè)獲取元素的api2. 實(shí)例演示dom常用的遍歷方法--></head><body><h3>1. 實(shí)例演示二個(gè)獲取元素的api</h3><div class="list"><li>item-1</li><li>item-2</li><li>item-3</li><li>item-4</li><li>item-5</li></div><h3> 2. 實(shí)例演示dom常用的遍歷方法</h3><pre>[...類數(shù)組] 轉(zhuǎn)為數(shù)組forEach遍歷</pre><script>// 獲取第3個(gè)元素的文本let list3 = document.querySelector(".list>li:nth-of-type(3)");console.log('獲取第3個(gè)元素: '+list3.textContent)// 獲取第1個(gè)元素 firstElementChild的文本let list1 = document.querySelector('.list>li:first-child');// textContent 獲取該元素的文本console.log('獲取第1個(gè)元素: '+list1.textContent)// 獲取最后一個(gè)元素的文本let last = document.querySelector('.list>li:last-of-type')console.log('獲取最后一個(gè)元素: '+last.textContent)// 2. 實(shí)例演示dom常用的遍歷方法let arr = document.querySelector('.list')// 獲取所有的子節(jié)點(diǎn) childNodes// 注意：childNodes會(huì)包含空格換行等console.log("childNodes會(huì)包含空格換行",arr.childNodes)// 獲取所有的元素節(jié)點(diǎn)console.log('獲取所有的元素節(jié)點(diǎn)',arr.children)// 遍歷// 遍歷的每個(gè)li 的顏色設(shè)置為藍(lán)色;[...arr.children].forEach(function (li){li.style.color='blue'})// 打印每個(gè)li出來;[...arr.children].forEach(function (li){console.log('打印遍歷出來的li：',li.textContent)})// console.log(typeof [...arr.children])</script></body></html>
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)