对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()
标签:25,Java,元素,localStorage,事件,浏览器,第四组,div,属性
From: https://www.cnblogs.com/figh466/p/16625668.html