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

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
类与DOM操作-11. 构造函数
  1. class users{
  2. // 1. 属性
  3. constructor(uname,email){
  4. this.uname = uname;
  5. this.email = email;
  6. }
  8. // 2. 方法
  9. // 自动创建倒原型中
  10. say(){
  11. return `${this.uname}:(${this.email})`
  12. }
  14. // 静态成员
  15. static sex = '男'
  16. }
  17. let user = new users('墨子','mz@qq.com')
  18. console.log(user.say())
  20. console.log(users.sex)
  22. // 继承 创建子类是为了扩展父类的功能
  23. class child extends users{
  24. constructor(uname,email,sex){
  25. super(uname,email)
  26. this.sex = sex
  27. }
  28. say(){
  29. return `${super.say},${this.sex})`
  30. }
  31.     }
  32. let childs = new child('墨仔','mz@qq.com','男')
  33.         console.log(childs)
DOM元素的获取方法演示
  1. // 1. 一组
  2. const items = document.querySelectorAll('ul>li')
  3. console.log(items); //类数组
  4. // forEach遍历 
  5. // 可以转换为真正的数组 items.form() ...items
  6. items.forEach(items => {
  7. console.log(items.textContent)
  8. });
  10. // 2. 一个
  11. let first = document.querySelector('ul>li')
  12. console.log(first) // item1
DOM遍历的常用方法
  1. // 节点类型 (12个,常用3个)
  2. // 1. document: 文档类型, 9
  3. // 2. element: 元素类型, 1
  4. // 3. text: 文本类型, 3
  5. // 查询类型
  6.         let list = document.querySelector('ul')
  7. console.log(list.nodeType) //1
  9. // 所有子节点
  10. let items = list.children
  11. console.log(items) // [li,li,li,li,li]
  12. //第一个
  13. console.log(list.firstElementChild)
  14. //最后一个
  15. console.log(list.lastElementChild)
  16. //前一个
  17. let last = list.lastElementChild;
  18. let prev = last.previousElementSibling
  19. //下一个
  20. last = prev.nextElementSibling
  21. console.log(last)
  23. //父节点
  24. let parent = last.parentNode;
  25. console.log(parent)
  26. // jq :contains()选择器 选择器选取包含指定字符串的元素
  27. // $('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(): 是否是后代
【本文由：香港云服务器 http://www.558idc.com/ne.html网络转载请说明出处】
更多阅读