BOM(浏览器对象模型)
window bom 核心对象;
组成
history
location
dom
screen
frames
navigator:浏览器制造商
属性
window——最顶层对象
window.screenLeft //浏览器到屏幕左上角的距离
window.screenTop //浏览器到屏幕顶部的距离
window.innerText //操作元素中包含的所有文本内容
window.innerWidth //获取浏览器宽度,可视部分宽度(内容)
window.innerHeight //获取浏览器高度,可视部分高度(内容)
document.documentElement.clientWidth // 获取浏览器尺寸
//client_客户端
window.screen.weight //屏幕分辨率
window.screen.height //屏幕分辨率
window.scrollTo() //控制滚动条位置
window.scrollBy() //控制滚动条位置
方法
window.resizeTo() //控制原窗口尺寸
window.moveTo(100,100) //移动浏览器到某位值
window.moveBy(100,100) //在原来基础上移动某值
时间函数
window.setInterval(callback, 1000) //按照指定周期不停执行某一函数,不是死循环
回调函数 时间/毫秒
function aa(){
alert(1)
}
setInterval(aa,1000) //aa后不加括号
清除时间函数(需要一个变量)
把时间函赋给变量,在用clearInterval(a)可以删除
window.setTimeout(aa,1000) //一段时间后自动执行某函数 执行一次
let a = window.setTimeout(aa,1000)
window.clearTimeout(a) //清除
其他方法
alert
prompt
confirm(‘确定退出吗?’) //自带确定和取消按钮的对话框 有返回值 true/false
open(”) close(”) //通过js打开/关闭一个窗口
window == self // 二者等价
iframe //标签,可以在一个窗口嵌套另一个窗口
history(历史记录)
history.length //历史记录的条数
history.back //返回
history.forward; //前进
history.go(0) //刷新
事件——3要素
1 事件:如何发生
2 事件源:发生在谁的身上
3 事件处理函数:要干什么
window.οnlοad=function(){ }
获取元素
let 变量名=document.getElementById(’ ‘)
获取表单元素的内容(value)
inputObj.value
dom元素文本的获取和设置
获取obj.innerText
设置obj.innerText=value
表单(form)
placeholder //默认提示信息
autofocus //自动对焦
autocomplete //自动填充
获取表单元素的值。value
操作标签中的值
label(自动聚焦)
08-10 Location(地址栏)
又名定位符,统一资源
location.href 返回或修改完整的地址
location.reload 重新加载
**打开新的页面**x
1 open(‘’)
2 replace(‘’) 无历史记录 不可返回
3 assign(‘’) 有历史记录,可返回
4 herf=“ A.html” 改变地址
DOM(文档对象模型)
document dom的核心对象
属性
document.URL=‘’ 只能读地址,不能写
document.title = ‘ ’ 获取文档标题;可进行设置
document.bgcolor
js引入
使用window.onload,可写在任意位置
不写window.onload,把script标签对写在最后。
方法
获取
#### 获取页面中第一个拥有指定id的元素
document.getElementById(‘id名’)
let box =document.getElementById(‘box’)
box.innerText=‘box’
#### 获取指定标签的**集合**
document.getElementsByTagName(’ 标签名’)
获取到的是一个集合,需要访问的时候使用下标的方式 eg: div[0].style.color=’blue’
可通过for循环遍历不允许越界访问,会报错
let box =document.getElementByTagName(’div’)
div[0].innerText=‘这是第一个div’
#### 指定范围 obj是一个dom对象,不是一个集合
let divs=obj.getElementByTagName(‘div’)
obj:代表某一范围
#### 通过类名获取
document.getElementsByClassName(’ class名’) //也是一个集合
获取页面中所有元素
let all = document.all
let all = document.getElemengtsByTagName(‘*’)
鼠标移入事件
click
dblclick //双击
onmouseover/onmouseout //鼠标移入移出
onmouseenter/onmouseleave //鼠标移入移出
onmousemove //移动
键盘
onkeydown
onkeyup
keypress //按族不妨
表单元素
focus //获得焦点
blur //失去焦点
change //获得焦点,并且值改变,
window
load
resize //当尺寸发生改变
innerHTML //识别标签对
innerText //不识别标签对
08-11
classList.add() //添加一个类名
classList.remove //移除一个类
classList.toggle //切换类
08-14
js——>jQuery——>后台(mysql,php)——>框架(react vue angular)nodeJs
获取外部样式:window.getComputedStyle(box,null)//只获取,不能设置
封装
/*
方便获取页面中元素,返回
添加window.onload事件
$(select)
参数:
select 选择器 #box(id选择器) .box(类名) div(标签)
函数—->window.onload
1.首字符 #->document.getElectmentById()
.->document.getElectmentsClassName()
符合字符(div img a span ol li ul form input h1-h6 p b u canvas audio video time code)
以字母开头
2.return
*/
function $(element,ranger=document){
if(typeof select=='string'){ //typeof判断数据类型
let selecter = select.tirm()
let firstChar = selecter.charAt(0) //获取首字符
if(firstChar=='#') {
return ranger.getElementById(selecter.substring(1) //截取 并返回
}else if(firstChar=='.'){
return ranger.getElementsByClassName(selecter.substring(1)) //截取 并返回
}else if(/^[a-zA-Z][a-zA-Z1-6]{0,8}$/.test(selecter)){ //匹配 是不是标签 / 正则 / 代表一个规则
return ranger.getElementsByTagName(selecter.substring(1))
}
}else if(typeof select=='function'){
window.onload()=function(){
select()
}
}
}
封装一个函数
function html(element,content){ //获取文本内容,可进行设置 2各参数,
if(arguments.length==2){
element.innerHTML=content
}
if(arguments.length==1){
return element.innerHTML
}
}
function text(element,content){ //获取文本那内容,不可设置
if(arguments.length==2){
element.innerText=content
}
if(arguments.length==1){
return element.innerText
}
}
function css(element,attrObj){ //js中设置样式
for(let i in attrObj){
element.style[i]=attrObj[i]
}
}
attrObj代表一个json对象 {width:’50px’,height:’500px’}
方法的继承
1.原型对象的继承方法//永久性
2.冒充的方法call //只用一次 //lisi要用zhangsan的方法 zhangsan.say.call(lisi)
只能冒充方法 传参的时候穿的是数 zhangsan.say.call(lisi1,2,3)
3.申请 apply 传参的时候传的是数组 zhangsan.say.apply(lisi,[1,2])
获取在页面中占得实际尺寸(box.offsetWidth)(box.offsetHeight)
获取在页面中占得设置的尺寸 getComputedStyle(box,null)
文档对象模型:
html:文档节点:
标签:元素节点
属性:属性节点
注释:注释节点
通过节点之间的关系获取元素
获取元素的新方法:document.querySelector(‘选择器’)
document.querySelector(‘.box’)/div.box/div.first-child/
获取回来直接是元素,可以直接使用,不加下标,只能选择第一个元素
document.querySelectorAll(‘.box’)//获取拥有box所有的元素
box.children:只识别子元素节点
box.childNodes:获取所有的节点
box.firstElementChild:获取第一个元素节点
box.lastElementChild:获取最后一个元素节点
第一个子元素:firstchild 识别文本。也识别注释
最后一个子元素:lastchild 识别文本。也识别注释
parentNode:获取父节点
nextSilibling:下一个兄弟元素节点,识别文本注释
childElementCount 获取子元素个数
node
文档对象模型
节点
整个文档是一个文档节点
html标签是元素节点
元素属性是属性节点
元素内容是内容节点
## 元素节点属性
1.childNode:获取子节点的集合
2.children:获取某个父元素对应的元素节点(childElementCount)
> let children=box.children
children.length //box.(childElementCount
遍历 for //children.forEach
3.firstChild第一个子节点元素 firstElementChild 第一个元素节点
4.lastChild最后一个子节点 lastElementChild 最后一个元素节点
5.parentNode 父节点
6.nextSibling:下一个兄弟节点 nextElementSibling 下一个元素节点
7.previousSibling 上一个兄弟节点 previousElemenSibling 上一个元素节点
8.没有(下)上一个返回null
获取元素的新方法:
document.querySelector(‘选择器’)
document.querySelector(‘.box’)/div.box/div.first-child/
获取回来直接是元素,可以直接使用,不加下标,只能选择第一个元素
document.querySelectorAll(‘.box’)//获取拥有box所有的元素,指定元素的集合
querySelectorAll
参数:选择器
原型:nodeList
遍历:for forEach
节点
NodeName nodeValue nodeType
节点类型 | nodeName | nodeType | nodeValue |
---|---|---|---|
元素节点 | 标签名大写 | 1 | null |
属性节点 | 属性名 | 2 | 属性值 |
文本节点 | text | 3 | 内容 |
注释 | comment | 8 | 注释内容 |
文档节点 | document | 9 | null |
元素节点的方法
setAttribute( ) ///设置自定义属性
getAttribute() ///获取自定义属性
创建类方法
节点
创建元素节点:document.createElement(‘div’)
属性
标准属性——obj.属性名 obj.属性名=值
自定义属性——setAttribute( ) ///设置自定义属性
getAttribute() ///获取自定义属性
文本
操作文本内容:obj.innerText obj.innerHTML
插入类方法
父元素的最后插入子元素
插入到某父元素里:父元素名.appendChild(要插入的东西)
某元素前面插入一个节点
parent.insertBefore(newNode,pNode)
操作元素样式
div.style.cssText= width:200px;height200px;background:red;
重写样式
transitionEnd;
/事件监听/
element.addElementListener (‘webkittransitionEnd’,function(){ element.style.transition=’none’
element.style.top=‘-50px’;
setTimeout(function(){
},1)
})
事件类型
08-16
移除一个节点:removechild()/
删掉以后,内存中还有、
p = null;从内存中移除;
复制一个节点:let copy = cloneNode(true)
默认情况下是false;
替换一个节点:divs.replaceChild(p,ul)
0
获取在页面中占得实际尺寸(box.offsetWidth)(box.offsetHeight)
获取在页面中占得设置的尺寸 getComputedStyle(box,null).marginRight
缩放/平移不影响布局,
ctrl+d:加选
Ctrl+shift+d;复制光标当前坐在的一行
如果子元素进行定位,父元素的padding border 不影响子元素位置margin
关于尺寸和位置
尺寸
获取元素的尺寸width+(padding-left)+(padding-right)+(border-leftwidth)+(border-rightwidth),返回值是一个数字,可直接用
(obj.box.offsetWidth)(obj.box.offsetHeight)
位置
obj.offsetLeft: obj.offsetTop——获取相对于具有定位属性的父元素的位置
父元素和本身都没有定位
> 相当于元素局页面左上角的位置
>
> 本身(son)margin-left+parent.paddingLeft+(pargin.margin-left)+(pargin.border-left)
父元素定位 子元素本身没有定位
son.marginLeft+parent.paddingLeft
相当于返回距离父元素左上角的位置
父元素定位 子元素本身定位
son.marginLeft+son.Left
相当于返回距离父元素左上角的位置
08-17
childElementcount:获取子元素个数
getComputedStyle(box,null).marginRight:获取marginRight/获取设置的属性
scrollLeft/scrollTop:获取子元素超出父元素部分父元素顶部的距离
滚动事件:onscroll
优化方式
图片精灵:
代码压缩:
按需加载:减少请求次数,提高加载次数
需要请求资源的属性:src herf
getAttribute(‘’) //返回指定属性的属性值
eg:imgs[i].src=imgs[i].getAttribute(‘imgPath’) //返回指定属性的属性值
数组的方法:
isArray from off
使集合拥有forEach属性
1.冒充 Array.prototype.forEach.call(div.function(element,index,obj){ })
2.直接把集合转化成数组 Array.from() //能够遍历的,类似于数组结构的
08-18
浏览器事件 window. onload——重新加载
window. onscroll—滚动事件
window. onresize-——窗口大小改变
filter: blur(1px);模糊
window.addEventListener(‘click’, function(){ this.style.background=’green’}, false)
事件绑定方式:
添加HTML
通过js脚本
on+eventType
js
box.οnclick=function(){}
box.οnclick=null
addEventListner
box.addEventListener(type,fn,bool)
type:事件类型 fn;事件处理函数,bool;布尔值默认false
box.addEventLisetener()
添加事件:_ _ _ _ _(事件监听)
1.box.addEventListener(‘click’, function(){ this.style.background=’green’}, false)
事件类型 事件处理函数 布尔值(可穿可不穿)
传一个匿名函数,删不掉
2.box.addEventListner(’ click’, fn )
function fn(){
this.style.background=’green’
}
删除事件
函数名
box.removeEventListener( ‘click’, fn ) fn不可省
事件对象(e)
事件发生时,关于事件的详细信息(点击事件,滚轮方向,键盘码,移入移出)
获取事件对象
事件处理函数里边的第一个参数,只能在函数内部用
鼠标事件属性:
box.οnclick=function(e){}
box.addEventListenter(‘click’,function(e){ })
鼠标相对于屏幕左上角的位置:e.screenX / e.screeenY
鼠标相对于浏览器左上角的位置:e.clientX / e.clientY
鼠标相对于文档左上角的位置:pageX / pageY
鼠标相对于事件源的位置:offsetX / offsetY
new的时候
1空对象 构造函数里面的属性和方法 把this 冒充给zhangsan
动画延迟:transitionDelay