收藏
PHPz批改状态：合格
老师批语：
<!DOCTYPE html><html lang="en"><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><style>* {margin: 0;padding: 0;box-sizing: border-box;list-style: none;text-decoration: none;font-size: 1.5rem;font-weight: bold;}html {font-size: 16px;}fieldset {width: 400px;height: 200px;/* position: absolute; */margin: 1rem auto;box-shadow: 0.1rem 0.2rem 0.6rem #888;border-radius: 1.8rem 0rem 1.8rem 0;background: linear-gradient(to bottom, lightgreen, white);}fieldset legend {border-radius: 1.8rem 0rem 1.8rem 0;text-align: center;border: 1px solid gray;padding: 0.8rem;background: linear-gradient(to top, red, white);color: white;font-style: italic;}.item {margin-left: 1rem;margin-top: 1rem;}.item input {margin-left: 2rem;width: 250px;border: none;background: none;border-bottom: 1px solid gray;}button {margin-top: 15px;margin-left: 150px;}</style></head><body><!-- 1. 自定义类数组(伪数组),并说出与纯数组的区别与联系,哪些地方会用到类数组2. 获取dom元素的API有几个,他们的使用场景是什么?3. 如何优雅的获取form表单元素与控件的值?4. dom元素的遍历与常用API有哪些, 实例演示 --><script>//纯数组/真数组//1.每个值都对应一个键名，键名是从0开始递增且是正整数，如0,1,2,3...//2.有个length属性，表示数组长度//3.prototype是Arrayconst colors = ["red", "orange", "blue", "green"];console.log(colors);// console.log(colors instanceof Array); //true// console.log(colors instanceof Object); //true// console.log(colors.pop());//类数组/伪数组const animals = {0: "dog",1: "cat",2: "pig",length: 3,};console.log(animals);// console.log(animals.pop());//类数组不具备数组的原型方法，不可以调用相关数组方法</script><ul class="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li><li class="item">item6</li></ul><script>//dom元素的API有querySelector()和 querySelectorAll()//querySelector()获取的是单个元素const item = document.querySelector("ul li:nth-of-type(3)");console.log(item); //原型是HTMLElementitem.style.color = "red";//querySelectorAll()获取的是一组无素，返回类数组const items = document.querySelectorAll("ul .item:nth-last-of-type(-n +2)");console.log(items);//forEach(回调函数)遍历//function(当前正在遍历的值，当前值对应的索引)// items.forEach(function (v, k) {// v.style.color = "blue";// });//简写items.forEach((v, k) => (v.style.color = "blue"));//for of 遍历for (let v of items.values()) {console.log(v);}</script><form action="" method="dialog"><fieldset><legend>用户登录</legend><div class="item"><div class="item1"><label for="email">邮箱:</label><input type="email" name="email" id="email" value="jdd@22.cm" placeholder="填写邮箱" /></div><div class="item2"><label for="password">密码:</label><input type="password" name="password" id="password" value="222" placeholder="输入密码" /></div></div><button>提交</button></fieldset></form><script>//获取form表单元素与控件值//获取当前页的所有表单数据//forms[0],获取第一个表单数据const value = document.forms[0];console.log(value);const form = document.querySelector("form");console.log(form);//获取email元素console.log(document.forms[0].email);//获取email元素的值let email = document.forms[0].email.value;//获取password元素console.log(document.forms[0].password);//获取password元素的值let password = document.forms[0].password.value;let userInfo = { email, password };console.log(JSON.stringify(userInfo));</script><script>//4. dom元素的遍历与常用API有哪些, 实例演示// 节点类型// windows:全局对象// document:文档对象,就是当前的html文件// element:元素对象.// text:文件对象let ul = document.querySelector(".list");console.log(ul);//获取ul下的所有节点console.log(ul.childNodes);//获取ul下的标签节点ul.childNodes.forEach((node) => {if (node.nodeType == 1) {console.log(node);}});//只返回元素类型节点console.log(ul.children);//将类数组转为纯数组1console.log(Array.from(ul.children));//将类数组转为纯数组2console.log([...ul.children]);//ul下的第一个节点ul.firstElementChild.style.backgroundColor = "red";//ul下的第一个节点,的下一个节点ul.firstElementChild.nextElementSibling.style.backgroundColor = "orange";//ul下的最后一个节点，的前一个节点ul.lastElementChild.previousElementSibling.style.backgroundColor = "purple";//ul下的最后一个节点ul.lastElementChild.style.backgroundColor = "pink";</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
