BOM（浏览器对象模型）
所有浏览器都支持window对象，他表示浏览器窗口。
所有js全局对象，函数，变量均自动成为window对象的成员。
全局变量是window对象的属性。
全局函数是window对象的方法。
基于html dom的document也是window对象的属性之一。
window.document.getElementById("header");
document.getElementById("header");1. window 获取浏览器c窗口尺寸
浏览器窗口的内部高度（不包括滚动条，菜单栏，工具栏）
window.innerHeight
window.innerWidth适用于Internet Explorer 8、7、6、5浏览器的window如下：
document.documentElement.clientHeight
document.documentElement.clientWidth兼容方案获取浏览器宽高`
var width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth
var height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight2. screen 获取电脑屏幕大小
属性返回访问者屏幕的宽/高度，以像素计，减去界面特性，比如窗口任务栏。
screen.availWidth
screen.availHeight
3. window 开启关闭窗口
开启:window.open()
关闭:window.close()
<script type="text/javascript">
var newWindows;
function newWindow() {
newWindows = window.open("https://www.baidu.com/","baidu");
}
function closeWindow() {
newWindows.close();
}
</script>4. 浏览器事件
| 名称 | 描述 |
|---|---|
| window.onload | 浏览器加载事件 |
| window.onscroll | 浏览器滚动监听 |
| window.onresize | 浏览器缩放监听 |
| window.open | 打开事件 |
| window.close | 关闭 |
5. location
| 名称 | 描述 |
|---|---|
| location.herf | 当前url |
| location.hostname | 主机域名 |
| location.pathname | 当前页面路径和文件名 |
| location.port | 端口 |
| location.protocol | 协议(http/https) |
| location.assign | 加载新的文档 |
| location.search | url参数 |
console.log(location.href);
console.log(location.hostname);
console.log(location.pathname);
console.log(location.port);
console.log(location.protocol);6. history
浏览器历史，可以不用写window这个前缀
| 名称 | 描述 |
|---|---|
| history.length | 次数 |
| history.back | 上一页 |
| history.forward | 下一页 |
| history.go |
小括号中,设定数值和 正负号,+数值 向下一个跳转的次数,-数值 向上一个跳转的次数,次数计算 : 结束页面 - 起始页面 ,错误跳转次数,没有执行效果 |
window.history.back();
7. navigator 获取浏览器相关信息
window.navigator
| 名称 | 描述 |
|---|---|
| navagator.userAgent | 型号，内核，版本，平台 |
| navagator.appVersion | 浏览器版本信息 |
| navagator.appName | 浏览器名称 |
| navagator.platform | 操作系统 |
| navagator.geolocation | 位置信息包括经度longitude和纬度latitude |
export function GetCurrentBrowser() {
var agent = navigator.userAgent.toLowerCase();
var regStr_ie = /msie [\d.]+;/gi;
var regStr_ff = /firefox\/[\d.]+/gi
var regStr_chrome = /chrome\/[\d.]+/gi;
var regStr_saf = /safari\/[\d.]+/gi;
//IE11以下
if (agent.indexOf("msie") > 0) {
return agent.match(regStr_ie);
}
//IE11版本中不包括MSIE字段
if (agent.indexOf("trident") > 0 && agent.indexOf("rv") > 0) {
return "IE " + agent.match(/rv:(\d+\.\d+)/)[1];
}
//firefox
if (agent.indexOf("firefox") > 0) {
return agent.match(regStr_ff);
}
//Chrome
if (agent.indexOf("chrome") > 0) {
return agent.match(regStr_chrome);
}
//Safari
if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
return agent.match(regStr_saf);
}
}
// get os
export function GetOs() {
let userAgent = navigator.userAgent.toLocaleLowerCase() //toLocaleLowerCase()将字母转小写
let wins = [
{
sys: 'windows nt 5.0',
alias: 'windows 2000',
name: 'Win2000'
},
{
sys: 'windows nt 5.1',
alias: 'windows xp',
name: 'WinXP'
},
{
sys: 'windows nt 5.2',
alias: 'windows 2003',
name: 'Win2003'
},
{
sys: 'windows nt 6.0',
alias: 'Windows Vista',
name: 'WinVista'
},
{
sys: 'windows nt 6.1',
alias: 'Windows 7',
name: 'Win7'
},
{
sys: 'windows nt 6.2',
alias: 'Windows 8',
name: 'Win8'
},
{
sys: 'windows nt 10.0',
alias: 'Windows 10',
name: 'Win10'
},
]
for (let win of wins) {
if (userAgent.indexOf(win.sys) > -1 || userAgent.indexOf(win.alias) > -1) {
return win.name
}
}
}
export function getEdition() {
var userAgent = navigator.userAgent.toLocaleLowerCase()
if (userAgent.indexOf("win64") > -1 || userAgent.indexOf("wow64") > -1) {
return '64位'
} else {
return '32位'
}
}
export function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
//获取url参数 返回对象
export function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = {}
let strs = []
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
export const browser = {
versions: (function() {
let u = navigator.userAgent
// let app = navigator.appVersion
return {
trident: u.indexOf('Trident') > -1, // IE内核
presto: u.indexOf('Presto') > -1, // opera内核
webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // 火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, // 是否iPad
webApp: u.indexOf('Safari') === -1, // 是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, // 是否微信
qq: u.match(/\sQQ/i) === 'qq' // 是否QQ
}
}()),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
8. 弹窗
1、警告框：Window.alert（）
2、输入框：Window.prompt()
3、确认框： Window.confirm（）
DOM (文档对象模型)
通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型
DOM 分类
定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构
html中，一切都是节点
- 元素节点
- 文本节点
- 属性节点
各个节点关系为：父子关系\兄弟关系
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML
- JavaScript 能够改变页面中的所有 HTML 元素。
- JavaScript 能够改变页面中的所有 HTML 属性。
- JavaScript 能够改变页面中的所有 CSS 样式。
- JavaScript 能够对页面中的所有事件做出反应。
DOM对象
| 对象 | 描述 |
|---|---|
| Document:文档对象 | 每个载入浏览器的 HTML 文档都会成为 Document 对象 |
| Element:元素对象 | Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。 |
| Attribute:节点属性对象 | Attr 对象表示 HTML 属性 |
| Event:事件对象 | 事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状 |
Document文档对象
Document对象所有属性
| 属性 | 描述 |
|---|---|
| document.body | 获取body |
| document.Head | 获取head |
| document.Element | 获取html |
| document.cookie | 获取cookie |
| document.domain | 当前文档域名，可做跨域操作 |
| document.lastModified | 文档最后修改日期时间 |
| document.referrer | 当前文档的url |
| document.title | 标题 |
| document.URL | 当前文档的URL |
Document常用方法
| 方法 | 描述 |
|---|---|
| document.write() | 文档写入内容 |
| document.open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
| document.close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 |
| document.writeIn() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符 |
| 获取元素 | |
| document.getElementById() | 通过id获取元素 |
| document.getElementsByName() | 通过name获取相关元素数组 |
| document.getElementsByTagName() | 通过标签获取相关元素数组 不能使用forEach循环 |
| document.getElementsByClassName() | 通过class获取相关元素数组 不能使用forEach循环 |
| document.querySelector() | 获取第一个匹配条件的标签对象 --- 只会获取一个标签对象 |
| document.querySelectorAll() | 获取所有匹配条件的标签对象 执行结果是伪数组 |
| 创建元素 | |
| document.createAttribute() | 创建属性对象 |
| document.createElement() | 创建元素对象 |
| document.createTextNode() | 创建文本对象 |
| document.createComment() | 创建注释 |
element文档对象
element元素对象常用的方法
| 方法 | 描述 |
|---|---|
| 元素增，删，改，克隆 | |
| appendChild(doc) | 插入节点到最后 |
| insertBefore(ndoc, oldoc) | 插入节点到某个节点之前 |
| removeChild(doc) | 移除该节点 |
| replaceChild(doc) | 替换节点 |
| cloneNode() | 克隆节点 |
| cloneNode(true) | 克隆节点及其内容 |
| 属性相关 | |
| getAttribute() | 获取属性 |
| setAttribute() | 设置属性 |
| removeAttribute() | 移除属性 |
| getAttributeNode() | 指定属性节点 |
| setAttributeNode() | 设置属性节点 |
| removeAttributeNode() | 移除属性节点 |
| getElementsByTagName() | 指定标签名的所有子元素的集合 |
| nodelist.item() | NodeList 中位于指定下标的节点 |
element元素对象常用的属性
| 属性 | 描述 |
|---|---|
| id | 元素id |
| style | 样式 |
| className | class属性 |
| innerHML | 标签内容 |
| innerText | 文本内容 |
| 获取节点 | |
| childNodes | 获取元素子节点 |
| parentNode | 获取元素父节点 |
| attributes | 获取所有属性 |
| children | 获取所有标签子节点 |
| firstchild | 第一个子节点 |
| lastchild | 最后一个子节点 |
| firstElementchild | 第一个标签子节点 |
| lastElementChild | 最后一个标签子节点 |
| previousSibling | 上一个兄弟节点 |
| nextsibling | 下一个兄弟节点 |
| previousElementsibling | 上一个标签 |
| nextElemntSibling | 下一个标签 |
| parentNode | 父级节点 |
| parentElement | 父级标签节点 |
| nodeName | 名字:元素节点--标签名称、属性节点--属性名、文本节点--#text、注释节点--#comment |
| nodeType | 节点类型:1元素, 2属性 3文本, 8注释 |
| nodeValue | 元素值：属性值、文本内容、注释内容 |
| nodelist.length | NodeList 中的节点数 |
| 尺寸距离 | |
| clientHeight | 高度-内容+padding |
| Clientwidth | 宽度 |
| offsetHeight | 高度-内容+padding+border |
| Offsetwidth | 宽度 |
| ClientTop | 上边框宽度 |
| clientLeft | 做边框宽度 |
| offsetTop | 父物体顶部距离 |
| offsetLeft | 父物体左侧距离 |
DOM事件操作
鼠标事件
| 名称 | 描述 |
|---|---|
| click | 点击事件 |
| dbclick | 双击事件 |
| contextmenu | 右键点击事件 |
| mousedown | 按下事件,执行一次 |
| mouseup | 抬起事件 |
| mousemove | 鼠标移动 |
| mouseover | 移入 |
| mouseout | 移除 |
| mouseenter | 移入,不发生冒泡 |
| mouseleave | 移除，不冒泡 |
键盘事件
获取点击时的事件对象
- 普通版本
E/event
- IE低版本
Window.event
兼容写法：var e=e||window.event
获取案件相关
- 按键名称：
e.Key
- 按键编码：
e.Keycode
- 兼容火狐：
e.Which
兼容写法： e.Keycode|| e.Which
altkey ctrlkey shiftkey 判断是否按下 alt ctrl shift
触屏事件
| 名称 | 描述 |
|---|---|
| touchstart | 开始 |
| touchend | 结束 |
| touchmove | 移动 |
特殊事件
| 名称 | 描述 |
|---|---|
| animationend | 动画结束 |
| transitionend | 过度结束 |
表单事件
| 名称 | 描述 |
|---|---|
| submit | 只有提交表单时，触发的事件 |
| focus | 标签获取焦点会处触发的事件 |
| input | 输入数据时会触发的事件 |
| change | 失去加并且输入数据改变是触发事件 |
浏览器兼容处理
1、浏览器滚动高度
var height=document.documentElement.scrollTop||document.body.scrollTop
var width=document.documentElement.scrollLeft||document.body.scrollLeft- 有文档类型声明
document.documentElement.scrollTop
document.documentElement.scrollLeft- 没有文档类型声明
document.body.scrollTop
document.body.scrollLeft2、获取非行内样式属性
实际效果是，获取标签执行的样式属性
if(window.getComputedStyle){
window.getComponentStyle(dom).width
}else{
doc.currentStyle.width
}3、获取事件对象
dom.onclick=function(e){
e=e||window.event
}4、获取事件对象目标
兼容低版本火狐浏览器，现在基本上不用了
dom.事件=function(){
e=e||window.event
var target=e.target||e.srcElement
}5、按键数值
兼容低版本火狐浏览器，现在基本上不用了
document.onkeyup=function(e){
e=e||window.event
var keyNum=e.keyCode||e.which
}6、事件的监听/事件的注册
function myAddEvent(ele,type,fun){
判断addEventListener这个方法是否存在
if(ele.addEventListener){
ele.addEventListener(type,fun)
}else{
ele.attachEvent('on'+type,fun)
}
}7、删除事件处理函数
function delFun(ele,type,fun){
if(ele.removeEventListener){
ele.removeEventListener(type,fun)
}else{
ele.detachEvent('on'+type,fun)
}
}8、阻止事件传递
function stopBBle(e){
if(e.stopPropagation){
e.stopPropagation()
}else{
e.cancelBubble=true
}
}9、阻止默认事件执行
if(e.preventDefault){
e.preventDefault
}else{
e.returnValue=false
}10、ajax对象
let xhr;
try{
//普通路蓝旗
xhr=new XMLHttpRequest()
}catch(e){
//兼容IE低版本
xhr=new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.open('post','url')
xhr.setRequestHeader('content-type','application/x-www/form-url-encoded')
xhr.send('name=111&age=222')
//标准浏览器
xhr.onload = function(){}
//兼容性写法
xhr.onreadystatechange=function(){
if(xhr.readystate==4){
let reg=/^a\d{2}$/
if(res.test(xhr.status)){
console.lof(json.parse(xhr.response))
}
}
}兼容性写法，封装工具
生成验证码函数
function mySetVc() {
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXUZ';
var newStr = '';
for (var i = 1; i <= 6; i++) {
var num = parseInt(Math.random() * str.length)
if (newStr.indexOf(str[num]) === -1) {
newStr += str[num];
} else {
i--;
}
}
return newStr;
}获取地址栏数据信息
function getUrlVal() {
// 1,获取地址栏参数字符串
let str = decodeURI(window.location.search).substr(1);
// 创建存储结果的对象
let obj = {};
// 2 转化为数组 根据 分号空格转化
const arr1 = str.split('&')
// 3 循环变量数组,将数据字符串,根据=等号分割为数组
arr1.forEach(v => {
let arr2 = v.split('=');
obj[arr2[0]] = arr2[1];
})
return obj;
}生成table表格函数
// 参数1:数组,需要参照的数据数组
// 参数2:标签,需要写入内容的标签对象
function mySetTable(array, element) {
var str = '';
array.forEach(function (v, k) {
str += '<tr>';
for (var key in v) {
str += `<td>${v[key]}</td>`;
}
str += `<td><button index="${k}">删除</button></td>`
str += '</tr>';
});
element.innerHTML = str;
var oBtns = document.querySelectorAll('button');
mySetButton(oBtns, array, element);
}给button按钮绑定删除效果函数
// 参数1,button按钮数组
// 参数2,数据数组
// 参数3,写入内容的标签对象
function mySetButton(BtnArray, array, element) {
BtnArray.forEach(function (v) {
v.onclick = function () {
var bool = window.confirm('确定,是否删除');
if (bool) {
var index = v.getAttribute('index');
array.splice(index, 1);
mySetTable(array, element);
}
}
})
}处理监听事件兼容性函数
// 参数1:需要绑定事件的标签对象
// 参数2:需要绑定的事件类型,没有on
// 参数3:需要绑定的事件处理函数
function myAddEvent(element, type, fun) {
if (element.addEventListener) {
// 普通浏览器
element.addEventListener(type, fun);
} else {
// 低版本IE浏览器
element.attachEvent('on' + type, fun);
}
}获取css样式函数
// 参数1,需要属性的标签对象
// 参数2,需要属性的属性名称
function myGetStyle(element, type) {
if (window.getComputedStyle) {
return window.getComputedStyle(element)[type];
} else {
return element.currentStyle[type];
}
}设定 cookie 函数
// 参数1: cookie 的键名
// 参数2: cookie 的键值
// 参数3: cookie 的时效(秒数)
function mySetCookie(key, value, time) {
// 1,获取当前的时间对象
const nowTime = new Date();
// 2,获取当前时间的时间戳 --- 单位是毫秒
let timeStamp = nowTime.getTime();
// 3,计算时间戳 当前时间戳 - 8小时 + 时效的时间(秒)
// 获取带有时效的时间戳 是世界标准时间
let newTimeStamp = timeStamp - 8 * 60 * 60 * 1000 + time * 1000;
// 4,将时间戳设定回时间对象
nowTime.setTime(newTimeStamp);
// 5,兼容没有传第三个参数的情况
// 如果 time 是 undefined ,证明没有第三个参数,执行会话时效,赋值空字符串
// 如果 time 不是 undefined ,证明没有第三个参数,执行 nowTime 时间对象中的时间戳时效
let endTime = time === undefined ? '' : nowTime;
// 6,设定cookie
// 给cookie多设定一个属性,path=/
// 让www中的所有文件都可以使用设定的cookie
document.cookie = `${key}=${value};expires=${endTime};path=/`;
}获取 cookie 的具体数据
function myGetCookie() {
// 创建存储结果的对象
let obj = {};
// 1 获取cookie字符串
let str = document.cookie;
// 2 转化为数组 根据 分号空格转化
const arr1 = str.split('; ')
// 3 循环变量数组,将数据字符串,根据=等号分割为数组
arr1.forEach(v => {
let arr2 = v.split('=');
obj[arr2[0]] = arr2[1];
})
return obj;
}
function fun(){
console.log('我是新建的js文件中的内容,你压缩我了吗?')
}到此这篇关于JavaScript中BOM和DOM详解的文章就介绍到这了,更多相关js BOM和DOM内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
