Web APIS简介

文章目录


前言

DOM:是文档对象模型

作用: DOM用来 操作网页文档,开发网页特效和实现用户交互

一、什么是API? 

API:是应用程序编程接口

作用:JavaScript 去操作页面文档和浏览器

二、使用方法

1.获取元素

document.querySelector('css选择器')返回的是第一个匹配的元素对象

document.querySelectorAll('css选择器')返回值是一个伪数组

<body>
  <div id="box">我是一个盒子</div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
<script>
  let box = document.querySelector('#box')
  let li = document.querySelectorAll('li')
</script>

2.操作元素内容

元素对象.innerText 不能解析标签,只能解析文本

 元素对象.innerHTML 可以解析标签,也可以解析文本,常用

<body>
  <div id="box">我是一个盒子</div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
<script>
  let box = document.querySelector('#box')
  let li = document.querySelectorAll('li')
  box.innerText = '坤少'
  box.innerHTML = '<b>坤少</b>'
</script>

3.操作元素属性

常用属性:可以进行增删改查

<body>
  <img src="./images/1.png" alt="我是播仔">
  <script>
    // 先获取这个元素
    const img = document.querySelector('img')
    //  查
    console.log(img.alt)
    //  改
    img.src = './images/2.png'
    //增
    img.title = '我是爱坤'
    //删
    img.alt = ''
  </script>

总结

以上就是今天要讲的内容,本文仅仅简单介绍了js的使用,而js提供了大量能使我们快速便捷地处理数据的函数和方法。代我慢慢分享.

  • 10
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值