![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：dom,api众多,再多查阅mdn
Collection
Collection
<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>// $("body"): jQuery 用这个语法来获取'body'元素let $ = selector => document.querySelector(selector);console.log($);console.log($("body"));// 设置 body 的背景颜色$('body').style.background = "lightcyan";</script></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>// 获取满足条件的元素的集合const items = document.querySelectorAll(".list .item");// NodeList: 类数组// 遍历 items 元素// NodeList有一个forEach()接口// item: 正在遍历的当前元素,必选// index: 当前元素的索引// items: 当前遍历的数组对象items.forEach(function (item, index, items) {console.log(item, index, items);});// 使用箭头函数简化，以后这个语法使用更多items.forEach(item => console.log(item));// 思考：如何获取第一个满足条件的元素？let firstItem = items[0];console.log(firstItem);firstItem.style.background = "lightgreen";</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></ul><script>// 获取满足条件的元素集合中的第一个元素firstItem = document.querySelector(".list .item");console.log(firstItem);firstItem.style.background = "green";// querySelector()总是返回唯一元素，常用于 id// querySelectorAll, querySelector, 也可以用在元素上let list = document.querySelector(".list");let items = list.querySelectorAll(".item");console.log(items);// NodeList它自了一个迭代器接口, for-of 进行遍历for (let item of items) {console.log(item);}// 以下传统方式, es6 以后不推荐使用// document.getElementById()// document.getElementsByTagName()// document.getElementsByName()// document.getElementsByClassName()</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></ul><form action="" name="hello" id="login"><input type="email" placeholder="demo@email.com" /><button>提交</button></form><script>// 快速获取一些特定的元素// bodyconsole.log(document.body);// headconsole.log(document.head);// titleconsole.log(document.title);// htmlconsole.log(document.documentElement);//formsconsole.log(document.forms);console.log(document.forms[0]);// <form action="" name="hello" id="login">console.log(document.forms["hello"]);console.log(document.forms["login"]);console.log(document.forms.item(0));console.log(document.forms.item("hello"));console.log(document.forms.item("login"));console.log(document.forms.namedItem("hello"));// forms.id// 推荐用id,因为id方便添加样式console.log(document.forms.login);console.log(document.forms.hello);</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树中的所有内容都是:节点// 节点是有类型的: 元素,文本,文档,属性..let nodes = document.querySelector(".list");console.log(nodes.childNodes);// 通常只关注元素类型的节点console.log(nodes.children);let eles = nodes.children;// 遍历// 将类数组转为真正的数组类型console.log([...eles]);[...eles].forEach(ele => console.log(ele));// 获取第一个let firstItem = eles[0];firstItem.style.background = "yellow";// 最后一个// let lastItem = eles[4];let lastItemIndex = eles.length - 1;let lastItem = eles[lastItemIndex];lastItem.style.background = "lightblue";</script>
firstElementChild 获取第一个lastElementChild 获取最后一个
<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>// js提供一些快捷方式来获取第一个和最后一个const list = document.querySelector(".list");firstItem = list.firstElementChild;firstItem.style.background = "seagreen";lastItem = list.lastElementChild;lastItem.style.background = "yellow";console.log(eles.length);console.log(list.childElementCount);</script>
nextElementSibling 下一个兄弟节点previousElementSibling 前一个兄弟节点
<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>// 如何想获取第二个元素怎么办?// 第二个元素就是第一个元素的下一个兄弟节点let secondItem = firstItem.nextElementSibling;secondItem.style.background = "red";// 获取第5个, 是最后一个元素的前一个兄弟节点let fiveItem = lastItem.previousElementSibling;fiveItem.style.background = "cyan";</script>
// 创建dom元素let div = document.createElement("div");let span = document.createElement("span");span.textContent = "hello";// append(ele,'text'),将参数做为父元素的最后一个子元素追加到列表中,无返回值// span 添加到 div中// div.append(span);// 将 span,"world"，添加到 div中div.append(span, " world");// 方式一： 将 div 添加到页面document.body.append(div);console.log(div)// 方式二：将 span, " world" 添加到页面// document.body.append(span, " world");// console.log(div)
// 为什么div中的span消失了?// 新元素span只能插入到一个地方;span在div,现在span在body中,相当于剪切操作// 如果想保留span在div中,要克隆span// cloneNode(true), true: 是完整的保留元素内部结构document.body.append(span.cloneNode(true), " world");
效果如图：
append():在尾部追加prepend():在头部追加before():在参考点之前添加一个新节点after():在参考点之后添加一个新节点replaceWith():替换元素remove(无参数):删除元素afterBegin: 开始标签之后,第一个子元素beforeBegin: 开始标签之前,是它的前一个兄弟元素afterEnd: 结束标签之后,它的下一个兄弟元素beforeEnd: 结束标签之前,它的最后一个子元素
// append()创建一个列表const ul = document.createElement("ul");// 循环来生成多个列表项 lifor (let i = 1; i <= 5; i++) {let li = document.createElement("li");li.textContent = `item${i}`;ul.append(li);}document.body.append(ul);// append():在尾部追加// prepend():在头部追加li = document.createElement("li");li.textContent = "first item";li.style.color = "red";ul.prepend(li);// 如果想在除了头尾之外的地方添加怎么操作?// 必须要有一个参考节点的位置,否则就不知道要添加到哪个节点的前面或后面// 以第四个节点为参考const referNode = document.querySelector("li:nth-of-type(4)");referNode.style.background = "cyan";// 在它之前添加一个新节点li = document.createElement("li");li.textContent = "在参考节点之前插入";li.style.background = "yellow";// referNode.before(el),在插入位置(参考节点)上调用referNode.before(li);// 在它之后添加一个新节点li = document.createElement("li");li.textContent = "在参考节点之后插入";li.style.background = "violet";// referNode.after(el),在插入位置(参考节点)上调用referNode.after(li);// 替换节点// 将最后一个节点用链接替换let lastItem = document.querySelector("ul li:last-of-type");let a = document.createElement("a");a.textContent = "php中文网";a.href = "https://php.cn";lastItem.replaceWith(a);// 删除节点,在被删除的节点上直接调用// 将ul的第6个删除,remove(无参数)ul.querySelector(":nth-of-type(6)").remove();// 再介绍几个更牛的// insertAdjacentElement('插入位置', 元素)// 插入位置有四个// afterBegin: 开始标签之后,第一个子元素// beforeBegin: 开始标签之前,是它的前一个兄弟元素// afterEnd: 结束标签之后,它的下一个兄弟元素// beforeEnd: 结束标签之前,它的最后一个子元素// 插入第一个子元素之前(在起始标签之后);li = document.createElement("li");li.textContent = "第一个子元素";ul.insertAdjacentElement("afterbegin", li);ul.insertAdjacentElement("beforebegin", li);// 还有一个plus,可以直接使用html字符串当元素,省去了创建元素的过程// 追加到结尾ul.insertAdjacentHTML("beforeEnd", '<li style="color:red">最后一个子元素</li>');// 还可以直接插入文本const h2 = document.createElement("h2");h2.insertAdjacentText("beforeend", ul.lastElementChild.textContent);console.log(h2);document.body.insertAdjacentElement("afterend", h2);
