【Python全栈-JavaScript】JavaScript核心 BOM 和DOM
JavaScript核心 BOM 和DOM
一、区分什么是BOM 什么是DOM
window对象
window对象既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问parseInt()等方法。
窗口位置：screenLeft 和 screenTop
IE、 Safari、 Opera 和 Chrome 都提供了
screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。 Firefox 则在screenX 和 screenY 属性中提供相同的窗口位置信息， Safari 和 Chrome 也同时支持这两个属性。
Opera虽然也支持 screenX 和 screenY 属性，但与 screenLeft 和 screenTop 属性并不对应，因此建议大家不要在 Opera 中使用它们。使用下列代码可以跨浏览器取得窗口左边和上边的位置。
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
窗口大小 ：innerWidth、 innerHeight、 outerWidth 和 outerHeight
跨浏览器确定一个窗口的大小不是一件简单的事。 IE9+、 Firefox、 Safari、 Opera 和 Chrome 均为此提 供了 4 个属性： innerWidth、 innerHeight、 outerWidth 和 outerHeight。在 IE9+、 Safari 和 Firefox 中， outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸（无论是从最外层的 window 对象还是从 某个框架访问）。在 Opera 中，这两个属性的值表示页面视图容器①的大小。而 innerWidth 和 innerHeight 则表示该容器中页面视图区的大小（减去边框宽度）。在 Chrome 中， outerWidth、 outerHeight 与 innerWidth、 innerHeight 返回相同的值，即视口（ viewport）大小而非浏览器窗口大小。 IE8 及更早版本没有提供取得当前浏览器窗口尺寸的属性；不过，它通过 DOM 提供了页面可见区域 的相关信息。 在 IE、 Firefox、 Safari、 Opera 和 Chrome 中， document.documentElement.clientWidth 和 document.documentElement.clientHeight 中保存了页面视口的信息。在 IE6 中，这些属性必须在 标准模式下才有效；如果是混杂模式，就必须通过 document.body.clientWidth 和 document.body. clientHeight 取得相同信息。而对于混杂模式下的 Chrome，则无论通过 document.documentElement 还是 document.body 中的 clientWidth 和 clientHeight 属性，都可以取得视口的大小。 虽然最终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小，如下所示。各个浏览器详细区分
/* //窗口内部宽高,不含工具栏,地址栏等内容,包含滚动条 console.log(window.innerWidth,window.innerHeight);//5 // 当前窗口宽高包含工具等. console.log(window.outerWidth,window.outerHeight);//5 // 窗口当前的位置,只能获取,不能设置 console.log(window.screenLeft,window.screenTop);//5
导航和打开窗口 ：window.open()
使用 window.open()方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。
这个方法可以接收 4 个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。
window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
location一般是修改地址栏或者获取地址栏中的内容（针对地址栏操作）
跳转历史
客户端（浏览器）信息
Title
BOM基础
DOM（Document Object Model）
节点属性 nodeName nodeValue nodeType
获取Dom元素
document.getElementById("div0");//根据id名获取DOM元素,唯一一个
var lis=document.getElementsByTagName("li");//根据标签名获取所有的列表
lis=document.getElementsByClassName("abc");//根据标签中class名获取元素列表
console.log(lis); //HTMLCollection HTML标签元素列表类型,是类数组,但是不能使用数组的方法
var radio=document.getElementsByName("ab"); //根据表单元素的name获取节点列表NodeList
console.log(radio); //NodeList(4) [input, input, input, input]
radio.forEach(function (t) {
console.log(t);
});
// NodeList 节点列表 具有forEach的遍历方法
// 根据CSS选择器选择元素,使用简单 但是效率没有上述方法高
// document.querySelector(); 找到第一个
// document.querySelectorAll(); 找到全部的 返回列表
var li1=document.querySelectorAll("#b .abc");//NodeList
console.log(li1);
var li2=document.querySelector("[abc=r]"); //属性选择器中属性值等于什么
console.log(li2);
//document全文档查找
var ul0=document.getElementById("a");
//从ul0这个父级元素的子元素中查找className是abc的元素
var li3=ul0.getElementsByClassName("abc");
节点遍历 --->子节点 子孙节点 父节点 。。。
节点的增 删 改 查 复制
DOM属性
DOM的宽高和位置
补充：margin padding border
div{ width: 100px; height: 100px; margin: 20px; //外边距 padding: 30px; //内边距 overflow: scroll; background: pink; border: 4px solid black; //边框 }
偏移量 ---> offsetWidth offsetHeight
偏移量（ offset dimension），包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意，不包括外边距）。
DOM元素的大小和位置 ---> ele.getBoundingClientRect()
right = left + width
bottom = top + height
客户区大小 ---> clientHeight clientWidth
元素的客户区大小（ client dimension），指的是元素内容及其内边距所占据的空间大小 ，即客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内 。
滚动大小
滚动大小（ scroll dimension），指的是包含滚动内容的元素的大小 ，有些元素（例如元素）即使没有执行任何代码也能自动地添加滚动条；
但另外一些元素，则需要通过 CSS 的overflow 属性进行设置才能滚动。以下是 4 个与滚动大小相关的属性。
? scrollHeight：在没有滚动条的情况下，元素内容的总高度。
? scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
? scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
? scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
load和scroll事件