铁岭网站seo,安徽省建设工程质量与安全协会官网,网站的主机地址,返利的网站怎么做站在巨人的肩膀上 黑马程序员前端JavaScript入门到精通全套视频教程#xff0c;javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 #xff08;六#xff09;Dom 获取属性操作
以下的变量可以将 let 改为 const#xff1a;
let arr [red, green]
arr.pu…站在巨人的肩膀上 黑马程序员前端JavaScript入门到精通全套视频教程javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 六Dom 获取属性操作
以下的变量可以将 let 改为 const
let arr [red, green]
arr.push(pink)
console.log(arr) // [red, green, pink]let person {uname: pink老师,age: 18,gender: 女
}
person.address 武汉黑马
console.log(person)const 声明的值不能更改而且 const 声明变量的时候需要里面进行初始化但是对于引用数据类型const 声明的变量里面存的不是值是地址
// 以下写法错误因为他们地址不一样
const names []
names [1,2,3]const obj {}
obj {uname: pink老师
}// 应该如下写法
const names []
names[0] 1
names[1] 2
names[2] 3const obj {}
obj.uname pink老师为什么const声明的对象可以修改里面的属性 因为对象是引用类型里面存储的是地址只要地址不变就不会报错建议数组和对象使用 const 来声明 声明变量先给const如果发现它后面是要被修改的再改为let如果基本数据类型的值或者引用类型的地址发生变化的时候需要用let
1. Web API 基本认知
1.1 作用和分类
作用: 就是使用 JS 去操作 html 和浏览器分类DOM (文档对象模型)、BOM浏览器对象模型
1.2 什么是DOM
DOMDocument Object Model——文档对象模型是用来呈现以及与任意 HTML 或 XML文档交互的API白话文DOM是浏览器提供的一套专门用来 操作网页内容 的功能DOM作用 开发网页内容特效和实现用户交互
1.3 DOM树
DOM树是什么 将 HTML 文档以树状结构直观的表现出来我们称之为文档树或 DOM 树描述网页内容关系的名词作用文档树直观的体现了标签与标签之间的关系
1.4 DOM对象重要
DOM对象浏览器根据html标签生成的 JS对象 所有的标签属性都可以在这个对象上面找到修改这个对象的属性会自动映射到标签身上 DOM的核心思想 把网页内容当做对象来处理 document 对象 是 DOM 里提供的一个对象所以它提供的属性和方法都是用来访问和操作网页内容的 例document.write() 网页所有内容都在document里面
2. 获取DOM对象
查找元素DOM元素就是利用 JS 选择页面中标签元素。
2.1 根据CSS选择器来获取DOM元素 (重点)
选择匹配的第一个元素
语法document.querySelector(css选择器)参数 包含一个或多个有效的CSS选择器 字符串 返回值 CSS选择器匹配的第一个元素一个 HTMLElement对象。如果没有匹配到则返回null。 多参看文档https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
选择匹配的多个元素
语法document.querySelectorAll(css选择器)参数 包含一个或多个有效的CSS选择器 字符串 返回值 CSS选择器匹配的NodeList 对象集合 例如document.querySelectorAll(ul li)document.querySelectorAll(css选择器) 得到的是一个伪数组 有长度有索引号的数组但是没有 pop() push() 等数组方法
想要得到里面的每一个对象则需要遍历for的方式获得。哪怕只有一个元素通过querySelectAll() 获取过来的也是一个伪数组里面只有一个元素而已querySelector() 只能选择一个元素可以直接操作。querySelectorAll() 可以选择多个元素得到的是伪数组需要遍历得到每一个元素。小括号里面的参数的注意事项 里面写css选择器必须是字符串也就是必须加引号。
2.2 其他获取DOM元素方法了解
// 根据 id 获取一个元素
document.getElementById(nav)
// 根据标签获取一类元素。获取页面所有div
document.getElementsByTagName(div)
// 根据类名获取元素。获取页面所有类名为w的
document.getElementsByClassName(w)3. 操作元素内容
DOM对象都是根据标签生成的所以操作标签本质上就是操作DOM对象。就是操作对象使用的点语法。如果想要修改标签元素的里面的内容则可以使用如下几种方式 对象.innerText 属性对象.innerHTML 属性
3.1 元素 innerText 属性
将文本内容添加/更新到任意标签位置显示纯文本不解析标签例子const info document.querySelector(.info)
// 获取标签内部的文字
// console.log(info.innerText)
// 添加/修改标签内部文字内容
info.innerText 哈哈,你好...3.2 元素 innerHTML 属性
将文本内容添加/更新到任意标签位置会解析标签多标签建议使用模板字符例子const info document.querySelector(.info)
// 获取标签内部的文字
// console.log(info.innerHTML)
// 添加/修改标签内部文字内容
info.innerHTML 哈哈,strong你好/strong...4. 操作元素属性
4.1 操作元素常用属性
还可以通过 JS 设置/修改标签元素属性比如通过 src更换 图片最常见的属性比如 href、title、src 等语法对象.属性 值例子// 1. 获取元素
const pic document.querySelector(img)
// 2. 操作元素
pic.src ./images/b02.jpg
pic.title 你好4.2 操作元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。 比如通过轮播图小圆点自动更换颜色样式点击按钮可以滚动图片这是移动的图片的位置 left 等等 学习路径 通过 style 属性操作CSS操作类名(className) 操作CSS通过 classList 操作类控制CSS
通过 style 属性操作CSS
语法对象.style.样式属性 值例子const box document.querySelector(.box)
// 修改元素样式
box.style.width 200px
box.style.marginTop 15px
box.style.backgroundColor pink注意 修改样式通过style属性引出如果属性有-连接符需要转换为小驼峰命名法赋值的时候需要的时候不要忘记加css单位 标签选择body时因为body是唯一的标签可以直接写 document.body.style。
操作类名(className) 操作CSS
如果修改的样式比较多直接通过style属性修改比较繁琐我们可以通过借助于css类名的形式。语法// active 是一个 css 类名
元素.className active注意 由于class是关键字, 所以使用className去代替className是使用新值换旧值如果需要添加一个类需要保留之前的类名
通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名我们可以通过classList方式追加和删除类名语法// 追加一个类
元素.classList.add(类名)
// 删除一个类
元素.classList.remove(类名)
// 切换一个类
元素.classList.toggle(类名)4.3 操作表单元素属性
表单很多情况也需要修改属性比如点击眼睛可以看到密码本质是把表单类型转换为文本框正常的有属性有取值的 跟其他的标签属性没有任何区别获取: DOM对象.属性名设置: DOM对象.属性名 新值
表单.value 用户名
表单.type password表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性。比如 disabled、checked、selected
4.4 自定义属性
标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如disabled、checked、selected自定义属性 在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取 例子bodydiv classbox data-id10盒子/divscriptconst box document.querySelector(.box)console.log(box.dataset.id)/script
/body5. 定时器-间歇函数
5.1 定时器函数介绍
网页中经常会需要一种功能每隔一段时间需要自动执行一段代码不需要我们手动去触发例如网页中的倒计时要实现这种需求需要定时器函数定时器函数有两种下面先介绍间歇函数
5.2 定时器函数基本使用
定时器函数可以开启和关闭定时器
开启定时器setInterval(函数, 间隔时间)作用每隔一段时间调用这个函数间隔时间单位是毫秒
例子funcion repeat() {console.log(前端程序员)
}
// 每隔一秒调用 repeat 函数
setInterval(repeat, 1000)注意 函数名字不需要加括号定时器返回的是一个id数字
关闭定时器let 变量名 setInterval(函数, 间隔时间)
clearInterval(变量名)一般不会刚创建就停止而是满足一定条件再停止。例子let timer setInterval(funcion() {console.log(前端程序员)
}, 1000)
clearInterval(timer)
