javaScript学习笔记（8.19）
文章目录
-
- 对象
-
- 对象的定义
- 增删改查
- 遍历对象
- Web API
-
- DOM(文档对象模型)
-
- DOM树
- DOM对象
- 获取DOM元素
- 操作元素内容
- 修改元素属性
- 操作元素样式属性(对象.style.样式属性=新值)
- 通过类名修改样式属性
- 通过classList操作样式属性
- 操作表单元素属性
- 自定义属性
- 定时器--间歇函数
- 事件监听
- 节点操作
对象
对象的定义
let obj = {
name: "小明",
age: 18,
height: "1.70m",
//定义方法
obj: function() {
document.write(this.name);
document.write(this.age);
}
}
增删改查
- 增加属性(对象名.属性名 = 赋值)
let obj = {
name:"小明",
}
obj.age=18
- 删除属性(delete 对象名.属性名)
let obj = {
name:"小明",
}
delete obj.name
- 修改属性值(对象名.属性名 = 新值)
- 查找属性值(对象名.属性名)
遍历对象
for (let k in obj) {
document.write(k + ":");
document.write(obj[k]);
document.write("
");
}
Web API
DOM(文档对象模型)
DOM树
- 作用：将html文档以树状的形式表示出来，直观地体现了标签与标签之间的关系。
DOM对象
- 根据html标签生成的js对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个标签的属性会自动映射到标签身上
- 核心思想：把网页内容当作对象来处理
获取DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<script>
const dom = document.querySelector('div');
console.log(dom)
const li = document.querySelector("ul li:first-child");
console.log(li)
</script>
</body>
</html>
操作元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0" >
<title>Document</title>
</head>
<body>
<div class="box">我是文本内容</div>
<script>
//1.获取元素
const dom = document.querySelector(".box");
//2.修改元素文字内容
dom.innerText = "我是一个盒子";
//3解析元素
dom.innerHTML = "修改标签"
</script>
</body>
</html>
修改元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改元素属性</title>
</head>
<body>
<img src="1.jpg" alt="">
<script>
// 1.获取标签元素
let img=document.querySelector("img");
// 2.修改图片对象属性,对象.属性 = 赋值
img.src="2.jpg";
</script>
</body>
</html>
操作元素样式属性(对象.style.样式属性=新值)
注意：
- 修改样式通过style引出
- 如果属性有-连接符，要改为小驼峰命名，eg：background-Color 要改为backgroundColor
- 赋值的时候，需要的时候不要忘记css单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:200px;
height:300px;
background-color: bisque;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 1.获取元素
let div = document.querySelector('.box');
// 2.修改元素样式属性
div.style.width = '500px';
</script>
</body>
</html>
通过类名修改样式属性
- 语法：元素.className=“类名”
- 使用环境：如果要修改的样式比较多，直接通过style修改比较繁琐，可以使用css类名的形式
- 注意：
- 由于class是关键字，所以使用className去替代
- className是使用新值替换旧值，如果需要添加一个类，则需要保留之前的类名
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:500px;
height:600px;
background-color: beige;
border:1px solid pink;
color:red
}
</style>
</head>
<body>
<div class="box">111111111111</div>
<script>
// 1.获取元素
let div = document.querySelector('div');
// 2.添加类名
div.className="box";
</script>
</body>
</html>
通过classList操作样式属性
- 为了解决className容易覆盖以前的类名的问题，可以通过classList追加和删除类名
- 语法：
- 元素.classList.add(“类名”)；//追加一个类
- 元素.classList.remove(“类名”)；//删除一个类
- 元素.classList.toggle(“类名”)；//切换一个类
- 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:300px;
height:200px;
color:red;
}
.active{
color:powderblue;
background-color: pink;
font-size: large;
}
.delete{
width:20px;
height:30px;
}
</style>
</head>
<body>
<div class="box">文字</div>
<script>
// 1.获取元素
let div = document.querySelector("div");
// 2.添加类
div.classList.add("active");
div.classList.add("delete");
//3.删除类
div.classList.remove("delete");
// 4.切换类，如果目前有就删掉，没有就添加上
div.classList.toggle("active");
</script>
</body>
</html>
操作表单元素属性
- 表单有很多情况，也需要修改属性
- 使用innerHtml获取不到表单内容
- 表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="请输入">
<script>
//1.获取元素
const uname=document.querySelector("input")
// 2.获取值
console.log(uname.value);
</script>
</body>
</html>
自定义属性
- 标准属性：本身既有的属性，如class id title等
- 自定义属性：
- 在html5中推出的专门的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box" data-id="10">盒子标签</div>
<script>
//获取元素
const box=document.querySelector(".box");
//调用
console.log(box.dataset.id);
</script>
</body>
</html>
定时器–间歇函数
- 使用场景
- 网页中通常需要每隔一段时间执行一段代码，不需要手动去触发
- 网页中的倒计时
- 开启定时器
- setInterval(函数，间隔时间)
- 作用:每隔一段时间调用一次函数
- 间隔时间单位为毫秒
- 注意：
- 开启定时器的函数不需要加小括号
- 定时器有一个返回值，是一个id数字，表示定时器的序号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function out(){
document.write("定时器触发");
document.write("
");
}
setInterval(out,1000);
</script>
</body>
</html>
- 关闭计时器
- clearInterval(计时器编号)
- 倒计时案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="btn" disabled>倒计时（10）</button>
<script>
let i = 10;
let btn = document.querySelector(".btn");
function time(){
i--;
btn.innerHTML="倒计时（" + i + ")";
if(i==0){
clearInterval(n);
btn.disabled=false;
btn.innerHTML="倒计时结束";
}
}
let n = setInterval(time,1000);
</script>
</body>
</html>
事件监听
- 语法：元素对象.addEventListener(‘事件类型’,要执行的函数)
- 三要素：
- 事件源：哪个dom元素被事件触发，要获取dom元素
- 事件类型：用什么方式触发
- 事件调用函数：要做什么事情
- 注意：
- 事件类型要加引号
- 函数都是点击之后再去试行，点击一次执行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="btn">按钮</button>
<script>
const btn = document.querySelector(".btn");
btn.addEventListener("click",function(){
alert("按钮被点击了")
})
</script>
</body>
</html>
节点操作
- DOM 节点
- DOM树里每一个内容都称之为节点
- 节点类型
- 元素节点
- 所有的标签
- html是根节点
- 属性节点
- 所有的属性
- 文本节点
- 所有的文本
- 其他
- 元素节点
- 查找节点
- 父节点查找
- parentNode属性
- 返回最近一级的父节点，找不到返回null
- 子元素.parentNode
- 父节点查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="dad">
<div class="son">子节点</div>
</div>
<script>
const son = document.querySelector(".son");
console.log(son.parentNode);//获取父节点
</script>
</body>
</html>
- 子节点查找
- childNodes
- 获得所有子节点，包括文本节点（空格、换行）、注释节点等
- children属性
- 仅获得所有元素节点
- 返回的还是一个伪数组
- 父元素.children
- childNodes
- 兄弟节点查找
- 下一个兄弟节点
- nextElementSibling属性
- 上一个兄弟节点
- previousElementSibling 属性
- 下一个兄弟节点
- 增加节点
- 创建节点
- documen.createElement(‘标签名’)
- 追加节点
- 插入到父元素的最后一个子元素
- 父元素.appendChild(要插入的元素)
- 插入到父元素的某个子元素前面
- 父元素.insertBefore(要插入的元素，在哪个元素前面)
- 插入到父元素的最后一个子元素
- 创建节点
- 删除节点
- 父元素.removeChild(要删除的元素)