es6结构赋值+DOM节点的增删改查+自定义属性: dataset对象的用法+classList对象的用法 -

首页 > 博客列表 > es6结构赋值+DOM节点的增删改查+自定义属性: dataset对象的用法+classList对象的用法

博主信息

博文 8

粉丝 0

访问量 5889

专题推荐

更多>

es6结构赋值

1.数组的结构赋值

模板

模板 = 具体的值
let [a, b] = ["1", "2"];
console.log(a, b);//a:'1',b:'2'

数组的结构赋值是按顺序赋值的

let [a,b,c] = [1,2,3]
console.log(a,b,c)// 1,2,3
let [b,a,c] = [1,2,3]
console.log(a,b,c)// 2,1,3

更新

let [a,b,c] = [1,2,3]
    [a,b,c] = [5,6,7]
console.log(a,b,c)// 5,6,7

参数过多: 归并参数

    let [a, b, c, d, ...e] = [1, 2, 3, 4, 5, 6, 7];
    console.log(a, b, c, d, e);//1,2,3,4,arr(3):[5,6,7]

不完全解构

        let [a, [b], d] = [1, [2, 3], 4];
        console.log(a, [b], d);//1,[2],4

数值交换

        let a = 10;
        let b = 20;
        [a, b] = [b, a];
        console.log(a, b);//20,10

2.对象的结构赋值

对象的结构赋值等式右边也要是对象
由于解构赋值要求等号右边是一个对象，所以如果等号右边是undefined或null，就会报错，因为它们无法转为对象

let { x, y, ...z } = null; // 运行时错误
let { x, y, ...z } = undefined; // 运行时错误

无声明的结构等号左边的数据,左值,禁止出现大括号 , 使用括号包住将它转为表达式进行求值

({ id, course, score } = { id: 2, course: "PHP", score: 99 });
console.log(id, course, score);//2 'PHP' 99

对象的结构赋值是按属性名赋值的，与数组结构赋值不同，它与顺序无关

let { a, b } = { a: "aaa", b: "bbb" };
a// "aaa"
b // "bbb"

属性与变量同名
let { id, course, score } = { id: 1, course: "JS", score: 88 };
console.log(id, course, score);//1 'JS' 88
归并参数
let {...r} = {a: 1,b: 2,c: 3};
console.log(r);//{a: 1, b: 2, c: 3}

3.函数的结构赋值

作用解构来简化传参与使用

function getUser({ id, name, email }) {
        console.log(id, name, email);
      }
getUser({ id: 156, name: "李四", email: "ls@a.com" });//156,"李四",  "ls@a.com"

另一种写法

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

DOM节点的增删改查

增
节点的增加主要分为两个步骤：1.创建节点　2.追加节点

创建节点
1）创建元素节点

let node = document.createElement("标签名");

　2）创建文本节点

let textNode = document.createTextNode("文本");

当然也可以直接为元素追加文本，有两种方法，分别是：

<节点>.innerHTML = "文本";
<节点>.innerText = "文本";

它俩的区别就是：当文本中有HTML代码时，innerHTML会先解析后显示，而innerText会原样输出。
　3）创建属性节点

<节点>.setAttribute("属性名","属性值");

上面这种方式保准方法，可以添加任意的属性。当然有些属性也可以通过下面这种方法增加：

<node>.属性名 = 值;

追加节点

1）追加到尾部

列表 append() 和 appendChild（）方法用于在列表末尾追加新的对象

父节点.appendChild(子节点);
父节点.append(子节点);

　2）插入到某一个元素的前面
　如果要插入到某一个元素的前面，必须先获得此元素以及父元素。

父节点.insertBefore(新元素,旧元素);

3)插入到某一个元素的其他位置

   *// insertAdjacentElement('插入位置', 元素)
   *// 插入位置有四个
   *// afterBegin: 开始标签之后,第一个子元素
   *// beforeBegin: 开始标签之前,是它的前一个兄弟元素
   *// afterEnd: 结束标签之后,它的下一个兄弟元素
   *// beforeEnd: 结束标签之前,它的最后一个子元素

4）add() 方法将元素添加到匹配元素的集合中。

父节点.add(子节点);

删

