html 学习

js 访问器

演示

代码

      //  访问器 set 设置数据  get 获取数据
      // 常规属性（设置默认值）
      let goods = {
        // 常规属性
        data: {
          name: "小米手机",
          price: 3999,
          num: 10,
        },
        // 获取商品名
        getName() {
          return this.data.name;
        },
        // 设置商品名
        setName(name) {
          this.data.name = name;
        },
        // 获取商品价格
        getPrice() {
          return this.data.price;
        },
        // 设置商品价格
        setPrice(price) {
          if (price >= 0) {
            this.data.price = price;
          } else {
            console.log("价格必须大于0");
          }
        },
        // 获取商品数量
        // 将传统的方法,修改一个伪装成属性的方法
        get num() {
          return this.data.num;
        },
        // 设置商品数量将之前的设置方法修改成了一个属性
        // 方法 -> 属性: 伪装成方法的属性,  "访问器属性"
        set num(num) {
          if (num >= 0) {
            this.data.num = num;
          } else {
            console.log("数量必须大于0");
          }
        },
      };
      // 访问器属性,本质上还是方法,调用时,用的属性访问的语法
      console.log("商品名:" + goods.getName());
      console.log("商品价格:" + goods.data.price);
      console.log("商品数量:" + goods.num);
      // 设置
      goods.setPrice(-1);
      console.log("商品价格:" + goods.data.price);
      console.log("商品名:" + goods.getName());
      goods.setPrice(4999);
      console.log("商品价格:" + goods.data.price);
      goods.num = 150;
      console.log("商品数量:" + goods.num);

获取 dom 元素

演示

代码

  //根据选择器获取元素
      //方法1:调用document对象的 querySelector方法，通过css 中的选择器去选取第一个符合条件的标签元素。
      // 1. 将所有的li.item 变成红色
      console.dir(document);
      // querySelectorAll(selector):返回一组元素
      console.dir(document.querySelectorAll(".item"));
      const items = document.querySelectorAll(".item");
      for (let i = 0; i < items.length; i++) {
        // console.log(items[i]);
        items[i].style.color = "red";
      }
      //items.forEach((item) => (item.style.color = "green"));
      //方法2:调用document对象的querySelectorAll方法，通过css中的选择器去选取所有符合条件的标签元素。
      // 2. 将第一个改为蓝色
      // querySelector: 返回一组元素中的第一个,只返回一个,而不是一组
      const firstItem = document.querySelector(".item");
      // console.log(firstItem);
      firstItem.style.color = "blue";
      console.log(document.querySelector("body"));
      console.log(document.body);
      console.log(document.head);
      console.log(document.title);
      // 获取html
      console.log(document.documentElement);