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><img src="../csdn.jpg" alt=""><script>javascript">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><div class="box"></div><script>javascript">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 而不是.innerHTMLconsole.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) //1console.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)
