JavaScript-WebAPI

文章目录

- JS组成
- 什么是 webApis 和API
- DOM 简介
- - document 对象
- 获取 DOM 对象
- - 利用css选择器来获取DOM元素
  - 选择指定css选择器的所有元素
  - 其他获取DOM元素方法（了解）
- 操作元素内容
- - 对象.innerText
  - 对象.innerHTML
- 操作元素属性
- - 操作元素常用属性
  - 操作元素样式属性
  - - 通过 style 属性操作元素样式
    - 通过类名（className）操作元素样式-了解
    - 通过 classList 操作元素样式-推荐
    - 总结
  - 操作表单元素属性
  - 自定义属性

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>