WebAPI 入门day1

小章鱼234

于 2023-07-10 15:12:04 发布

阅读量139

点赞数 1

文章标签： css3 javascript 前端 html

本文链接：https://blog.csdn.net/weixin_56172044/article/details/131639572

版权

WebAPI 入门 day1

一、WebAPI概念

1、WebAPI主要是通过JavaScript去操作文档对象模型（DOM）和浏览器对象模型（BOM）

2、API是应用程序接口，主要的作用是开发人员通过JavaScript提供的接口操作网页元素和浏览器

二、DOM

1.DOM的概念

DOM是文档对象模型操作网页文档 DOM的顶级对象是document对象

2.获取DOM元素

2.1选择匹配的一个元素

语法:

document.querySelector('css选择器')

补充：

返回值：选择器所匹配的第一个有效的元素对象

如果没有匹配成功，返回的是null

举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面</title>
</head>
<body>
  <div id="box">我是一个盒子</div>
  <script>
    const box = document.querySelector('#id')
  </script>
</body>

</html>

2.2获取多个元素对象

语法：

document.querySelectorAll('CSS选择器')

补充：

返回值是一个匹配的NodeList 伪数组（伪数组解释：是一个有长度有索引号的数组，但是没有数组的方法）

如果匹配没有成功，返回的是一个空数组

举例：

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>获取DOM元素</title>
</head>

<body>
  <ul class="nav">
    <li>新闻</li>
    <li>体育</li>
    <li>娱乐</li>
  </ul>
  <script>
    // 获取所有的小li标签
    // querySelectAll 如果找不到该值返回的是空数组
    const lis = document.querySelectorAll('li')
    console.log(lis);
  </script>
</body>

</html>

3.操作元素内容

3.1 元素.innerText 属性

语法：

对象.innerText 属性

补充：

1.显示纯文本，不能解析标签

2.文本内容放在标签里面

举例：

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>操作DOM元素内容</title>
  <style>
    strong {
      color: pink;
    }
  </style>
</head>

<body>
  <div class="box">古丽扎娜</div>
  <div class="box1"></div>
  <script>
    // 修改box里面的内容
    // 如果同时给一个对象修改innerText和innerHTML的时候 会覆盖前一个
    const box = document.querySelector('.box')
    const box1 = document.querySelector('.box1')
    box.innerText = '奥拓慢'
    box1.innerHTML += '<strong>你好 小怪兽</strong>'
    // box.innerText += '小怪兽'
  </script>
</body>

</html>

3.2元素.innerHTML属性

语法：

对象.innerHTML 属性

补充：

1.能够解析html标签

2.如果同时给一个对象添加innerText 与 innerHTML 属性的话后面的属性会覆盖前面属性

举例：（同上面代码）

4.操作元素属性

4.1常用属性

常见的属性有：href、title、src 等等

语法：

对象.属性 = 值

举例：

<body>
  <img src="./images/1.png">
  <script>
    const imgSrc = document.querySelector('img')
    imgSrc.src = "./images/2.png"
  </script>
</body>

4.2样式属性

1.通过style属性操作元素样式

语法：

对象.style.样式属性 = 值

举例：

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

<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    box.style.width = '300px'
    box.style.backgroundColor = 'red'
  </script>
</body>

补充：

修改样式通过style属性引出
如果属性中有-连接符，需要转换为小驼峰命名
赋值的时候，需要的时候要加上css单位

2.通过style属性操作元素样式

语法：

// active 是一个类名
对象.className = 'active'

举例：

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

    /* 准备类使用 */
    .circle {
      background-color: skyblue;
      border-radius: 50%;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>

<body>
  <div class="box">类名操作样式</div>
  <script>
    const box = document.querySelector('.box')
    box.className += ' circle'
  </script>

补充：

如果需要修改的样式很多，直接可以通过添加一个css类名
class是关键字所以我们用的是className代替
className 是会替代原有的类，如果需要两个类都存在则需要再添加新类名时也要添加旧类名

3.通过classList操作元素样式（用的最多）

语法：

// 新增一个类名
对象.classList.add('类名')
// 移除一个类名
对象.classList.remove('类名')
// 切换一个类名
对象.classList.toggle('类名')
//  是否包含一个类名
对象.classList.contains('类名')

举例：

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

    /* 准备类使用 */
    .circle {
      background-color: skyblue;
      border-radius: 50%;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>

<body>
  <div class="box circle">classList操作样式</div>
  <script>
    const box = document.querySelector('.box')
    box.classList.remove('circle')   // 移除
    console.log(box.classList.contains('circle')); 
  </script>
</body>

补充：

因为className操作会覆盖原有的类名，所以可以通过classList方式追加与删除类名
如果修改样式很少建议使用style
修改样式很多可以使用className 与 classList 但是需要注意className 会覆盖

4.3表单属性

语法：

获取：DOM对象.属性
设置：DOM对象.属性 = 新值

举例：

 <input type="text" name="username" value="用户名">
  <button>按钮</button>
  <input type="checkbox" name="agree">
  <script>
    // 获取表单属性 把text类型编程password
    const userName = document.querySelector('[name=username]')
    userName.type = 'password'
    // 禁用输入框
    userName.disabled = 'true'
    // 给复选框添加勾选
    const agree = document.querySelector('[name=agree]')
    agree.checked = 'true'
    agree.style.transform = "scale(3)"
  </script>

4.4自定义属性

标准的自定义属性就是标签自带的属性比如class、id、title等
自定义属性是h5之后推出来的data- 自定义属性可以通过在标签上使用
获取的自定义属性用dataset对象方式获取

举例：

  <div class="box" data-id="1" data-name="box" data-password='12121'></div>
  <script>
    const box = document.querySelector('.box')
    console.log(box.dataset.name);
    console.log(box.dataset.id);
    console.log(box.dataset.password);
  </script>