文章目录
JS组成
JavaScript的组成：
- ECMAScript:
- 规定了js基础语法核心知识。
- 比如：变量、分支语句、循环语句、对象等等。
- Web APIs :
- DOM 文档对象模型， 定义了一套操作HTML文档的API。
- BOM 浏览器对象模型，定义了一套操作浏览器窗口的API。
什么是 webApis 和API
- web APIs 包含：
- DOM 文档对象模型：使用 javaScript 操作页面文档。
- BOM 浏览器对象模型：使用 javaScript 操作浏览器。
- **web APIs **作用：使用 javaScript 去操作页面文档和浏览器。
- 接口：无需关心内部如何实现，程序员只需要调用就可以很方便实现某些功能。
- API：应用程序接口（Application Programming Interface)
- API 作用：开发人员使用 javaScript 提供的接口来操作网页元素和浏览器。
DOM 简介
- DOM：（Documenet Object Model – 文档对象模型）
- 作用：DOM 用来操作网页文档（标签），开发网页特效和实现用户交互。
- 核心思想：就是把网页内容当作对象来处理，通过对象的属性和方法对网页内容操作。
document 对象
- 是 DOM 里提供的一个对象，是 DOM 顶级对象。
- 作为网页内容的入口。
- 所以它提供的属性和方法都是用来访问和操作网页内容的。
获取 DOM 对象
利用css选择器来获取DOM元素
-
语法
const box = document.querySelector('css选择器') -
参数：包含一个或多个有效的css选择器字符串
-
返回值：CSS选择器匹配的第一元素对象。如果没有匹配到，则返回null。
<div class="box">我是一个盒子</div>
<p class="box tit">我是一个p标签
<span>123</span>
</p>
<script>
//通过css选择器获取元素
//选择指定css选择器的第一个元素
//数组和对象 最好使用 const 声明
const box = document.querySelector('.box')
const p = document.querySelector('p')
const tit = document.querySelector('.box.tit') //交集
const span = document.querySelector('.tit span') //后代
console.log(tit) //只能单纯输出内容
console.dir(box) //用来输出对象格式数据
</script>
选择指定css选择器的所有元素
-
语法：
const lis = document.querySelectorAll('css选择器') -
参数：包含一个或多个有效的css选择器字符串
-
返回值：
- CSS选择器匹配的 NodeList -> 伪数组
- 有长度有索引号的数组
- 但没有 pop()、push()等数组方法
- 利用 循环遍历（for）方式来获取每一个对象
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol>
<li>3</li>
<li>4</li>
</ol>
<div>我是div</div>
<script>
//获取多个元素
//需求：所有 ol 的后代 li => ol li
const lis = document.querySelectorAll('ol li')
console.log(lis) //NodeList(2) [li, li] => 伪数组
for (let i = 0; i < lis.length; i++) {
console.log(lis[i])
}
const div = document.querySelectorAll('div')
console.log(div) //[div] =>获取的元素只有一个，那也是伪数组形式
</script>
其他获取DOM元素方法（了解）
| 语法 | 实例 | 描述 |
|---|---|---|
| getElementById | documenet.getElementById(‘box’) | 根据id获取元素，单个 |
| getElementsByTagName | document.getElementsByTagName(‘li’) | 根据标签名获取元素，伪数组 |
| getElementsByClassName | document.getElementsByClassName(‘one’) | 根据类名获取元素，伪数组 |
| getElementsByName | document.getElementsByName(‘uname’) | 根据name属性值获取元素，伪数组 |
操作元素内容
- DOM对象可以操作页面标签，所以本质上就是操作DOM对象（增删改查）
- 操作标签元素的内容的方式：
- 对象.innerText 属性
- 对象.innerHTML 属性
对象.innerText
- 将文本内容添加/更新到任意标签位置
- 显示纯文本，不解析标签
//获取元素
const box = document.querySelector('div')
//innerText
//获取内容 => 只获取文本
console.log(box.innerText) //我是div
//设置内容
box.innerText = '<strong>新值</strong>' //<strong>新值</strong>
对象.innerHTML
- 将文本内容添加/更新到任意标签位置
- 显示所有内容，解析标签
//获取元素
const box = document.querySelector('div')
//innerHTML
//获取内容 => 会把嵌套的标签获取到
console.log(box.innerHTML) //<em>我是div</em>
//设置内容
box.innerHTML = '<strong>新值</strong>' //新值 => 加粗后的
操作元素属性
操作元素常用属性
-
可以通过DOM操作元素属性
-
最常见的属性：
href、title、src等 -
语法
对象.属性 = 值 -
直接通过属性名修改
<img src='./images/1.png' alt='波仔'> <script> //获取元素 const img = document.querySelector('img') //操作元素属性 //查 console.log(img) //改 img.src = './images/2.png' //增 img.title = '我可爱不爱' //删 img.alt = '' </script>
操作元素样式属性
还可以通过 DOM对象修改标签元素的样式属性
- 比如通过 轮播图小圆点自动更换颜色 样式
- 点击按钮可以滚动图片，这是移动的的位置 translateX 等等
通过 style 属性操作元素样式
-
语法：
对象.style.样式属性 = 值 -
练习
<div class='box'>我是一个盒子</div> <script> const box = document.querySelector('.box') //修改元素样式 box.style.fontSize = '20px' box.style.backgroundColor = 'pink' </script>
注意：
1.修改样式通过style属性引出
2.如果属性有-连接符，需要转换为小驼峰命名法
3.赋值的时候，需要的时候不要忘记加css单位
通过类名（className）操作元素样式-了解
-
使用的原因：如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
-
核心：把多个样式放到css一个类中，然后把这个类添加到这个元素身上。
-
语法：
<style> .box { width: 200px; height: 200px; color: #8df; font-size: 30px; border: 1px solid red; } </style> <body> <div>文字描述</div> <script> //需求：通过 className属性 的形式设置样式 const box = document.querySelector('div') box.className = 'box' console.log(box.className) </script> </body>
注意：
1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
通过 classList 操作元素样式-推荐
-
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。
-
好处：不会影响已经存在的类名，是在原来的基础上添加。
-
语法：
//新增类名 对象.classList.add('类名') //移除 对象.classList.remove('类名') //切换 -> 有则删除，没有添加 对象.classList.toggle('类名') //判断是否存在某个类名 -> 会返回一个布尔值 -> 存在true，不存在false 对象.classList.contains('类名') -
练习
<head> <title></title> <style> .nav { width: 200px; height: 200px; background-color: #8df; color: green; } .box { font-size: 300px; text-align: center; line-height: 300px; border: 1px solid pink; } </style> </head> <body> <div class='nav'>文字描述</div> <script> //需求：利用 classList 追加、删除、切换、判断类名 const div = document.querySelector('div') //1. 追加类名 -> 在原有的基础上，追加新类名 div.classList.add('box') //class="nav box" //2. 删除 div.classList.remove('nav') //class="box" //3. 切换 div.classList.toggle('nav') //class="box nav" //4. 判断是否存在某个类名 console.log(div.classList.contains('abc')) //false console.log(div.classList.contains('nav')) //true </script> </body>
总结
- 使用style的场景：修改的样式很少。
- 使用classList（推荐）/className的场景：修改大量的样式。
操作表单元素属性
-
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框。
-
正常的有属性有取值的跟其他的标签属性没有任何区别。
//获取：DOM对象.属性 //设置：DOM对象.属性 = 新值 表单.value = '用户名' 表单.type = 'passwird' -
表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，比如实现禁用按钮，勾选按钮等。
-
如果为
true代表添加了该属性，如果是false代表移除了该属性。比如：disabled、checked、selected
<body>
<input type='text' value='文本'>
<br>
<input type='password' value='12345'>
<br>
<input type='radio' checked>男
<br>
<button>按钮</button>
<br>
<select name='' id=''>
<option value='' >北京</option>
<option value='' selected>上海</option>
</select>
<script>
//操作表单属性
//1. value属性 => 收集用户输入的值
const uname = document.querySelector("[type='text']")
//获取 对象.value
// console.log(uname.value)
//设置 对象的value属性 对象.value = 值
uname.value = 'niuniu'
//2. type属性 => 规定input的类型
const pwd = document.querySelector("[value='12345']")
//获取
console.log(pwd.type)
//设置 把password 换成 text
pwd.type = 'text'
//3. 修改 单选或复选按钮的选中 checked
const radio = document.querySelector("[type='radio']")
//获取
console.log(radio.checked)
//设置 false是不选中 true是选中
radio.checked = false //不选中
//4. 禁止使用表单按钮
const btn = document.querySelector('button')
//获取
console.log(btn.disabled) //false
//设置
btn.disabled = true //禁止使用按钮
//5. 判断当前 option 是不是选中项
const option = document.querySelector('select option:first-child')
console.log(option.selected) //false 上海
//设置
option.selected = true //选中北京
</script>
</body>
自定义属性
-
标准属性：标签天生自带的属性 比如class、id、title等, 可以直接使用点语法操作比如：
对象.title。 -
自定义属性：
-
在html5中推出来了专门的 data- 自定义属性
-
使用场景：通过自定义属性可以存储数据，后期可以使用这个数据
-
在标签上一律以 data- 开头
-
在DOM对象上一律以 dataset 对象方式获取，
对象.dataset。
-
<body>
<!-- 设置：在标签上，使用 data-名字="值" -->
<div data-index='0' data-id='box'>niuniu</div>
<script>
//自定义属性 => 保存某些数据，后续使用
const div = document.querySelector('div')
//获取： 对象.dataset => 对象集合
console.log(div.dataset) //{index: '0', id: 'box'}
//获取属性值 对象.属性名
console.log(div.dataset.index) //0
</script>
</body>