房屋装修全包清单,百度seo推广,传奇霸业手游官网,老薛主机卸载wordpress文章目录 Web API基本认知一、 变量声明二、 DOM1. DOM 树2. DOM对象3. 获取DOM对象(1)、选择匹配的第一个元素(2)、选择匹配多个元素 三、 操作元素1. 操作元素内容2. 操作元素属性(1)、常用属性#xff08;href之类的#xff09;(2)、通过style属性操作CSS(3)、通过类名(cl… 文章目录 Web API基本认知一、 变量声明二、 DOM1. DOM 树2. DOM对象3. 获取DOM对象(1)、选择匹配的第一个元素(2)、选择匹配多个元素 三、 操作元素1. 操作元素内容2. 操作元素属性(1)、常用属性href之类的(2)、通过style属性操作CSS(3)、通过类名(className)操作CSS(4)、通过classList操作控制CSS(5)、操作表单元素属性(6)、自定义属性 四、 定时器-间歇函数1. 开启定时器2. 关闭定时器 Web API基本认知
web API包括DOM和BOM
一、 变量声明
建议const优先尽量使用const。有了 变量先给const后面发现是要被修改的再改为let。
const 声明的变量的值不能更改而且const声明变量的时候需要里面进行初始化但是对于引用数据类型const声明的变量里面存的不是值是地址。
什么时候使用let声明变量
如果基本数据类型的值或者引用数据类型的地址发生变化的时候需要用let
案例一问以下内容可不可以把let 改为 const let num1 prompt(输入第一个数值)let num2 prompt(输入第二个数值)alert(两者相加的结果是${num1 num2})let person {uname: Tom,age: 19}person.address 山东可以因为变量的内容没发生变化
案例二
二、 DOM
DOM–文档对象模型操作网页内容实现用户交互
1. DOM 树
HTML 文档以树状结构直观的表现出来我们称之为文档树或 DOM 树直观的体现了标签与标签之间的关系。
2. DOM对象
DOM对象怎么创建的
浏览器根据html标签生成的 JS对象DOM对象DOM的核心就是把内容当对象来处理
html里的标签对应到dom树里是一个个的JS对象。比如div在html里是标签通过JS获取过来在dom树里div是个对象div不同的属性就是对象的属性。
document对象
是 DOM 里提供的一个对象是dom树里最大的对象网页所有内容都在document里面
3. 获取DOM对象
根据CSS选择器来获取DOM元素
(1)、选择匹配的第一个元素
document.querySelector(css选择器) //在style里怎么写css选择器这里就可以怎么填返回值CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到则返回null。
(2)、选择匹配多个元素
document.querySelectorAll(css选择器) 返回值CSS选择器匹配的NodeList 对象集合。得到的一个伪数组有长度、索引号的数组。但是不能用push等数组方法。
body!-- 练习 依次输出3个li的DOM对象 --ul classnavli我的首页/lili产品介绍/lili联系方式/li/ulscript// 2. 选择匹配的多个元素 querySelectorAll 返回伪数组const lis document.querySelectorAll(ol li)console.log(lis);// 练习--依次输出3个li的DOM对象const navList document.querySelectorAll(.nav li)for (let index 0; index navList.length; index) {console.log(navList[index]);}/script
/body三、 操作元素
1. 操作元素内容
innerText修改文本内容不解析标签innerHTML修改文本内容解析标签
bodydiv classbox这是文本内容/divscript// 1. innerText 不解析标签const box document.querySelector(.box)box.innerText 改成innerText// 2. innerHTML 可解析标签box.innerHTML 改成inner HTMLbox.innerHTML strong改成inner HTML/strong/script
/body2. 操作元素属性
(1)、常用属性href之类的
常用属性比如hreftitlesrc 语法对象.属性 值
(2)、通过style属性操作CSS
语法对象.style.样式属性 值
注 如果属性有-连接符需要转换为小驼峰命名比如background-color,此处需写成backgroundColor 赋值的时候不要忘记加css单位
bodydiv classboxdiv/divscript//获取对象const box document.querySelector(.box)box.style.width 200pxbox.style.height 200pxbox.style.backgroundColor skyblue/script
/body(3)、通过类名(className)操作CSS
如果修改的样式比较多直接通过style属性修改比较繁琐可以通过借助于css类名的形式。 语法对象.className 类名 className的本质是替换类名如果需要添加类名需要保留之前的类名
style.test {width: 200px;height: 200px;background-color: greenyellow;}.test2 {width: 250px;height: 250px;color: purple;}
/style
bodydiv classtestclassName测试/divscript// className操作CSS// (1)获取元素const testBox document.querySelector(.test)// (2)修改类名,覆盖原来的类名testBox.className test2// 若仍要保持原来的属性testBox.className test test2/script
/body(4)、通过classList操作控制CSS
为了解决className 容易覆盖以前的类名我们可以通过classList方式追加和删除类名
// 追加一个类
testBox.classList.add(类名)
// 删除一个类
testBox.classList.remove(类名)
// 切换一个类有则删掉没有就加上
testBox.classList.toggle(类名)toggle类似于开关可用于切换背景模式(白天黑夜)
(5)、操作表单元素属性
获取表单值用valueinnerHTML获取不到表单的值设置表单属性 DOM对象.属性名 值表单中添加就有效果,移除就没有效果的属性一律使用布尔值表示。如果为true 代表添加了该属性 如果是false 代表移除了该属性比如disabledcheckedselected.
bodyinput typetext valuecomputerbrbrinput typecheckbox idhobby name喝酒 checked 喝酒input typecheckbox idhobby name抽烟 抽烟input typecheckbox idhobby name烫头 烫头brbrinput typebutton disabled classbutonscript// 获取表单的值 value属性const ipt document.querySelector(input)console.log(ipt.value); // computer// console.log(ipt.innerHTML); innerHTML获取不到表单的值// 设置表单的值ipt.value treeipt.type passwordconsole.log(ipt.value); // tree// 复选框const hobbys document.querySelectorAll(#hobby)hobbys[0].checked false// 字符串只有null或空字符串会被解析为false,这里只接受boolean值,发生了隐式转换hobbys[1].checked true// 按钮disabledconst buton document.querySelector(.buton)buton.disabled false/script
/body(6)、自定义属性
data-自定义属性注意要以data- 开头。DOM对象上通过dataset对象获取自定义的属性
body!-- data-自定义属性 --div data-id1 data-namenothing1/divdiv data-id22/divdiv data-id33/divdiv data-id44/divdiv data-id55/divscriptconst one document.querySelector(div)console.dir(one);console.log(one.dataset.id); // 1console.log(one.dataset.name); // nothing/script
/body四、 定时器-间歇函数
1. 开启定时器
语法 setInterval(函数名,间隔时间)
该函数返回的是该定时器的id。每隔一段时间调用这个函数参数间隔时间的单位是毫秒函数不是立即执行而是过了间隔时间后执行该函数 也就是间隔时间执行函数间隔时间执行函数而不是执行函数间隔时间执行函数间隔时间
// 匿名函数
let num setInterval(function () {
console.log(3秒钟执行一次);
}, 1000)// 不用匿名函数
function fn () {
console.log(1S执行一次);
}
let num2 setInterval(fn, 1000) //如果是写fn()的话,则会出错,因为fn()是调用函数2. 关闭定时器
语法clearInterval(定时器id)
// 关闭定时器2
clearInterval(num2)
