![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：完成的很好, 没什么问题, 继续加油
Collection
Collection
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>二个获取元素的api</title></head><body><ul class="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li></ul><script>// 获取一组: querySelectorAll()// 取一个: querySelector()// 1. querySelectorAll: 集合// 获取list下面的所有liconst items = document.querySelectorAll('.list > *')// items 类数组 不是一个真正的数组items.forEach(item => (item.style.color = 'red'))// 2. querySelector(): 集合中的第一个// 匹配满足条件的集合的第一个元素, 类似于idconst item = document.querySelector('.list > *')console.log(item)</script></body></html>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>dom常用的遍历方法</title></head><body><ul class="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li></ul><script>let list = document.querySelector('.list')console.log(list.nodeType)//1. 获取所有的子节点: childNodeslet items = list.childNodesconsole.log(items)// 为什么是13个,因为有7个文本类型节点,6个元素类型节点// 1. Array.from items是类数组，转为真正的数组console.log(Array.from(items))// 转为数组之后,Array很多API都可以用// 要求只返回“元素类型的节点”let result = [...items].filter(item => item.nodeType === 1)console.log(result)// 2. children : 获取所有子元素节点console.log(list.children)// children术语类数组// 3. 获取第二个子元素文本内容// ele.textContent: 元素内的文本console.log(list.children[1].textContent)// 4. 后一个兄弟let next =list.querySelector(':first-child + *')next.style.color = 'green'// 5. 最后一个let last = list.lastElementChildlast.style.color = 'red'// 6. 最后一个元素的前一个let prev = last.previousElementSiblingprev.style.border = '2px solid'// 7. 遍历;[...list.children].forEach(item => (item.style.border = '2px solid green'))</script></body></html>