BOM / DOM

BOM   browser object model  浏览器对象模型

location 地址栏对象 提供了对地址栏操作的方法和属性
history  浏览器对象  提供了对浏览器历史记录操作的方法和属性
screen  屏幕对象 获取屏幕信息
navigator 浏览器对象  提供获取浏览器信息的方法和属性
document  代表整个网页 DOM的根节点
window  浏览器最大的对象 

window的属性
window.innerWidth  获取浏览器可视区的宽度
window.innerHeight 获取浏览器可视区的高度
兼容写法   document.documentElements.clientWidth/Height
                 var w=window.innerWidth || document.documentElement.clientWidth;
                 (用逻辑运算符或 谁存在使用谁 都存在使用左侧的  还可以使用三元运算符)
window的方法
window.open("路径")  打开新的页面
window.close( )   关闭当前窗口
alert()
prompt(输入框提示信息,输入框默认值)
confirm(确认框提示的信息)

history的属性
history.length   返回当前地址栏访问的历史长度 包含了从该浏览器访问的url
(Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始)
history的方法
history.forward()   前进 需要有历史记录才能前进
history.go(0)  参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新
history.back() 后退 加载前一个url

location的属性
console.log(location.href);   获取url地址栏的地址
location.href="路径"   设置地址 跳转到新的页面
location.reload()   刷新页面
console.log(location.search);  获取地址栏?后面的参数
console.log(location.hash);  获取hash   #后面的字符串

onload事件
window.οnlοad=function(){
   要执行的代码
}
onload是等所有的html都加载完成,再执行js

窗口滚动事件onscroll  (内容卷进去的高度等于滚动条距离浏览器顶部的高度)
window.οnscrοll=function(){
   要执行的代码
}
document.documentElement.scrollTop   获取滚动条距离顶部的top值,一定写在滚动条事件中
document.documentElement.scrollLeft   获取滚动条距离左侧的left值,一定写在滚动条事件中
兼容写法      var top=document.documentElement.scrollTop || document.body.scrollTop;
(用逻辑运算符或 谁存在使用谁 都存在使用左侧的  还可以使用三元运算符)

onresize窗口大小改变时触发事件
window.οnresize=function(){
   要执行的代码
}

DOM document object model  文档对象模型

DOM的选择器
getElementById("id")   使用id获取 叫做节点对象
getElementsByTagName("标签名")  根据标签名获取 返回的都是数组 通过索引下标使用
getElementsByName("name")  根据name获取 返回数组 通过索引下标使用
getElementsByClassName()  根据class名获取 返回数组  通过索引下标使用
万能选择器  选中方式和css选择器一样
document.querySelector("div")  返回单个节点对象 有多个标签符合 也只返回第一个
document.querySelectorAll("div")  返回数组  只有一个条件符合的也返回数组
节点对象的使用

内置属性的操作

非内置属性的操作

节点公共的属性

节点的增删改查
节点创建
      元素节点 document.createElement("标签")
      文本节点 document.createTextNode("文本内容")
      自定义属性设置 node.setAttribute(名称,值)
节点的追加
      向父节点添加到最后一个子节点    父节点.appendChild(子节点);
      将新节点放到某节点的前边   父节点.insertBefore(new,某节点);
节点的删除
      通过父节点删除    父节点.removeChild(子节点)
      自己删除自己        节点.remove()

通过js给html设置css样式   (有两个单词通过 - 连接的属性在这里把 - 去掉 第二个单词首字母大写)
 

浏览器元素的尺寸

DOM 中的表单元素的属性

• value 用于大部分表单元素的内容获取(option除外)

• type 可以获取input标签的类型(输入框或复选框等)

• disabled 禁用属性

• checked 复选框选中属性

• selected 下拉菜单选中属性