粗略版api

104 阅读1分钟

文章目录

DOM:是文档对象模型

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

一、什么是API? 

API:是应用程序编程接口

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

二、使用方法

1.获取元素

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

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

  <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 可以解析标签,也可以解析文本,常用

  <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.操作元素属性

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

  <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提供了大量能使我们快速便捷地处理数据的函数和方法。代我慢慢分享.