![[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
const items = document.querySelectorAll('.list>li')console.log(items);const item = document.querySelector('.list>li')console.log(item);
运行结果：
NodeList(6) [li#name, li#name, li, li, li, li]<li id="name" style="color: red;">::marker"item1"</li>
console.log(document.body);console.log(document.head);console.log(document.title);// htmlconsole.log(document.documentElement);console.log(document.URL);
运行结果：
<body>…</body><head>…</head>dom操作-获取DOM元素<html lang="zh-CN"><head>…</head><body>…</body></html>http://127.0.0.1:5500/Javascript/0327-1.html
const list = document.querySelector('.list')let items = list.childNodes // 获得所有类型节点items = [...items].filter(item=>item.nodeType==1)//节点类型为1为元素，3为文本items = list.children //与上面等效，更简单console.log(items);// 获取元素console.log(list.firstElementChild.textContent);console.log(list.lastElementChild.textContent);console.log(items[items.length-1].textContent);let four = document.querySelector('.list :nth-child(4)')console.log(four.textContent);console.log(four.previousElementSibling.textContent);console.log(four.nextElementSibling.textContent);// 父节点let parent = four.parentElementconsole.log(parent);
运行结果：
HTMLCollection(6) [li, li, li, li, li, li]item1item6item6item4item3item5<ul class="list">…</ul>
// 创建const ul = document.createElement('ul')// 添加document.body.append(ul)for(let i=0; i<6;i++){const li = document.createElement('li')li.append('item-'+(i+1))ul.append(li)}// 优化，先添加到片段，再统一添加到网页const frag = document.createElement('ul')document.body.append(ul)for(let i=0; i<6;i++){const li = document.createElement('li')li.append('item-'+(i+1))frag.append(li)}ul.append(frag)// afterconst three = ul.querySelector(':nth-child(3)')let li = document.createElement('li')li.append('新的<li>')three.after(li)// 克隆ul.append(li.cloneNode(true))
运行结果：
item-1item-2item-3新的<li>item-4item-5item-6item-1item-2item-3item-4item-5item-6新的<li>
有些问题不理解，form.uname.value和document.forms.login.email.value的效果是一样，为什么要用复杂的方法？