2022-8-25 第四组 曹雨 Java script HTML元素操作，BOM

对HTML元素的操作

获取某个元素的属性的值：

方法1：元素.属性名

特别注意：元素.属性名的方式只适用于元素原生的属性，自定义的属性是拿不到的
例子：

console.log(div.id)

方法2：使用元素.getAttribute("属性名/自定义属性名")

这个方法不论是原生属性，还是自定义属性都可以拿到
例子：

div.getAttribute("name")

设置元素的属性：

不能使用“元素.属性名”的方法这个方法是取值的，不是赋值的

方法：setAttribute(（参数1：属性名）,（参数2：要给属性赋的值）)

例子：

div.setAttribute("haha","name")

如果重复的给同一属性赋值会覆盖前面设置的值

删除属性

方法：removeAttribute(属性名)

例子：

div.removeAttribute("haha")

获取某个元素的所有属性：

  let div = document.querySelector("div")
拿到元素的所有属性，返回结果是一个属性节点的集合和映射
  div.attributes
  
  用下标取值
  div.attributes[1]

其他的一些补充：

对于class属性：

div.class = "fontstyle"是错误的
div.className = "fontstyle 才是正确的方法"

行内css样式：

 div.style = "color:yellow;display:inline"; 

BOM

回调函数

定义一个函数，这个函数的参数是另一个函数

setTimeout（定时器）

setTimeout的参数：

参数1：函数
参数2：延迟时间

let timer = setTimeout(function(){
coosole.log("123")
},2000)
效果：在2s后向控制台打印123

清除定时器

clearTimeout()
括号中传的就是你要清楚哪一个计时器
比如上面的timer
clearTimeout（timer）

setInterval(周期性定时器)

 let timer = setTimeout(function(){
        alert("我爱你")
    },3000)
	效果：每过3s弹出一个"我爱你"

清楚周期性定时器：

 clearInterval(timer);

BOM操作浏览器：

浏览器自带一个小型数据库（）浏览器自带的一个map集合（键值对），永久保存

localStorage

localStorage将数据储存在浏览器会话中，并且数据可以长期保存，除非人为强行删除，否则数据不会消失

向Storage中设置键值对

window.localStorage.setItem("name","lucy")
window.localStorage.setItem("age",25);

从Storage中根据建获取值

console.log(localStorage.getItem("name"));

从Storage中删除对应的键值对

localStorage.removeItem("name")

sessionStorage

sessionStorage同样将数据存在浏览器会话中，但是当网页被关闭时，存储在sessionStorage中的数据会被清除
我们可以将sessionStorage看作是我们和浏览器打电话

弹窗：

警告弹窗

alert(1)

带有确认和取消的弹窗

confirm()
有返回值：点击确定返回ture，点击取消返回false

带有文本框输入的弹窗

文本框内输入的东西就是返回值
propmt（）

历史记录

hitory.go(“参数”)
参数大小是几就是走几步
参数是正数是前进
参数是负数是后退

浏览器左上角的两个小箭头的作用

事件：

添加一个事件

元素.addEventListener（（“添加触发的事件类型”）,(添加的事件要触发的函数)）

删除一个事件

元素.removeEventListener（（“添加触发的事件类型”）,(添加的事件要触发的函数)）

onsubmit事件：

• onsubmit是加在form表单上
• onsubmit要有return
• 函数也要返回boolean类型

事件冒泡

如果一个元素和他的子元素都有事件，那么它可以正常执行，但是当子元素执行事件时。除了要执行自己的事件，还要执行父元素的事件。
这种情况我们叫做事件冒泡。
在开发中，我们为了要避免这种情况的发生。

消除事件冒泡：

event.stopPropagation()