JavaScript（Web API第一节）

最新推荐文章于 2024-09-13 21:00:00 发布

qwerty....

最新推荐文章于 2024-09-13 21:00:00 发布

阅读量522

点赞数 20

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_80409048/article/details/136949272

版权

1.1 作用和分类

作用：就是使用JS去操作html和浏览器

分类：DOM(文档对象模型）、BOM（浏览器对象模型）

1.2 什么是DOM

DOM（Document Object Model---文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API

也就是浏览器提供的一套专门用来操作网页内容的功能

DOM作用

开发网页内容特效和实现用户交互

1.3 DOM树

什么是DOM树

将HTML文档以树状结构直观表现出来，我们称之为文档树或DOM树

描述网页内容的名词

作用：文档树直观体现了标签与标签之间的关系

1.4 DOM对象（important）

DOM对象：浏览器根据HTML标签生成的JS对象

所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

DOM的核心思想

把网页内容当做对象来处理

document对象

是DOM里提供的一个最大的对象
所以它提供的属性和方法都是用来访问和操作网页内容：比如：document.write()
网页所在内容都在document里面

2.1获取DOM对象

想要操作某个标签：首先选中这个标签，跟CSS选择器类似

查找元素DOM元素就是利用js选择页面中的标签元素

根据CSS选择器来获取

1、选择匹配的第一个元素

语法：document.querySelector（‘css选择器’）

参数：包含一个或多个有效的CSS选择器字符串

返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象

如果没有匹配，返回null

2.选择匹配的多个元素

语法：document.querySelectorAll（‘css选择器’）

参数：包含一个或多个有效的CSS选择器字符串

返回值：CSS选择器匹配的NodeList 对象集合

const lis=document.querySelect（‘ul li’）

console.log（lis）

获取一个DOM元素用querySelector（），可以直接修改

获取多个DOM元素用querySelectorAll（），

得到的是一个伪数组，有长度由索引号的数组，但是没有pop（） push()数组方法

只能通过遍历的方式给里面的元素做修改

注意他们小括号里面的必须是字符串且必须是引号

2.2操作元素内容

学习路径：

1.对象.innerText属性

将文本内容添加或更新到任意标签位子

显示纯文本，不解析标签

2.对象.innerHTML属性

将文本内容添加或更新到任意标签位置

会解析标签，多标签建议使用模版字符

3.操作元素常用属性

可以通过JS设置或修改标签元素属性，比如通过src跟换图片

常见属性：href、title、src等

语法：

对象.属性 = 值

4.操作元素样式属性

可以通过JS设置/修改标签元素样式属性

比如通过轮播图小圆点自动更换颜色样式
点击按钮可以滚动图片

学习路径:

1.通过style属性操作CSS

语法：

对象.style.样式属性 = 值

2.操作类名（className）操作CSS

如果操作的元素比较多，直接用style属性比较繁琐，我们可以借助于CSS类名的形式

语法：

//active是一个类名
元素.className = 'active'

注意：

1、由于class是关键字，所以使用className去代替

2.className是使用新值换旧值，如果需要添加一个类，就需要保留之前的类名

<body>
  <div class="nav"></div>
  <script>
    //1.获取元素
    const div = document.querySelector('div')
    //2.添加类名
    div.className = 'box'
//现在这个类名为box,而不是nav
  </script>
</body>

而如果两个类名都想要可以使用

div.className = 'nav box'

3.通过classsList操作类控制CSS

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')

classList是追加和删除不影响以前的类

5.操作表单元素属性

表单很多情况，也需要修改属性，比如眼睛，可以看到密码，本质是把表单类型转换位文本框

正常的有属性有取值的，跟其他的标签属性没有任何区别

获取：DOM对象.属性名

设置：DOM对象.属性名=新值

表单.value='用户名'

表单.type='password'

innerHTML得不到表单内容

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性，如果false代表移除了该属性，如disabled(禁用)、checked、selected

6.自定义属性

标准属性：标签天生自带的属性比如class id title等可以点击直接使用语法操作，比如disabled、checked、selected

自定义属性：

在html5中推出了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取

1.5 定时器-间歇函数

定时器函数可开可关

1.开启定时器

setInterval(函数，间歇时间)

作用：每隔一段时间调用这个函数

间隔时间单位是毫秒

qwerty....

关注

20
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