父节点.removeChild(子节点);
父节点.remove(子节点);

因为浏览器执行javascript代码比较耗资源，所以如果我们要删除一个节点时，我们经常做的不是删除而是直接将其隐藏。

改
所谓修改节点就是修改节点的属性与包含的文本。
修改属性的方式与添加属性的方式是一样的：

//标准方法
<node>.setAttribute(“属性名”,“值”)
//Dom方法
<node>.属性名 = 值;

获得某个属性的值：

//标砖方法
<node>.getAttribute(“属性名”);
//Dom方法
let v = <node>.属性名;

修改css样式：

父元素.replace("旧元素", "新元素");
x.replace("red", "blue");

查
查就是如何获得某个元素，是我们平时用的最多的方法了，我们既可以通过Id获得某个元素，也可以通过标签名获得多个元素。
1）根据Id获得单个元素

document.getElementById("Id");

2）根据标签名获得元素数组

document.getElementByTagName("标签名");
//标签名也可以用*来代替，这样就是获取文档内的所有元素了
document.getElementByTagName("*");
//获得指定父节点下所有名字符合要求的节点
父节点.document.getElementByTagName("标签名");

3）利用属性来获取指定父节点下的所有子节点

//获得所有的子节点
<node>.childNodes
//获取第一个子节点
<node>.firstChild
//获取最后一个子节点
<node>.lastChild

4）利用属性来获取指定父节点下的特定的子节点

//第一个子元素节点
firstelementchild
//最后一个子元素节点
lastelementchild\
//下一个兄弟元素节点
nextelementsibling

5）Document.querySelectorAll：

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

let a = document.querySelectorAll('.sty');//获取文档中 class="sty" 的所有元素:
let x = document.querySelectorAll("p.sty"); // 获取文档中所有 class="sty" 的 <p> 元素

6）Document.querySelector :

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

let b = document.querySelector(".example");获取文档中 class="example" 的第一个元素

8）HTML DOM forms 集合

forms 集合返回当前页面所有表单的数组集合。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form></form>
<p>表单数目:
<script>
document.write(document.forms.length);//表单数目: 3
</script></p>
</body>
</html>

自定义属性: dataset对象

dataset对象: 用于获取用户的自定义属性
自定义必须使用data-为前缀, 访问时前缀不要写

id,class: 属于内置/预定义
email, index: 属于自定义/ 数据属性

自定义属性前需要加：data-

例子：

<!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>
    <div id="user" class="active" data-email="admin@php.cn" data-index="5">
      <h2>Hello world</h2>
    </div>
  </body>
</html>

<script>
 const div = document.querySelector("#user");
  console.log(div.dataset.email);//控制台输出"admin@php.cn"
  console.log(div.dataset.index);//控制台输出"5"
  </script>

classList对象

定义和用法

classList 属性返回元素的类名，作为 DOMTokenList 对象。

该属性用于在元素中添加，移除及切换 CSS 类。

classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

例子：给id选择器为m_Div的div元素增加css样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.m{
    width: 500px;
    height: 50px;
    padding: 15px;
    border: 1px solid black;
}
.a {
    background-color: coral;
    color: white;
}
.t{
    text-transform: uppercase;
    text-align: center;
    font-size: 25px;
}
</style>
</head>
<body>
<div id="m_Div">
我是一个 DIV 元素。
</div>
</body>
</html>

<script>
    document.getElementById("m_Div").classList.add("m", "a", "t");//给id选择器为m_Div的div元素增加css样式
</script>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

VSCODE安装与emmet语法

2021-09-18 22:33:53

es6结构赋值

1.数组的结构赋值

模板

数组的结构赋值是按顺序赋值的

更新

参数过多: 归并参数

不完全解构

数值交换

2.对象的结构赋值

对象的结构赋值等式右边也要是对象

无声明的结构等号左边的数据,左值,禁止出现大括号 , 使用括号包住将它转为表达式进行求值

对象的结构赋值是按属性名赋值的，与数组结构赋值不同，它与顺序无关

属性与变量同名

归并参数

3.函数的结构赋值

作用解构来简化传参与使用

DOM节点的增删改查

自定义属性: dataset对象

classList对象