当前位置：首页 > article >正文

Web APIs 1：基础介绍+DOM+定时器

article 2024/11/14 2:17:18

Web APIs 1（基础介绍+DOM）

1.转变：变量声明const优先

数组和对象尽量用const声明，当使用const 声明像数组、对象等引用型数据类型时，因为地址不变，所以里面的内容可以随意改变

2.API作用和分类

作用：使用JS去操作html和浏览器
分类：DOM(文档对象模型)、BOM(浏览器对象模型)

3.DOM介绍 : 通过JS操作网页内容

DOM树：将HTML文档以树状结构直观表现出来
DOM对象：浏览器根据html标签生成的JS对象
document对象：
- 是DOM里提供的一个对象
- 网页所有内容都在document中
- 它的属性和方法都可以访问和操作页面内容

4.获取DOM对象

querySelector——根据CSS选择器获取单个DOM元素，可以直接修改样式
```
 document.querySelector('css选择器')
```
querySelectorAll——获取多个元素，获取过来的是伪数组，不能直接修改样式，要修改要进行遍历，没有pop、push等数组方法
```
 const li = document.querySelectorAll('ul li')
```
其他获取DOM元素的方法（了解即可）
- document.getElementById(‘’)
- document.getElementsByTagName(‘’)
- document.getElementsByClassName(‘’)

5.操作元素内容

对象.innerText属性:修改元素内容（不解析标签）

 const box = document.querySelector('div')
 box.innerText = '修改后的文字内容'

对象.innerHTML（解析标签）——常用

 const nav = document.querySelector('#nav')
 nav.innerHTML = '<strong>修改后的文字内容</strong>'

6.操作元素属性

常用属性修改：对象.属性=值

<body>
  <img src="../csdn.jpg" alt="">
  <script>
    const img = document.querySelector('img')
    img.src = '../csdn图片.jpg'
    img.title = '我的图片' //鼠标悬浮显示对该图片的描述
  </script>
</body>

元素样式属性

通过style属性操作CSS——对象名.style.属性名=值

注意用“-”隔开的属性名要变换为小驼峰命名法

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

<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    box.style.width = '400px'
    //多组即使用“-”隔开的单词变换为小驼峰命名法
    box.style.backgroundColor = 'green'
    box.style.border = '2px solid blue'
    box.style.borderTop = '2px solid red'
  </script>
</body>

通过类名操作CSS——修改样式较多

 <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .box {
      width: 400px;
      height: 600px;
      background-color: aqua;
      margin: 100px auto;
      padding: 10px;
      border: 1px solid greenyellow;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    //添加类名，如果本身有类名会覆盖掉原来的 要保留原来的在这里就也要加上 添加多个类名用空格隔开就行
    div.className = 'box'
  </script>
</body>

通过classList操作类控制CSS（常用）

上面的使用类名className要返回去确认是否本身有类名，容易覆盖掉原来的类名

 //追加类名 
  元素.classList.add('类名')
 //删除类名
  元素.classList.remove('类名')
 //切换类名 有还是没有，有就删除没有就加上
  元素.classList.toggle('类名')

表单元素属性

<body>
  <input type="text" value="电脑">
  <input class="check" type="checkbox" name="" id="">
  <button>点击</button>
  <script>
    //获取元素
    const uname = document.querySelector('input')
    //获取表单的值  用表单.value 而不是.innerHTML
    console.log(uname.value)
    uname.value = "换个名字"
    uname.type = "password"
    //设置复选框不选中
    const check = document.querySelector('.check')
    check.checked = false
    //设置按钮禁用，即无法点击
    bt = document.querySelector('button')
    bt.disabled = true
  </script>
</body>

自定义属性

标签一律以data-开头，在DOM对象一律以dataset对象方式获取

<body>
  <div data-id="1" data-pp="next自定义属性">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <div data-id="4">4</div>
  <div data-id="5">5</div>
  <script>
    const one = document.querySelector('div')
    //会拿到第一个div的两个自定义属性组成的对象
    console.log(one.dataset)
    console.log(one.dataset.id) //1
    console.log(one.dataset.pp) //next自定义属性
  </script>
</body>

7.定时器——间歇函数

开启定时器(间隔时间单位为ms)

setInterval(函数名，间隔时间)

<script>
    setInterval(function () {
      document.write('1秒执行一次')
    }, 1000)
</script>

关闭定时器

let 定时器编号 =setInterval(函数名，间隔时间)
clearInterval(定时器编号)

 //返回ID号，每个定时器都是独一无二的
    let n = setInterval(function () {
      document.write('1m执行一次')
    }, 1000)
    console.log(n) //查询定时器的编号
    clearInterval(n)