首页 > 其他 > 详细

BOM知识概要

时间:2021-01-18 22:13:39      阅读:22      评论:0      收藏:0      [点我收藏+]

(1)screen
显示器的宽度 .availWidth
显示器的高度 .availHeight

(2)navigator
浏览器名称 .appName
浏览器版本 .appVersion
浏览器语言 .language

(3)location
地址名称 .href
端口号 .port
替换当前页面 .replace("要替换的页面")
加载新页面 .assign("新加载的页面")

(4)history
.go()
1.括号里负值:-n 返回前n页
2.括号里0:刷新当前页面
3.正值:n 后面第n页
返回前一页 .forward()
返回后一页 .back()

(5)document(DOM)
属性节点
判断是否存在要查找的属性
删除属性
获取属性值:是获取属性名的属性值
新增属性:若不存在该属性,则是新增
修改属性:若存在该属性,则是修改
节点
元素节点
添加元素节点
1.创建新节点
(1)创建元素节点
(2)创建文本节点
(3)把文本节点添加到元素节点
2.添加节点
(1)获取被添加的元素节点
(2)把创建的节点,添加给获取的元素节点
文本节点
创建文本节点
属性节点
获取自定义属性
创建注释节点
快速获取节点
通过标签名获取元素document.getElementsByTagName("");
通过Name 值获取元素document.getElementsByName("");
通过class获取元素document.getElementsByClassName("");
通过ID获取元素document.getElementById("f72");
document.querySelector("");
返回第一个满足条件的元素
document.querySelectorAll("");
返回所有满足条件的元素
querySelector和querySelectorAll不是实时更新的,即一直保留获取那一刻的节点内容。
后面的操作(增、删、改、查等)对其无效,依然使用保存那一刻的节点信息
获取节点
获取父元素节点
获取子节点
获取第一个子节/最后一个子节点
获取子元素节点
获取第一个子元素节点
获取最后一个子元素节点

获取所有子节点
获取所有子元素节点

获取兄弟节点元素

获取兄弟元素节点

删除节点
替换节点
1.先获取父元素节点 2.替换节点 3.替换那个元素
书写格式:父元素节点.replaceChild(A,B)
功能:A替换B 如果是新建的元素节点,直接替换
如果是原有的元素节点,元素节点从原来的位置移动替换
克隆节点
书写格式:标示符 = 节点名称.cloneNode(布尔值);
深克隆:参数是true,表示会把子节点和后代节点一起克隆
浅克隆:参数是false,只克隆当前节点,不包含其子节点和后代节点
获取节点的样式

classList
获取元素节点类名集合,通过下标获取相应的值 classList[下标]
判断是否包含要查找的类名
返回 true或false
.contains("")
书写格式:.toggle(类名) 有类名则删除,没有则添加
删除classList里的类名
书写格式:元素节点.classList.remove(删除的类名);

 

事件
基础知识
三要素:
1.事件源:绑定事件的节点
2.事件处理函数:当事件触发时调用的函数
3.事件类型:鼠标单击事件
DOM0与DOM2的区别
1.DOM0相同事件类型只能绑定一个事件处理函数
2.DOM2相同事件类型可以绑定多个事件处理函数


DOM2的书写格式:事件源.addEventListener(参数1,参数2,参数3);
参数1:事件类型
参数2:事件处理函数
参数3:事件流(boolean,默认值是false)
监听和删除监听事件
监听事件
书写格式:事件源.addEventListener(“”,fuction(){});
删除监听事件
书写格式:事件源.removeEventListener(“”,fuction(){});
鼠标事件
click鼠标单击
书写格式:事件源.addEventListener(“click”,fuction(){});
dblclick鼠标双击
书写格式:事件源.addEventListener(“dblclick”,fuction(){});
鼠标移入/移出(不考虑子元素)
鼠标移入
mouse enter(不考虑子元素)
鼠标移入后代节点时不会触发祖先节点的事件
鼠标移出
mouse leave(不考虑子元素)
鼠标移入后代节点时不会触发祖先节点的事件
鼠标移入/移出(考虑子元素)
鼠标移入
mouth over(要考虑子元素)
鼠标移入后代节点时会触发祖先节点事件

鼠标移出
mouse out (考虑子元素)
鼠标移入后代节点时会触发祖先节点事件
鼠标移动
书写格式:事件源.addEventListener(“mousemove”,fuction(){});
鼠标抬起
书写格式:事件源.addEventListener(“mouseup”,fuction(){});
鼠标按下
书写格式:事件源.addEventListener(“mousedown”,fuction(){});
鼠标在浏览器的位置
鼠标在浏览器的位置
以视口获取鼠标的距离
鼠标距离浏览器的左侧距离",event.clientX
鼠标距离浏览器的顶部距离",event.clientY
以页面获取鼠标的距离
鼠标距离浏览器的左侧距离",event.pageX
鼠标距离浏览器的顶部距离",event.pageY
注:1.有滚动条时,两个值就会不相同 2.无滚动条
时,两个值相同
阻止
阻止默认事件
event.preventDefault();
阻止冒泡
event.stopPropagation();
阻止捕获
event.stopImmediatePropagation();
表单事件
焦点事件(输入框点击时触发)
书写格式:事件源.addEventListener(“focus”,fuction(){});
失去焦点事件
书写格式:事件源.addEventListener(“blur”,fuction(){});
输入事件(输入时触发)
书写格式:事件源.addEventListener(“input”,fuction(){});
改变事件
书写格式:事件源.addEventListener(“change”,fuction(){});
键盘事件
键盘按下时,触发事件
书写格式:事件源.addEventListener(“keydown”,fuction(){});
键盘抬起时,触发事件
书写格式:事件源.addEventListener(“keyup”,fuction(){});
可以识别的字符键(数字、字母、标点符号、回车、空格)
书写格式:事件源.addEventListener(“keypress”,fuction(){});
event.keyCode获取键盘所对应的ASC码
event.key获取输入的按键是什么
页面事件
监听滚动条
书写格式:window.addEventListener(“scrooll”,fuction(){});

window
属性
浏览器距离屏幕左侧尺寸 .screenX
浏览器距离屏幕顶部尺寸 .screenY
浏览器距离屏幕左侧尺寸 .screenLeft
浏览器距离屏幕顶部尺寸 .screenTop
浏览器宽度 .outerWidth
浏览器高度 .outerHeight
视口尺寸
浏览器宽度 .innerWidth
浏览器高度 .innerHeight
浏览器水平滚动条移动尺寸 .pageXOffset
浏览器垂直滚动条移动尺寸 .pageYOffset
浏览器水平滚动条移动尺寸 .scrollX
浏览器垂直滚动条移动尺寸 .scrollY
方法
提示框 .alert()
打开网页 .open("")
参数1:新页面地址
参数2:打开方式(当前页面或打开新页面)
参数3:打开页面的尺寸
参数4:boolean 是否替换当前的历史记录

 

自己整理的,有错误或不足,还望指正!

BOM知识概要

原文:https://www.cnblogs.com/liu01/p/14295312.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!