第五天的课
文章目录
类数组 NodeList
含义
-
类似数组，长得像数组，但它又不是数组，是对象。在 js 中，这种特殊的对象有一个专门的名称：类数组
-
三个特征：
-
- 有一个 length 属性
-
- 有递增的正整数索引
-
- 数组函数无法用于类数组，需要将类数组转化为数组–Array.form()和并归参数[…rest]
-
//创建类数组
const brand = {
0: "HUAWEI",
1: "APPLE",
2: "XIAOMI",
};
// 创建数组
const arr = [1, 2, 3];
// 使用数组函数push（）在数组尾部添加一个成员
arr.push(4);
console.log(arr);
//1,2,3,4
//数组函数push无法作用与类数组-对象
brand.push("ONEplus"); //brand.push is not a function
//将类数组转化为数组
let arr1 = Array.from(brand);
console.log(Array.isArray(arr1)); //true
arr1.push("ONEplus");
console.log(arr1); //['ONEplus']
// 使用归并参数，rest语法
let arr2 = [...brand];
快速获取 dom 元素
使用 query 语法来获取元素
- document.querySelector(“css 选择器”)
选取该类别的第一个 - document.querySelectorall(“css 选择器”)
选取该类别的所有集合
补：可以用在元素上
// 在html的body中设置 ul.list>li.item*5
//1.
let $ = (selector) => document.querySelector(selector);
console.log($);
//(selector) => document.querySelector(selector)
console.log($("body"));
// <body>...</body>
//2.
const items = document.querySelectorAll(".list.item");
console.log(items);
// NodeList(6) [li.item, li.item, li.item, li.item, li.item, li.item]
// 将类数组遍历出来
items.forEach((item) => console.log(item));
// 获取第一个满足条件的元素
let first = items[0];
first.style.background = "yellow";
// 也可以用于元素上
let list = document.querySelector(".list");
let lis = list.querySelectorAll(".item");
console.log(lis);
如何快速获取一些元素
- console.log(document.body)
- console.log(document.head)
- console.log(document.title)
- console.log(document.documentElement)
- console.log(document.forms)
- console.log(document.forms.id)
对于自定义的数据属性，无法用过点语法来获取，
需要使用 dataset 对象来操作
const p = document.querySelector("p");
// id是默认的内置的标准属性，所以可以使用点语法访问
console.log(p.id); //user
//email是非内置属性,是自定义的
console.log(p.email); //undefined
//使用dataset对象
console.log(p.dataset.email); //a@qq.com
dom 树的遍历
含义
- dom 树种的所有内容都是：节点
- 节点是有类型的：元素，文本，文档，属性。。。通常只关注元素类型的节点
let nodes = document.querySelector(".list");
// 打印所有的dom元素
console.log(nodes.childNodes);
// NodeList(13) [text, li.item, text, li.item, text, li.item, text, li.item, text, li.item, text, li.item, text]
// 只打印出元素类型的节点
console.log(nodes.children);
//HTMLCollection(6) [li.item, li.item, li.item, li.item, li.item, li.item]
遍历
- 先将类数组转为真正的数组类型再遍历
- 部分快捷方式来获取元素
- firstElementChild–获取第一个元素
- lastElementChild-- 获取最后一个元素
- childElementCount—获取子元素的长度
- nextElementSibling --获取该元素的下一个兄弟节点、
- previousElementSibling – 获取该元素的上一个兄弟节点
// 现获取类数组集合
let nodes = document.querySelector(".list").children;
//HTMLCollection(6) [li.item, li.item, li.item, li.item, li.item, li.item]
// 使用并归再将类数组转化为数组
console.log([...nodes]);
//进行遍历
[...nodes].forEach((node) => console.log(node));
// 再进行修饰，
let first = nodes[2];
first.style.background = "yellow";
// 获取最后一个元素
let way = nodes.length - 1;
let last = nodes[way];
// 补：js提供了一些快捷方式来获取第一个和最后一个
const list = document.querySelector(".list");
first = list.firstElementChild; //第一个
first.style.background = "red";
// 获取长度
console.log(list.childElementCount); //6 ===length
!
dom 元素的内容
- 添加文本和字符串 – textContent
- 添加标签 — innerHTML
- 替换当前的节点 — outerHTML
const box = document.querySelector(".box");
const p = document.querySelector("p");
// 添加文本
p.textContent = "张桢钊";
// 张桢钊
// html字符串
p.textContent = "<em>php.cn</em>";
//<em>php.cn</em>
// 如果想将字符串里的给渲染，则要用innerHTML
p.innerHTML = '<em style="color:red">php.cn</em>';
// 使用当前的文本将当前的节点直接替换掉（实际上就是当前内容的父节点）
p.outerHTML = '<em style="color:red">php.cn</em>';
console.log(box);
// <div class="box">
// <em style="color: red;">php.cn</em>
// </div>
dom 树元素的增删改查
创建 dom 元素
- createElement 创建元素
增删改查的方法
-
append(ele,‘text’),将参数作为父元素的最后一个子元素追加到列表中，无返回值,并且只能插入到一个地方
-
prepend() 在头部追加
-
使用 cloneNode(true)复制副本，解决 append 的剪切问题
-
变量名称.before: 在插入位置（参考节点）上调用
-
变量名称.after(el):在插入位置（参考节点）下调用
-
替换节点：节点替换 replaceWith
-
删除节点：在要被删除的节点上直接调用—remove（）且无参数
进阶函数
- insertAdjacentElement(‘插入位置’，‘元素’)
- 插入位置有四个值：
- afterBegin: 开始标签之后，第一个子元素
- beforeBegin:开始标签之前，是他的前一个兄弟元素
- afterEnd: 结束标签之后，他的下一个兄弟元素
- afterEnd: 结束标签之后，他的最后一个子元素
- 插入位置有四个值：
- insertAdjacentHTML(‘插入位置’，‘元素’)
- 元素可以直接用 html 字符串，省去了创建元素的过程
// 创建
let div = document.createElement("div");
let span = document.createElement("span");
// 添加文本
span.textContent = "hello";
console.log(div, span); //<div>world</div> <span>hello</span>
// 使用aooend添加
div.append(span);
div.append(span, "world");
// <div>
// <span>hello</span>
// world
// </div>
//添加给div的span和world剪切给了body了
document.body.append(span, "world");
// helloworld console：<div>world</div>
// 使用cloneNode解决
document.body.append(span.cloneNode(true), "world");
// 此时console里的div里面就有了span
实战演练—使用 append（）创造一个列表
//创建ul
const ul = document.createElement("ul");
// 循环来生成多个列表项li
for (let i = 0,i <= 6,i++){
let li =document.creatElement("li")
li.textContent =`item${i}`;
ul.append(li);
}
document.body.append(ul);
//从首部添加
li = document.createElement("li");
li.textContent = "first item";
li.style.color = "red";
ul.prepend(li);
//添加在除了头尾的部分
const refer = document.querySelector("li:nth-of-type(4)");
//并在其之后添加一个节点
refer.after(li);
// 替换节点
let a = document.createElement("a");
a.textContent = "php中文网";
a.href = "https://php.cn";
refer.replaceWith(a);
//删除节点---remove(无参数)
ul.querySelector(":nth-of-type(6)").remove();
// li插入和ul同级
ul.insertAdjacentElement("beforebegin", li);
// li插入ul成为里面第一个元素
ul.insertAdjacentElement("afterbegin", li);
ul
css 操作
行内样式
- 使用点语法
// 在body里打个 p{hello world}
const p = document.querySelector("p");
p.style.color = "red";
console.log(p);
//<p style="color: red;">hello,world</p>
类样式
- 调用 style 里的类—classList
- classList.add–添加
- classList.remove–移除
- classList.replace–替换
- classList.toggle–切换：如果已存在则删除，如果不存在则添加
在 style 或者 css 里设置一些类
.bgc-cyan {
background-color: cyan;
}
.bgc-yellow {
background-color: #ff0;
}
.border {
border: 3px solid #000;
}
.bolder {
font-weight: bolder;
}
在 js 里面调用
const p = document.querySelector("p");
p.classList.add("bgc-cyan");
p.classList.add("border", "bolder");
p.classList.remove("border");
p.classList.replace("bgc-cyan", "bgc-yellow");
p.classList.toggle("border");
计算样式
-
含义
- 一个元素最终该渲染成什么样式，有浏览器决定
- 浏览器根据一个元素的行内样式，内部样式，外部样式来计算出最终的格式
-
window.getComputedStyle(p, null);
-
第一个参数是要查看样式的元素，第二个参数是伪元素
-
补：计算样式都是只读的
let styles = window.getComputedStyle(p, null);
console.log(styles.getPropertyValue("height")); //21.3333px
console.log(styles.getPropertyValue("background-color")); //rgba(0, 0, 0, 0)
console.log(styles.getPropertyValue("color")); //rgb(0, 0, 0)
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
