JavaSript DOM操作节点 DOM操作元素节点

76433橘子
140 阅读4分钟

JavaSript DOM操作节点 DOM操作元素节点

前端 JavaScript DOM 和 BOM 学习目录

1. 认识DOM 和 BOM

2. DOM 操作节点、DOM 操作元素节点

3. DOM 获取任意元素 、节点类型、节点名称属性

4. DOM attribute property style属性 className属性 classList属性 Data

5. DOM 创建元素 移除元素 克隆元素

6. DOM 元素操作 window窗口操作

7. DOM Event事件

8. DOM 常用API事件总结

9. BOM 操作

10. JSON数据操作

继承（Inheritance）是面向对象编程中的一个核心概念，它允许定义一个类（称为基类或父类）作为其他类（称为派生类、子类或继承类）的基础。通过继承，子类可以获取父类的属性和方法，并且可以在需要时添加或重写自己的属性和方法‌。这种技术使得复用以前的代码非常容易，能够大大缩短开发周期，降低开发费用‌

Prefer composition over inheritance as it is more malleable / easy to modify later, but do not use a compose-always approach. With composition, it's easy to change behavior on the fly with Dependency Injection / Setters. Inheritance is more rigid as most languages do not allow you to derive from more than one type. So the goose is more or less cooked once you derive from TypeA. This description is from stack overflow!

学习我们的 DOM 之前，我们首先需要先了解继承的概念，了解了继承的一些概念后，我们就可以更清楚的理解 DOM Tree

class Person {
  /**
   * 
   */
  eat() {
    console.log("我要开始吃饭了！！！")
  }
​
  /**
   * 
   */
  running() {
    console.log("我要开始跑步了！！！")
  }
}
​
​
class Student extends Person {
  /**
   * 
   */
  study() {
    console.log("我要开始学习了！！！")
  }
}
​
var stu = new Student()
stu.eat()
stu.running()
stu.study()
​
/*
    我要开始吃饭了！！！
    我要开始跑步了！！！
    我要开始学习了！！！
*/

通过我们的继承的好处有：

1.可以实现我们对代码功能的封装以及提高代码的复用性

2.使用我们的继承是可以实现使用我们的多态的思想，这个时候还可以便于代码的维护

  • DOM 作用

    • 就是我们的 HTML 和 JavaScript 之间的桥梁，我们是可以实现通过我们的 JavaScript 实现对元素的内容做任何事情的
    • 然后我们是可以发现一点的，就是对 document 的抽象模型的话，是把每一个元素实现抽象成的一个一个的节点
    • 所有的元素的节点的话，都是继承的是我们的 HTMLElement 这一个元素节点
    • 下面的就是 document 的元素继承图:

    • 记住这个图，后面有很多的继承都是需要借助这个图的来实现讲解的

      使用了继承之后，我们的父类中具有的一些特性，子元素中也是有相应的特性的，直接使用即可 image-20241027020745786.png

  • document 对象

    • Document 节点实现表示的整个载入的网页，他的实例就是整个 document 对象

      • 对 DOM 的操作都是从我们的 document 对象开始操作的
      • 它是 DOM 的入口点，我们是可以从 document 开始去访问我们的任何的节点元素
      • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 获取整个网页中的 html
    console.log(document.documentElement)
​
    // 访问网页中的 body 元素
    console.log(document.body)
​
    // 访问网页中的 head 元素
    console.log(document.head)
​
    // 访问整个 html 的文档说明
    console.log(document.doctype)
  </script>
</body>
</html>

  • 节点和元素间的导航

    • 我们的一个网页中的节点分为两个部分:

      • 文本节点： 注释 / 文本
      • 元素节点： 元素

    • 获取所有节点（Node）的导航： 包括注释/文本/元素

      • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
​
  <div class="container">
​
  </div>
​
  <script>
    var body = document.body  
    // 获取所有的子节点
    console.log(body.childNodes)
    // 获取父节点
    console.log(body.parentNode)
    // 获取第一个子节点
    console.log(body.parentNode.firstChild)  
      
    console.log(body.previousElementSibling)
    console.log(body.nextSibling)  
  </script>
</body>
</html>

      • image-20241027024127809.png image-20241027023813866.png

    • 获取所有元素（Element）导航: 只是元素而已

      • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  哈哈
  <div class="container">
​
  </div>
​
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  
  <script>
    var body = document.body  
    // 实现获取子元素 (element)
    console.log(body.children)
​
    // 实现获取我们的第一个子元素
    console.log(body.firstElementChild)
    console.log(body.children[0])
  </script>
</body>
</html>

      • image-20241027025836296.png

注意实际上我们现在的开发模式实际上是不需要操作 DOM 了的，那为什么我还需要学习耶？？

我们需要了解的第一点就是： 我们的其他的框架的实现的底层源码实际上还是在操作我们的 DOM 的

然后我们后面实现从服务器中获取数据的时候，我们是可以通过 DOM 来实现渲染到页面，或者其他框架内置模板来实现

最重要的一点就是这个是属于基础知识部分，底层代码，所以说多了解底层的一些设计模型，对以后理解其他是有很大帮助的

avatar
文章
阅读
粉丝