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><imgsrc="../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><divclass="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)
标签：
前端
javascript
本文转载自: https://blog.csdn.net/weixin_72043867/article/details/142383180
版权归原作者 学习使我快乐01 所有， 如有侵权，请联系我们删除。
版权归原作者 学习使我快乐01 所有， 如有侵权，请联系我们删除。