APIs -- 获取元素
变量声明:
变量声明有三个 var 、let 和 const:首先var 先排除,老派写法,问题很多,可以淘汰掉…
let or const 建议: const 优先
,尽量使用const
,
原因是:
- const 语义化更好
- 很多变量我们声明的时候就知道他不会被更改了,那直接用 const
- 实际开发中也是,比如react框架,基本const
数组和对象建议使用const来声明
- const 声明的值不能更改,而且const声明变量的时候需要里面进行初始化
- 但是对于引用数据类型,const声明的变量,里面存的不是 值,不是值,不是值,是
地址
。
1. Web API 基本认知
1.1 作用和分类
- 作用:就是使用JS去操作 html 和浏览器
- 分类: DOM(文档对象模型)、BOM (浏览器对象模型)
1.2 DOM
DOM(Document Object Model — 文档对象模型
)是用来呈现以及与任意HTML或XML文档交互的API
简言之 DOM 是浏览器提供的一套操作网页内容的功能(用来动态修改 HTML ),其目的是开发网页特效及用户交互。
1.3 DOM树
- 将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树
- 描述网页内容关系的名词
- 作用:
文档树直观的体现了标签与标签之间的关系
1.4 DOM对象(重点)
浏览器根据html标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
DOM的核心思想:
- 把网页内容当做
对象
来处理
document 对象
- 是 DOM 里提供的一个
对象
- 所以它提供的居性和方法都是
用来访问和操作网页内容的
例: document.write() - 网页所有内容都在document里面
2. 获取DOM对象
2.1 根据CSS选择器获取(重点)
查找/获取元素DOM元素利用JS选择页面中标签元素
- 选择匹配的第一个元素
语法:document.querySelector('css选择器')
参数:包含一个或多个有效的css选择器字符串(所以要加引号
)
返回值:css选择器匹配的第一个元素
,一个HTMLElement对象
- 如果没有匹配到,则返回null
const box = document.querySelector('div')
const box = document.querySelector('.box')
const nav = document.querySelector( '#nav')
// 1.我要获取第一个小 uL Li
const li = document.querySelector('ul li:first-child')
- 选择匹配多个元素
语法:document.querySelectorAll('css选择器')
参数:包含一个或多个有效的css选择器字符串(所以要加引号
)
返回值:css选择器匹配的NodeList对象集合
,一个HTMLElement对象
// 2.选择所有的小Li
const lis = document.querySelectorAll('ul li')
document.querySelectorAll(‘css选择器’)得到的是个伪数组
:有长度有索引号但是没有pop()push()等数组方法。先得到里面的每一个对象,需要遍历(for)的方式获得
2.2 其他获取DOM元素方法(了解)
// 根id获取一个元素
document .getElementById('nav')
// 根据标签获取一类元素 获取页面 所有div
document .getElementsByTagName('div')
// 根 名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w')
3. 操作元素内容
目标:修改元素的文本更换内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象(即使用点语法)。
3.1 对象.innerText属性
- 将文本内容添加/更新到任意标签位置
- 显示纯文本,不解析标签
3.2 对象.innerHTML属性
- 将文本内容添加/更新到任意标签位置
- 会解析标签,多标签建议使用模板字符
4. 操作元素属性
4.1 操作元素常用属性
通过JS 设置/修改标签元素属性,比如通过 src更换 图片
最常见的属性比如: href、title、src 等
语法:对象.属性 = 值
// 举例说明
// 1. 获取元素
const pic = document.querySelector( 'img')
// 2. 操作元素
pic.src = './images/b02.jpg'
pic.title ='刘德华演唱会'
4.2 操作元素样式
属性
还通过]S 设置/修改标签元素的样式属性比如通过 轮播图小回点自动更换颜色样式
点击按钮可以滚动图片,这是移动的图片的位置 left 等等
- 通过 style 属性操作CSS
- 操作类名(className)操作CSS
- 通过 classList 操作类控制CSS
const box = document.querySelector('.box')
// 修改元素样式
box.style.width = '200px'
box.style.marginTop = '15px'
box.style.backgroundColor = 'pink'
注意:
- 修改样式通过
style
属性引出 - 如果属性有-连接符,需要转换为
小驼峰
命名法 - 赋值的时候,需要的时候不要忘记加
CSS单位
4.2.1 通过 style 属性操作CSS
语法:对象.style.样式属性=值
4.2.2 操作类名(className)操作CSS
如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式
语法:
// active 是一个css类名
元素.className =active
注意:
- 由于class是关键字,所以使用className去代替
- className是使用新值
换
旧值,如果需要添加一个类,需要保留之前的类名
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}.nav {color: red;}.box {width: 300px;height: 300px;background-color: skyblue;margin: 100px auto;padding: 10px;border: 1px solid #000;}</style>
</head><body><div class="nav">123</div><script>// 1. 获取元素const div = document.querySelector('div')// 2.添加类名 class 是个关键字 我们用 classNamediv.className = 'nav box'</script>
</body></html>
4.2.3 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
语法:
// 追加一个类 类名不加点,并且是字符串
元素.classList.add('类名')
// 删除一个类元素 类名不加点,并且是字符串
元素.classList.remove('类名')
// 切换一个类 有就删除,没有就加上
元素.classList.toggle('类名')
4.3 操作表单元素
属性
表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置:DOM对象属性名=新值
表单.value ='用户名'
表单.type ='password'
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性。如: disabled、checked、selected
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- <input type="text" value="电脑"> --><input type="checkbox" name="" id=""><button>点击</button><script>// 1 获取元素// const uname = document.querySelector('input')// 2. 获取值 获取表单里面的值 用的 表单.value// console.log(uname.value) // 电脑// console.log(uname.innerHTML) innertHTML 得不到表单的内容// 3. 设置表单的值// uname.value = '我要买电脑'// console.log(uname.type)// uname.type = 'password'// 1. 获取const ipt = document.querySelector('input')// console.log(ipt.checked) // false 只接受布尔值ipt.checked = true// ipt.checked = 'true' // 会选中,不提倡 有隐式转换// 1.获取const button = document.querySelector('button')// console.log(button.disabled) // 默认false 不禁用button.disabled = true // 禁用按钮</script>
</body></html>
4.4 自定义属性
标准属性:标签天生自带的属性 比如lass id title等,可以直接使用点语法操作比如:disabled、checked、selectedt
自定义属性:
- 在html5中推出来了专门的data-自定义属性
- 在标签上一律以
data-
开头 - 在DOM对象上一律以
dataset
对象方式获取
<body><div class="box" data-id="19" data-spm="不知道">盒子</div><script>const box = document.querySelector('.box')console.log(box.dataset.id)console.log(box.dataset.spm)
</script>
</body>
5. 定时器 – 间歇函数
5.1 定时器函数介绍
网页中经常会需要一种功能: 每隔一段时间需要自动执行一段代码,不需要我们手动去触发。如:网页中的倒计时
要实现这种需求,需要定时器函数
5.2 定时器函数基本使用
5.2.1 开启定时器
语法:setInterval(函数,间隔时间)
作用: 每隔一段时间调用这个函数;间隔时间单位是毫秒
function repeat() {console.log('前端程序员,就是头发多')
}
// 每隔一秒调用repeat函数
setInterval(repeat, 1000)
注意:
- 函数名字不需要加括号
- 定时器返回的是一个id数字
5.2.2 关闭定时器
let 变量名 = setInterval(函数,间隔时间)
clearInterva1(变量名)
一般不会刚创建就停止,而是满足一定条件再停止
let timer = setInterval(function() {console.log('hi~~')
},1000)
clearInterval(timer)
注意:
- 函数名字不需要加括号
- 定时器返回的是一个id数字
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// setInterval(函数, 间隔时间)// setInterval(function () {// console.log('一秒执行一次')// }, 1000)function fn() {console.log('一秒执行一次')}// setInterval(函数名, 间隔时间) 函数名不要加小括号let n = setInterval(fn, 1000)// setInterval('fn()', 1000)console.log(n)// 关闭定时器clearInterval(n)// let m = setInterval(function () {// console.log(11)// }, 2000)// console.log(m)// const num = 10// num = 10// console.log(num)let i = 1setInterval(function () {i++document.write(`${i} `)}, 200)</script>
</body></html>
APIs -- 获取元素相关推荐
- Web APIs /APIs --DOM简述/DOM中获取元素方法/事件(含鼠标事件)/操作(含案例)
Web APIs Web APIs 和 JS 的关联性: Web APIs是 W3C 组织的标准,主要学习DOM 和 BOM Web APIs是 JS 所独有的部分 主要学习页面交互功能 Web AP ...
- JavaScript笔记8-DOM中的事件、获取元素、操作元素
目录 1.API和Web API 2.DOM简介 3.获取元素 3.1 根据 ID 获取 3.2 根据标签名获取 3.3 根据类名返回元素对象集合 3.4 根据选择器返回元素 3.5 获取特殊元素(b ...
- WebAPI第一天学习总结—— DOM、获取元素、事件基础、操作元素、节点操作
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
- 《web开发: JavaScript DOM获取元素》
一.JavaScript DOM获取元素 1. 如何获取页面元素 DOM在我们实际开发中主要用来操作元素 获取页面中的元素可以使用以下几种方式: (下面的方法都是Web APIs) 根据 ID 获 ...
- JavaScript DOM获取元素
API 和Web API 1.API API ( Application Programming Interface,应用程序编程接口)是一些预先定 义的函数,目的是提供应用程序与开发人员基于某软件 ...
- selenium常用命令之操作页面元素及获取元素内容的事件整理
/**id <input type="text" id="phone" name="phone" class="LoginT ...
- 如何获取元素最终使用的css值
这个问题是在组件css加载方案中碰到的 场景: 元素的样式我们可以写在style里面,也可以写到外链css里面,如果没有设置,也会读取浏览器默认的css的,现在我们要计算getComputedstyl ...
- Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
- 15DOM之获取元素方法
技术交流QQ群:1027579432,欢迎你的加入! 1.DOM简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或XML)的 ...
最新文章
- 工作 10 年后转行程序员,如今 35+ 岁并不焦虑!
- android 6.0 dm-verity技术,Android 7.0安全性大幅提升,要求严格强制执行验证启动
- 十、input与跳转
- 月均数据_程序员月均薪多少,2019全国互联网行业程序员就业大数据报告
- 终端zsh_只需七个步骤,即可使您的“ ZSH”终端站起来—直观指南
- python 操作mysql_Python 操作MySQL
- 元数据--MySQL获取元数据的方法
- 前端emojs_Emoji-Chat emoji表情包发送及显示兼容web端、移动端
- mySQL 开启事件存储过程
- 如何不运用第三方变量实现两个数的交换
- 深度学习笔记_评分函数/损失函数
- 指数平滑法——趋势平滑预测方法
- win7修复计算机 正常启动不了怎么办,Win7系统无法正常启动怎么办
- 555定时器应用之--多谐振荡器
- 英文之妙语连珠超级94句
- Chrome开发者工具,如何清除Cookies
- 看了鲁迅的平面设计,很多设计师表示可能要转行了
- 微处理器、微型计算机、微型计算机系统
- springCloud-day04
- BZOJ 1367 [Baltic2004]sequence