Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS基本语法6：JavaScript 类 class声明与实例化 与DOM元素的获取方法/DOM元素遍历的常用方法
Blogger Information
Blog 27
fans 0
comment 0
visits 18963
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS基本语法6：JavaScript 类 class声明与实例化 与DOM元素的获取方法/DOM元素遍历的常用方法
茂林
Original
1026 people have browsed it

作业内容：1. class 声明与实例化,属性,方法,静态方法与继承的语法 2. DOM元素的获取方法演示 3. DOM遍历的常用方法

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

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

  1. <script>
  2.     /**
  3.      * class声明类
  4.      * 类的作用是批量创建对象
  5.      */
  6.     class User {
  7.       /* 
  8.         1.属性：使用constructor关键字声明
  9.          */
  10.       constructor(username, password) {
  11.         this.username = username
  12.         this.password = password
  13.       }
  14.       /* 2.方法：使用简写的方式 method(){}*/
  15.       say() {
  16.         return `名字：${this.username},密码：${this.password}`
  17.       }
  18.       /* 3.访问器属性
  19.        */
  20.       set username(name) {
  21.         this.name = name
  22.       }
  23.       get username() {
  24.         return `${this.name}`
  25.       }
  26.       /* 4.静态成员 static */
  27.       static national = "中国"
  28.     }
  29.     /* 通过User类创建 person 对象 */
  30.     let person = new User("user1", "user1@1234")
  32.     console.log(person.say())
  33.     /**
  34.  * 类的继承
  35.  * 1.关键字：extends
  36.  * 2.作用：为了扩展类的功能 
  38. */
  39.     class student extends User {
  40.       constructor(username, password, age) {
  41.         super(username, password)
  42.         //子类中的新属性
  43.         this.age = age
  44.       }
  45.       //子类中的新方法
  46.       say() {
  47.         return `${super.say()},(${this.age})`
  48.       }
  49.     }
  51.     const person1 = new student("朱老师", "Koge@1234", 18)
  53.     console.log(person1.say())
  54.   </script>

2.DOM元素的获取方法

1.document.querySelectorAll('css选择器'):获取一组元素
2.document.querySelector('css选择器')：获取一个元素

  1.   <body>
  2.     <ul class="list">
  3.       <li>item1</li>
  4.       <li>item2</li>
  5.       <li>item3</li>
  6.       <li>item4</li>
  7.       <li>item5</li>
  8.       <li>item6</li>
  9.       <li>item7</li>
  10.       <li>item8</li>
  11.     </ul>
  13.     <script>
  14.       //console.log(" 1.获取一组元素：document.querySelectorAll()")
  15.       /**
  16.        * 1.获取一组元素：document.querySelectorAll('css选择器')
  17.        *返回值：为一个NodeList 类数组,自带了forEach(),entries(),item(),keys()方法
  18.        */
  19.       //const items = document.querySelectorAll(".list>li")
  20.       //console.log(items)
  21.       //通过自带的forEach()遍历元素
  22.       //items.forEach((item) => console.log(item))
  23.       //textContent:元素中的文本内容
  24.       /* items.forEach((item) => console.log(item.textContent))
  25.         console.log(" 1.获取一个元素：document.querySelectorAll()") */
  26.       /**
  27.          * 2.获取一个元素：document.querySelector('css选择器')
  28.          *集合中满足条件的第一个元素，也就是集合中 第一个
  30.          */
  32.       //console.log(items[0])
  33.       let item = document.querySelector(".list>li")
  34.       console.log(item)
  35.       console.log("=======")
  36.       /**
  37.        * querySelectorAll,querySelector
  38.        * 也可以在元素中调用
  39.        */
  40.       const list = document.querySelector(".list")
  41.       console.log(list)
  42.       /* 获取满足条件的第1个元素 */
  43.       console.log(list.querySelector("li"))
  45.       const ls = list.querySelectorAll("li")
  46.       ls.forEach((item) => (item.style.border = "1px solid blue"))
  47.     </script>
  48.   </body>

