构造函数与类、获取DOM元素

类与DOM操作-1

1. 构造函数

class users{
// 1. 属性
constructor(uname,email){
this.uname = uname;
this.email = email;
}
// 2. 方法
// 自动创建倒原型中
say(){
return `${this.uname}:(${this.email})`
}
// 静态成员
static sex = '男'
}
let user = new users('墨子','mz@qq.com')
console.log(user.say())
console.log(users.sex)
// 继承 创建子类是为了扩展父类的功能
class child extends users{
constructor(uname,email,sex){
super(uname,email)
this.sex = sex
}
say(){
return `${super.say},${this.sex})`
}
    }
let childs = new child('墨仔','mz@qq.com','男')
        console.log(childs)

DOM元素的获取方法演示

// 1. 一组
const items = document.querySelectorAll('ul>li')
console.log(items); //类数组
// forEach遍历 
// 可以转换为真正的数组 items.form() ...items
items.forEach(items => {
console.log(items.textContent)
});
// 2. 一个
let first = document.querySelector('ul>li')
console.log(first) // item1

DOM遍历的常用方法

// 节点类型 (12个,常用3个)
// 1. document: 文档类型, 9
// 2. element: 元素类型, 1
// 3. text: 文本类型, 3
// 查询类型
        let list = document.querySelector('ul')
console.log(list.nodeType) //1
// 所有子节点
let items = list.children
console.log(items) // [li,li,li,li,li]
//第一个
console.log(list.firstElementChild)
//最后一个
console.log(list.lastElementChild)
//前一个
let last = list.lastElementChild;
let prev = last.previousElementSibling
//下一个
last = prev.nextElementSibling
console.log(last)
//父节点
let parent = last.parentNode;
console.log(parent)
// jq :contains()选择器 选择器选取包含指定字符串的元素
// $('p:contains(字符串)')

总结

1. 类

1. 声明: class
2. 属性 constructor()
3. 方法 method(){} 简写
4. 访问器 get method() / set method()
5. 静态 static
6. 继承: extends / super

获取DOM元素

1. 一组: querySelectorAll
2. 一个: querySelector

遍历DOM

1. children: 元素类型子节点
2. firstElementChild: 第一个子元素
3. lastElementChild: 最后一个子元素
4. nextElementSibling: 下一个兄弟元素
5. previousElementSibling: 前一个兄弟元素
6. parentElement: 父元素
7. contains(): 是否是后代