class声明,属性,方法,静态方法与继承的语法、DOM元素的获取方法、DOM遍历的常用方法

一、class声明与实例化,属性,方法,静态方法与继承的语法

1.1、class声明与实例化、属性、方法：

        class User {
            // 1. 属性
            // 构造方法： new的时候（实例化时）自动调用
            constructor(uname,email) {
                this.uname = uname
                this.email = email
            }
            // 2. 方法
            // 自动创建到原型中
            say() {
                return `${this.uname}: ( ${this.email} )`
            }
            // 3. 静态成员
            static nation = 'China'
        let user = new User('金莲','jl@gmail.com')
        console.log(user.say())
        console.log(User.nation)
        }

---

1.2、继承

        // 创建子类时为了扩展父类的功能
        class Chlid extends User {
            constructor(uname,email,age) {
                super(uname,email)
                // super 等于 父类创建的属性
                // 当前的this是user的this，使用会报错
                this.age = age
            }
            say() {
                //return `${this.uname}: ( ${this.email} )`
                return `${super.say()}, ${this.age}`
            }
        }
        let child = new Chlid('武松','ws@gmail.com', 40)
        console.log(child)
        console.log(child.say())

---

二、DOM元素的获取方法

    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
    </ul>

    <script>
        // 1. 获取1组：querySelectorAll(selector)
        const items = document.querySelectorAll('.list > li')
        console.log(items)
        // 返回不是数组，是类数组
        console.log(Array.isArray(items))
        // NodeList对象，定义了一个forEach接口，可直接遍历
        items.forEach( item => console.log(item.textContent) )
        // 可用 Array.from 或者 ...rest 将类数组转为真正数组来用
        //Array.from(items).forEach( item => console.log(item.textContent) )
        //;[...items].forEach( item => console.log(item.textContent) )
        // 2. 获取1个：querySelector(selector)
        //first = items[0];
        let first = document.querySelector('.list > li')
        console.log(first);
    </script>

---

Nodelist可以使用forEach，但它不是真数组，如果想使用更多数组方法，需要转换
类数组转为真数组，可用以下两种方法： 【Array.from】 或者 【...rest】

---

三、获取表单数据

    <form action="login.php" method="post" id="login">
        <fieldset class="login" style="display: inline-grid; gap: 10px">
        <legend>用户登录</legend>
        <div>
            <label for="email">邮箱:</label>
            <input type="email" name="email" id="email" value="admin@php.cn" autofocus />
        </div>
        <div>
            <label for="password">密码:</label>
            <input type="password" name="password" id="password" value="123456" />
        </div>
        <button>提交</button>
        </fieldset>
    </form>

        // 1. 获取表单from：form.id
        const form = document.forms.login
        console.log(form)
        // 2. 获取表单控件: name id value
        const email = form.email
        const emailValue = form.email.value
        console.log(email)
        console.log(emailValue)
        console.log(document.body)
        console.log(document.title)
        // html
        console.log(document.documentElement)

---

四、DOM遍历的常用方法

    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
    </ul>

        let list = document.querySelector('.list')
        items = list.children
        console.log(items)
        // 第一个子元素
        console.log(list.firstElementChild)
        //下一个
        let first = list.firstElementChild
        let second = first.nextElementSibling
        console.log(second)
        // 最后一个
        console.log(list.lastElementChild)
        // 前一个
        let last = list.lastElementChild
        let prev = last.previousElementSibling
        console.log(prev)
        // 父节点
        let parent = last.parentNode
        console.log(parent)

---

笔记小记：

1. 类

1. 声明： class声明
2. 属性： constructor()
3. 方法： method(){}简写
4. 静态： static
5. 继承： extends / super

2. 获取 DOM 元素

1. 一组： querySelectorAll()
2. 一个： querySelector()

3. 获取表单数据

1. 表单： docment.forms.id
2. 控件： form.name/id

页面快捷方法

1. body ： document.body
2. head ： document.head
3. title ： document.title
4. html ： document.documentElement
5. url ： document.URL

4. 遍历 DOM

1. children： 元素类型子节点
2. firstElementChild： 第一个子元素
3. lastElementChild： 最后一个子元素
4. nextElementSibling： 下一个兄弟元素
5. previousElementSibling： 前一个兄弟元素
6. parentElement： 父元素