第五次预习博客-CSDN博客

本文链接：https://blog.csdn.net/2401_87814311/article/details/147258083

1.DOM树

(1)获取dom元素的方法

document.querySelector(获取第一个）

document.querySeletodAll(获取全部）

其他方法

document.getElementById('nav')(根据id获取一个元素）

document.getElementByTagName('div')（获取页面的所有div）

document.getElementByClassName('w')(获取所有类名为w的）

(2)修改dom元素的方法

元素.innerText属性（只能识别文本，不能识别标签）<strong>hhh</strong>

元素.innerHTML属性（能识别文本，能识别标签）hhh

（3）随机抽奖案例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机抽奖</title>
  <style>
    .qwe {
      width: 600px;
      height: 300px;
      background-color: red;
      color: white;
      text-align: center;
      position: relative;
      margin: 0 auto;
    }

    .first {
      position: absolute;
      top: 50px;
      width: 100%;
    }

    .second {
      position: absolute;
      top: 120px;
      width: 100%;
    }

    .third {
      position: absolute;
      top: 180px;
      width: 100%;
    }

    button {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    button:hover {
      background-color: #45a049;
    }
  </style>
</head>

<body>
  <div class="qwe">
    <div class="first">
      <h1>第一名：？？？</h1>
    </div>

    <div class="second">
      <h2>第二名：？？？</h2>
    </div>

    <div class="third">
      <h3>第三名：？？？</h3>
    </div>
  </div>

  <button onclick="drawWinners()">开始抽奖</button>

  <script>
    function drawWinners() {
      const arr = ['lulu', '晴王', 'wuyi', '新宇', '鸭梨', 'dingding']
      const random = Math.floor(Math.random() * arr.length)
      const first = document.querySelector('.first h1')
      first.innerHTML = `第一名:${arr[random]}`
      arr.splice(random, 1)



      const random2 = Math.floor(Math.random() * arr.length)
      const second = document.querySelector('.second h2')
      second.innerHTML = `第二名:${arr[random2]}`
      arr.splice(random2, 1)


      const random3 = Math.floor(Math.random() * arr.length)
      const third = document.querySelector('.third h3')
      third.innerHTML = `第三名:${arr[random3]}`
      arr.splice(random3, 1)


    }
  </script>
</body>

</html>

（4）通过style修改样式属性

类名.style.属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      display: flex;
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    box.style.width = `300px`
    box.style.backgroundColor = `blue`
    //小驼峰命名法
  </script>
</body>

</html>

（5）通过类名修改样式

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      display: flex;
      width: 200px;
      height: 200px;
      background-color: pink;
      border: solid 1px black;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    div.className = `box`
  </script>

原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承

的特性。

龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。

<body>
  <script>
    // 继续抽取   公共的部分放到原型上
    // const Person1 = {
    //   eyes: 2,
    //   head: 1
    // }
    // const Person2 = {
    //   eyes: 2,
    //   head: 1
    // }
    // 构造函数  new 出来的对象 结构一样，但是对象不一样
    function Person() {
      this.eyes = 2
      this.head = 1
    }
    // console.log(new Person)
    // 女人  构造函数   继承  想要 继承 Person
    function Woman() {

    }
    // Woman 通过原型来继承 Person
    // 父构造函数（父类）   子构造函数（子类）
    // 子类的原型 =  new 父类  
    Woman.prototype = new Person()   // {eyes: 2, head: 1} 
    // 指回原来的构造函数
    Woman.prototype.constructor = Woman

    // 给女人添加一个方法  生孩子
    Woman.prototype.baby = function () {
      console.log('宝贝')
    }
    const red = new Woman()
    console.log(red)
    // console.log(Woman.prototype)
    // 男人 构造函数  继承  想要 继承 Person
    function Man() {

    }
    // 通过 原型继承 Person
    Man.prototype = new Person()
    Man.prototype.constructor = Man
    const pink = new Man()
    console.log(pink)
  </script>
</body>

原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对

象的链状结构关系称为原型链

<body>
  <script>
    // function Objetc() {}
    console.log(Object.prototype)
    console.log(Object.prototype.__proto__)

    function Person() {

    }
    const ldh = new Person()
    // console.log(ldh.__proto__ === Person.prototype)
    // console.log(Person.prototype.__proto__ === Object.prototype)
    console.log(ldh instanceof Person)
    console.log(ldh instanceof Object)
    console.log(ldh instanceof Array)
    console.log([1, 2, 3] instanceof Array)
    console.log(Array instanceof Object)
  </script>
</body>

① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。

② 如果没有就查找它的原型（也就是 proto指向的 prototype 原型对象）

③ 如果还没有就查找原型对象的原型（Object的原型对象）

④ 依此类推一直找到 Object 为止（null）

⑤ proto对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线

⑥ 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上