收藏
PHPz批改状态：合格
老师批语：
我们先来看一个案例：
<!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>获取表单元素</title><style>.login {width: 15em;border: 1px solid #888;border-radius: 0.5em;box-shadow: 5px 5px 5px #888;display: grid;grid-template-columns: 3em 1fr;gap: 0.5em 1em;}.login legend {padding: 0 0.5em;text-align: center;margin-bottom: 0.5em;font-weight: bolder;}.login button {grid-column: 2;}.login button:hover {cursor: pointer;background-color: lightcyan;}</style></head><body><form action="login.php" method="post" id="login"><fieldset class="login"><legend>登录页面</legend><label for="username">账号:</label><inputtype="text"name="username"id="username"value="3448137167@qq.com"autofocus/><label for="password">密码:</label><input type="password" name="password" id="password" value="" /><button>login</button></fieldset></form></body></html>
这是一个表单，那么我们怎样去获取表单里的元素呢？传统方法我们用 querySelector/querySelectorALl 来获取
例如：
<script>const form = document.querySelector("#login");console.log(form);const username = form.querySelector("#username").value;console.log(username);</script>
我们来看下推荐的方式获取表单里的元素
示例：
<script>const login = document.forms.login;const username = login.username.value;const password = login.password.value;const userinfo = { username: username, password: password };console.log(userinfo);// 提交到服务器端/后端：jsonconst data = JSON.stringify(userinfo);console.log(data);</script>
<!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 class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li></ul><script>// 获取所有节点类型let ul = document.querySelector(".list").childNodes;// console.log(ul);// 获取元素节点类型ul = document.querySelector(".list").children;console.log(ul);</script></body></html>
由于获取到的节点是一个类数组（类似数组，但是不是真正的数组，所以不能用数组上的办法），我们要把他转化成一个真正的数组
示例：
<script>// 获取所有节点类型let ul = document.querySelector(".list").childNodes;// console.log(ul);// 获取元素节点类型let ul_li = document.querySelector(".list").children;// console.log(ul_li);// 方法1ul_li = Array.from(ul_li);// console.log(ul_li);// 方法2ul_li = [...ul_li];console.log(ul_li);</script>
<!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 class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li></ul><script>// 获取所有节点类型let ul = document.querySelector(".list");// console.log(ul);// 获取元素节点类型let ul_li = document.querySelector(".list").children;// console.log(ul_li);// 方法1ul_li = Array.from(ul_li);// console.log(ul_li);// 方法2ul_li = [...ul_li];console.log(ul_li);// 第一个firstElementChildul.firstElementChild.style.background = "red";// 下一个nextElementSiblingul.firstElementChild.nextElementSibling.style.background = "blue";// 前一个previousElementSiblingul.lastElementChild.previousElementSibling.style.background = "green";// 最后一个lastElementChildul.lastElementChild.style.background = "wheat";// 父节点parentElementul.lastElementChild.parentElement.style.border = "3px solid red";</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><script>// 1.创建元素const ul = document.createElement("ul");// 添加元素到html页面中document.body.append(ul);// 在ul内插入5个lifor (let i = 1; i <= 5; i++) {const li = document.createElement("li");li.textContent = `item${i}`;ul.append(li);}// 我们在第三个节点之前插入一个全新的liconst new_li = document.createElement("li");new_li.textContent = "new li";new_li.style.color = "red";const three = document.querySelector("ul>li:nth-of-type(3)");three.before(new_li);// 克隆一个新的节点插入到第三个li后const new_li_copy = new_li.cloneNode(true);// 插入第三个li后;three.after(new_li_copy);// 在父节点的标签为插入点，进行插入元素// 给ul加个边框ul.style.border = "4px dashed red";const h3 = document.createElement("h3");h3.textContent = "购物车";ul.insertAdjacentElement("beforeBegin", h3);const p = document.createElement("p");const num = document.querySelectorAll("ul>li").length;p.textContent = `总共: ${num} 件`;ul.insertAdjacentElement("afterEnd", p);// 替换// 先找到ul下最后一个元素const last = document.querySelector("ul>li:last-of-type");// 创建一个新元素a标签const a = document.createElement("a");a.href = "http://www.php.cn";a.textContent = "php.cn";// 用a标签替换最后一个li;ul.replaceChild(a, last);// 我们再把这个a标签给移除了ul.lastElementChild.remove();</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>js操作元素内容</title></head><body><div class="box"><style>h2 {color: red;}</style><h2>通知</h2><span style="display: none">试用期员工不参加</span><p>今天下午17:00开会，开发部，运营部全体参加~~</p></div><script>const box = document.querySelector(".box");//返回元素以及后代元素中所有文本内容，包括<style>,display:none的内容console.log(box.textContent);// innerText：返回元素以及后代中的文本console.log(box.innerText);// innerHTML：返回内部的html字符串console.log(box.innerHTML);// 添加个p标签// 先创建个pconst p = document.createElement("p");p.textContent = '<a href="https://www.php.cn/"></a>';box.append(p);const newp = p.cloneNode(true);newp.innerHTML = '<a href="https://www.php.cn/">php.cn</a>';box.append(newp);// 替换// box.outerHTML = '<a href="https://www.php.cn/">php.cn</a>';//删除清空box.outerHTML = null;</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>留言板实战</title><style>input {width: 30em;height: 10em;}</style></head><body><inputtype="text"onkeydown="addMsg(this)"placeholder="请输入留言内容，回车键确认留言"autofocus/><ul class="list"></ul><script>function addMsg(key) {if (event.key === "Enter") {// 1.获取留言列表的容器const ul = document.querySelector(".list");// 2.判断留言是否为空if (key.value.length === 0) {alert("留言内容不能为空");key.focus();return false;} else {// 3.添加一条新留言const li = document.createElement("li");li.innerHTML =key.value +' <button onclick="Del(this.parentNode)">删除该留言</button>';li.style.color = "red";ul.insertAdjacentElement("afterBegin", li);// 4.清空留言的输入框，为下一个做准备key.value = "";// 5.重置焦点到留言框中，方便用户再次输入key.focus();return true;}}}// 删除留言function Del(li) {// 方案1a// li.remove();// 方案2// li.outerHTML = null;return confirm("是否确认删除") ? li.remove() : false;}</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>自定义属性: dataset对象</title></head><body><!--* 元素属性有二类:* 1. 内置的预定义属性, 如 id, class,title,style等* 2. 用户自定义属性,主要用于js脚本控制, 以 "data-""为前缀,如 data-key--><div class="btn-group"><!-- onclick: 内置/预定义事件属性 --><!-- data-index: 自定义属性 --><button data-index="1" onclick="getIndex(this)">btn1</button><button data-index="2" onclick="getIndex(this)">btn2</button><button data-index="3" onclick="getIndex(this)">btn3</button></div><!-- 自定义属性还可以将一些数据保存到标签中 --><!-- data-emial, data-work-unit --><div class="user" data-email="123456@qq.com" data-work-unit="php中文网">Mr.fu</div><script>function getIndex(btn) {// 通过自定义属性data-index的值,知道我点的是哪一个?// dataset.prop, "data-"一定要省略掉console.log("点击了第 ", btn.dataset.index, " 个按钮");}const user = document.querySelector(".user");console.log(user.dataset.email);// work-unit ==> workUnitconsole.log(user.dataset.workUnit);// dataset 可读可写user.dataset.workUnit = "php.cn";console.log(user.dataset.workUnit);</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>js操作css</title><style>.red {color: red;}.bgc {background-color: yellow;}.blue {color: blue;}.bd {border: 5px solid #000;}.box {width: 100px;height: 200px;}</style></head><body><div class="box">hello word</div><script>const box = document.querySelector("div");// 添加class标签box.classList.add("red");box.classList.add("bd");box.classList.add("bgc");// 判断是否有这个classconsole.log(box.classList.contains("bgc"));// 移除classbox.classList.remove("bd");// 替换classbox.classList.replace("red", "blue");// 切换box.classList.toggle("bd");// 取出宽高const width = window.getComputedStyle(box).width;const hight = window.getComputedStyle(box).hight;// 修改宽度box.style.width = `${parseInt(width) + 200}px`;</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>Document</title></head><body><button>1</button><button>2</button><button>3</button></body><script>const btn1 = document.querySelector("button:first-of-type");const btn2 = document.querySelector("button:nth-of-type(2)");const btn3 = document.querySelector("button:last-of-type");// 给btn1添加事件btn1.onclick = () => console.log("事件添加成功");// btn1事件移除btn1.onclick = null;// 给bt2添加事件监听器// 先给个监听到事件后要执行的回调clg = () => console.log("事件监听成功");// 添加监听事件btn2.addEventListener("click", clg, false);// 移除监听事件btn2.removeEventListener("click", clg, false);// 派发事件// 先添加一个监听事件let i = 0.0;btn3.addEventListener("click",() => {console.log("恭喜你,又赚了 : " + i + "元");i += 0.8;},false);// 创建一个自定义事件const myclick = new Event("click");// btn3.dispatchEvent(myclick);// btn3.dispatchEvent(myclick);// btn3.dispatchEvent(myclick);// btn3.dispatchEvent(myclick);// btn3.dispatchEvent(myclick);// btn3.dispatchEvent(myclick);// setTimeout()一次性定时器// setTimeout(() => btn3.dispatchEvent(myclick), 2000);// setInterval: 间歇式的定时器setInterval(() => btn3.dispatchEvent(myclick), 2000);</script></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