3.获取DOM元素的快捷方法

  1. body : document.body
  2. head : document.head
  3. title : document.title
  4. html : document.documentElement
  5. url : document.URL
  6. window : document.defaultView
  7. cookie : document.cookie
  8. script : document.scripts
  9. styleSheets: document.styleSheets
  1. <html lang="zh-CN">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <title>DOM元素获取的快捷方法</title>
  6.   </head>
  7.   <body>
  8.     <ul class="list">
  9.       <li>item1</li>
  10.       <li>item2</li>
  11.       <li>item3</li>
  12.       <li>item4</li>
  13.       <li>item5</li>
  14.       <li>item6</li>
  15.       <li>item7</li>
  16.       <li>item8</li>
  17.     </ul>
  18.     <script>
  19.       /* 1.获取body元素 */
  20.       console.log(document.body)
  21.       /* 2.获取head元素 */
  22.       console.log(document.head)
  23.       /* 3.获取titil元素 */
  24.       console.log(document.title)
  25.       /* 4.获取页面的URL */
  26.       console.log(document.URL)
  27.       /* 5.获取windows */
  28.       console.log(document.defaultView)
  29.       /* 6.获取html */
  30.       console.log(document.documentElement)
  31.       /* 7.获取cookie */
  32.       console.log(document.cookie)
  33.       /* 8.获取script */
  34.       console.log(document.scripts)
  35.       /* 9.获取styleSheets */
  36.       console.log(document.styleSheets)
  37.     </script>
  38.   </body>
  39. </html>

4.DOM表单元素获取

  1. form : document.forms.id/name
  2. input: input.name/id
  3. value: input.name/id.value
  1. <script>
  2.       /** 前后端分离
  3.        * 前端 <-->(JSON格式的字符串)<-->服务器端
  4.        * 将表单中的用户邮箱和密码发送到服务端
  5.        **/
  6.       /*第一步 获取邮箱与密码 */
  7.       let email = document.forms.login.email.value
  8.       let password = document.forms.login.password.value
  9.       console.log(email, password)
  10.       /* 第二步 转为JS对象 */
  11.       //let user={email:email,password:password} 简写
  12.       let user = { email, password }
  13.       /* 第三步 把JS对象序列化成JSON字符串 */
  14.       let json = JSON.stringify(user)
  15.       console.log(jsons)
  16.     </script>

5. DOM遍历的常用方法

  1. children: 元素类型子节点
  2. firstElementChild: 第一个子元素
  3. lastElementChild: 最后一个子元素
  4. nextElementSibling: 下一个兄弟元素
  5. previousElementSibling: 前一个兄弟元素
  6. parentElement: 父元素
  7. contains(): 是否是后代
  1.  <body>
  2.     <ul class="list">
  3.       <li>item1</li>
  4.       <li>item2</li>
  5.       <li>item3</li>
  6.       <li>item4</li>
  7.       <li>item5</li>
  8.       <li>item6</li>
  9.     </ul>
  10.     <script>
  11.       /* DOM 节点类型(12个,常用3个) 
  12.         1.document:文档类型,9
  13.         2.element:元素类型,1
  14.         3.text:文本类型,3
  15.         */
  16.       /* document.querySelectorAll
  17.         参数：css选择器
  18.         返回值：NodeList类数组,自带了foreach(),entries(),value(),keys()方法
  19.         类数组转成真正的数组方法：[...类数组名],Array.from(类数组名)       
  20.         */
  21.       let list = document.querySelector(".list")
  22.       // 列表 class = 'list'
  23.       //console.log(list)
  24.       /* DOM 节点类型(12个,常用3个) 
  25.         1.document:文档类型,9
  26.         2.element:元素类型,1
  27.         3.text:文本类型,3
  28.         */
  29.       // noteType: 查看节点类型
  30.       //console.log(list.nodeType)
  31.       /* 1.所有子节点：chileNodes 
  32.       返回值：NodeList类数组,自带了foreach(),entries(),value(),keys()方法
  33.       类数组转成真正的数组方法：[...类数组名],Array.from(类数组名)       
  34.       包含了所有节点类型：文本节点和元素节点,如果只想获取元素节点,需要将类数组转成真正的数组,
  35.       使用数组filter()过滤得到元素节点及节点上的内容
  36.       */
  37.       console.log(list.childNodes)
  38.       //只获取list.childNodes中的元素节点
  39.       let lt = Array.from(list.childNodes).filter((item) => item.nodeType === 1)
  40.       //console.log(lt)
  41.       //2.所有元素子节点:children
  42.       //console.log(list.children)
  43.       ;[...list.children]
  44.       // console.log([...list.children])
  45.       //3.获取第一个子节点:firstElementChild
  46.       // console.log([...list.children][0])
  47.       let first = list.firstElementChild
  48.       console.log(first)
  49.       //4.获取下一个子节点:nextElementSibling
  50.       let second = first.nextElementSibling
  51.       console.log(second)
  52.       //5.获取最后一个子节点:lastElementChild
  53.       let last = list.lastElementChild
  54.       console.log(last)
  55.       //6.上一个子节点：previousElementSibling
  56.       let prev = last.previousElementSibling
  57.       console.log(prev)
  58.       //7.父元素parentElement
  59.       let parent = prev.parentElement
  60.       console.log(parent)
  61.       //8.是否是后代
  62.     //  console.log(contains(list))
  63.     </script>
  64.   </body>
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post