JS常用操作知识——for循环——JS中的‘类’——DOM的操作

循环

do——white
入口判断
    while(条件语句){执行语句}
出口判断://至少执行一次
    do{执行语句}while{条件语句}
for 循环
for(循环条件){
    执行语句
}

对象循环使用的是for——in

for(let key in obj){执行语句} // key 代表的是键值对 (对象中的数据以键值对的形式存在)
for——in 也可以用于遍历数组

在ES6中遍历用for-of

for(let item of obj){执行语句} // 遍历数组时，item是值
对象的遍历:需要添加迭代才能用for——of遍历

函数的原型属性prototype

构造函数中使用，用来创建对象
构造函数必须使用new调用，new的过程就是创建一个对象的过程，这个过程叫类的实例化
    // 声明一个构造函数
    function User(name, email) {
        // 创建一个新对象，用this来表示
        const this =  new User; // 这个步骤是代码自动执行的,不需要自己写
        // 初始化对象，给这个对象添加自定义属性，用来区分实例
        this.name = name;
        this.email = email;
        return this; // 最后步骤，也是系统自动执行，不需要自己写
    }
实例的原型属性prototype指向构造函数的原型属性prototype,实例都是继承的构造函数
构造函数的自定义属性等级大于实例中的
属性不应该共享，它是用来区分实例的

类

JS中的类是语法糖，不是真的开发语言中的类，是用构造函数来模拟类
constructor(name, email) {
    this.name = name;
    this.email = email;
}
类中的静态方法: 实例中直接调用
static userName = '姓名';
static fetch() {
    // this指向的是是类
    return { name: this.userName };
}
类中的私有成员,访问有限制:可以用器访问属性调用并返回，其他实例就可以调用器访问属性来操作私有成员
#age = 40; // 用#定义

类的继承

重点extends supper
不能访问私有成员
class 子类 extends 父类{
    constructor(name, email, gender) {
        supper(name, email); // 调用父类的，没有supper不行
        this.gender = gender;
    }
}
***迭代器***
function myIterator(data){
    // 迭代器中必须要有一个next()方法
    return{
        next(){
            // done： 表示遍历是否完成
            // value: 当前遍历的数据
            let done = i >= data.length;
            let value = !done ? data[i++] : undefined;
            return { done, value }
        }
    }
}
***********

DOM获取

HTML结构
<ul id="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>
// 使用css选择器是最直观的

获取满足条件所有元素

const lis = document.querySelectorAll('#list li');
console.log(lis);
//Nodelist是浏览器内置的集合类型，属性类数组,
let lisArr = Array.from(lis); // 变成真数组 let larr = [...lis];也可以变成真数组
Nodelist可以用forEach遍历
lis.forEach(function(要遍历的值item，值的索引index，要遍历的数组arr) => console.log(item));
let first = document.querySelectorAll('#list li:first-of-type'); // 得到的是一个集合

获取满足条件的第一个元素

document.querySelector('#list li');

能快捷获取的元素

document.documentElement
        .head
        .body
        .title
        .forms // 返回的是个集合
        .images // 所有的图片

DOM增删改查

创建：li = document.createElement();
添加：dom.appendChild(li);
给创建的li添加内容：li.innerHTML = "<i>内容</i>";
        添加文本： li.innerText = '文本';
创建的另一种
// 将标签写进一个变量——字符串形式
let htmlStr = '<li class="item">item6</li>';
ul.insertAdjacentHTML("beforEnd", htmlStr); // beforEnd是结束之前的位置
// 节点形式
ul.insertAdjacentElement("afterBegin", li); 
大量添加元素方法
const frag = document.createDocumentFragment(); // 或者用 const frag = new DocumentFragment();
for(let i=0;i<5;i++>) {
    const li = document.createElement('li');
    li.textContent = "Hello" + (i+1);
    frag.appendChild(li);
}
ul.appendChild(frag);
— — — 
更新
let h3 = document.createElement('h3');
document.querySelector('li:nth-of-type(3)').replaceWidth(h3); // 更改第三个
ul.replaceChild(h3, document.querySelector('li:last-of-type')); // 更改最后一个
删除
ul.removeChild(document.querySelector('#list h3'));
查询
获取所有子元素: ul.children;
获取所有子元素数量：ul.children.length;//或者 ul.childElementCount;
获取第一个子元素
ul.firstElementChild;
最后一个
ul.lastElementChild;
获取父节点
子节点.parentElement;
前一个兄弟节点
const nth_jiu = document.querySelector('#list li:nth-of-type(9)'); // 拿到第九个子节点
nth_jiu.previousElementSibling.innerHTML;
后一个兄弟节点
nth_jiu.nextElementSibling.innerHTML;