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