知识点总结

节点

1. 结构:标签名/属性/内容
2. 获取节点的方式:

1. 通过id获取节点:

   <div id="box" class="boxClass" style="background-color: aqua ;" onclick=

let boxId = document.getElementById("box");

1. 通过标签获取节点

  <input type="text" name="inputName">

  let inputTag = document.getElementsByTagName("input");

1. 通过名字获取节点

 <input type="text" name="inputName">

let inputName = document.getElementsByName("inputName");

1. 通过父节点获取子节点

 <ul id="list">

        <li>列表项1</li>

 </ul>

 //获取父节点

 let listParent = document.getElementById("list");

 //获取子节点

 let childDom = listParent.children;

1. 对接点进行操作:

1. 修改属性

  <div id="box" class="boxClass" style="background-color: aqua ;" onclick="clickDiv()">1234</div>

 //修改属性

let boxId = document.getElementById("box");

 boxId.style = "background-color:green";

 boxId.style.backgroundColor = "brown";

1. 获取属性

 //获取属性

 boxId.getAttribute("class");

1. 修改属性

 //修改属性

 boxId.setAttribute("class", "boxNewClass");

1. 修改文本

//修改文本

//innerText和innerHTML的区别

//innerText:纯文本,不分辨标签

//innerHTML:区分标签与内容

 boxId.innerText = "<span >修改后的文本</span>";

 boxId.innerHTML = "<span >修改后的文本</span>";

模块化

方式1:分别导出

// export let name = "小明";

// export let age = 18;

// 分别导出的使用方式

// console.log(m1.name);

// console.log(m1.age);

方式2:统一导出

// let name = "小明"

// let age = 14;

// function fun() {

//     console.log("1234")

// }

// export { name, age, fun }

// 统一导出的使用方式

// console.log(m1.name);

// console.log(m1.age);

// console.log(m1.fun())

方式3:默认导出

// export default {

//     name: "小红",

//     age: 15,

//     obj: {

//         name: "哈哈哈"

//     }

//}

// 默认导出的使用方式

// console.log(m1.default.name);

// console.log(m1.default.age);

// console.log(m1.default.obj);

// console.log(m1.default.obj.name);

解构赋值

1. 数组的解构赋值

// let arr=["小明","小红","小刚"]

// let[m,h,g]=arr;

// console.log(m);

// console.log(h);

// console.log(g);

1. 简单对象的解构赋值

// let obj={

//     name:"小红",

//     age:15

// }

// let{name,age}=obj;

// console.log(name)

// console.log(age)

1. 复杂对象的解构赋值

// let obj={

//     name:"小红",

//     age:15,

//     arr:[23,43,23]

// }

方式1:

// let{name,age,arr}=obj;

// console.log(name);

// console.log(age);

// let[a,s,d]=arr;

// console.log(a);

// console.log(s);

// console.log(d);

方式2:

// let{name,age,arr:[a,s,d]}=obj;

// console.log(name);

// console.log(age);

// console.log(a);

// console.log(s);

// console.log(d);

字符串的拼接

    let str = "abc";

    let str1 = "asd";

    let str2 = "azxs";

方式1:

 let sre3 = "https://www.baidu.com?string=" + str + "&string2=" + str2 + "&string3=" + str3;

方式2:通过``和${}来实现

let str3 = "https://www.baidu.com?string1=${str}&string2=${str1}&string3=${str2}"

简化对象

创建对象

    //let obj = {

    //   name: "小明",

    //   age: 12,

    //   speak: function () {

    //       console.log("asdd");

    //    }

    //}

简化对象:当属性名都一致时,可以直接写属性名

    // let name = "小红";

    // let age = 23;

    // let speak = function () {

    //     console.log("qwer");

    // }

    //   //当属性名都相同时,可以直接写属性名

    // let obj1 = {

    //     name,

    //     age,

    //     speak

    // }

    // console.log(obj1);

Rest参数

作用:在不确定参数的个数时进行使用(rest参数只能放在最后)

    function fun(...num){

        console.log(...num);

       

    }

    fun(1,23,4)

...扩展运算符

作用:将对象,数组的数据进行展开

1. 将数组展开

    let arr = [1, 2, 3, 4];

    let arr1 = [5, 6, 7, 8, 9];

console.log(arr, ...arr1);

Arr(未展开的数据): [1, 2, 3, 4]  arr1(展开的数据): 5 6 7 8 9

1. 将对象展开:展开对象时,如果对象中的属性名一致,后面的数据会覆盖前面的数据

    let obj={

        name1:"小明",

        age1:14

    }

    let obj1={

        name2:"小明",

        age2:14                                       

    }

    let obj2={

        name3:"小明",

        age3:14

    }

    let obj3={...obj,...obj1,...obj2}

console.log(obj3);