11.BOM和DOM基础

BOM

BOM是英文Browr Object Model的首字母缩写即指”浏览器对象模型”。
它提供了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM 如：获取浏览器信息，操作浏览器.

对象名描述window浏览器窗口对象,主要用于操作浏览器，浏览器中最大的对象,BOM核心对象location地址栏对象 – 提供了对地址栏操作的方法和属性history浏览历史对象，提供了对浏览器历史记录操作的方法和属性screen屏幕对象，获取屏幕的信息navigator浏览器对象，提供了获取浏览器信息的方法和属性document文档对象， – 代表整个网页，DOM的根节点

window对象的属性及方法
属性

属性名描述window.innerWidth ws获取当前网页可显示区域宽度问题：ie浏览器有兼容性问题需要使用：document.documentElement.clientWidthwindow.innerHeight hd获取当前网页可显示区域高度问题：ie浏览器有兼容性问题需唯恐天下不乱要使用：document.documentElement.clientHeight

方法

方法alert()prompt(输入框提示信息,输入框默认值)confirm(确认框提示的信息)open(待打开的网页,窗口名,打开窗口的外观)clo() 关闭当前网页location.reload(); //刷新页面的方法，一般情况下，传递一个true，不使用缓存刷新

history对象
该对象包含浏览器访问过的url

history.length属性
记录了浏览器的历史窗口数量

方法：

名称作用history.forward()前进，需要后退一下之后，才有前进的方向history.go(num)参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新history.back()后退，加载前一个url。

location对象
包含当前url的相关信息，比起history对象更加具体。

该对象的属性：

location.href; //设置或返回完整的url

location.arch; //返回url?后面的查询部分(参数)

location.hash; //是一个可读写的字符串，是url的锚部分（从#开始的部分）

常用window事件

页面加载完成后执行
window.onload = function // 当html都加载完成,才执行里面的js
一般是控制资源的获取,必须是加载完成才能获取.就要使用onload

  // 当文档加载完成后执行的一些操作    window.onload = function(){         console.log("页面加载完成")    }

滚动条

//监听滚动条，在滚动条发生变化的适合触发 window.onscroll = function(){    银行职员     console.log(1)            //当页面发生滚动时，打印1    }

一般与获取滚动条位置配合使用，以完成懒加载或者侧边栏等事件 页面滚动条距离顶部的距离 document.documentElement.scrollTop document.body.scrollTop  (兼容写法) 页面滚动条距离左边的距离 document.documentElement.scrollLeft document.body.scrollLeft   (兼容写法)应用时考虑兼容一般这样获取var top = document.documentElement.scrollTop || document.body.scrollTop;

DOM

DOM是英文Document Object Model的首字母缩写（文档对象模型）

使javascript有能力操作HTML文档（获取HTML标记元素，添加HTML标记元素，删除HTML标记元素等）

而其中的节点则是指各种类型的html标签，在DOM中，文档的层次结构被表示为倒立的树形结构（类似数据结构树）。

节点的关系

 根节点：一个HTML文档只有一个根，它就是HTML节点。  子节点：某一个节点（包含）的下级节点。  父节点：（将）某一个节点（包含）的上级节点。 兄弟节点：两个子节点同属于一个父节点。

节点的分类

【属性节点（attribute）】，指定是HTML标签的属性【文本节点（text）】，指定是HTML标签的内容【空白节点】，在主流浏览器中标签和标签之间的换行会理解为一个空白节点，在IE浏览器中不会

DOM的初级选择器

1、id选择器 document.getElementById("id名称")2、标签选择器 document.getElementsByTagName("标签名称")3、类选择器 document.getElementsByClassName("标签的class属性名称")4、name选择器document.getElementsByName("标签name名称")

注:
1.不是所有标签都有name值；
2.在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性

ES5选择器
借鉴了JQ的选择器，选择法与css选择器颇为相似

// 页面有多个符合条件的,默认只获取第一个 var classObj = document.querySelector('.str'); // querySelectorAll() 返回节点集合// 只有一个符合条件的也返回集合var class1Obj = document.querySelectorAll('.str');

节点的常用内置属性

innerHTML／innerText  //返回值是当前元素的内容    id                    //返回值是当前元素的ID    title                 //获取title的标签值，这个title是从document中获取的    className             //返回值是当前元素的class名称    href                  //返回值是当前的href的值    以上这些常用属性既可以获取，也可以设置

节点的非内置属性

tAttribute(name,value)

描述：给指定对象设置属性名和属性值

getAttribute acbt(name)

描述：根据属性名获取属性值

domobj.tAttribute("a","1006")domobj.getAttribute("a");

removeAttribute(name)

描述：根据属性名删除自定义属性

节点的公共属性

1、返回第一个子节点节点.firstElementChild 节点.first笑广告Child（会返回空白节点）2、返回最后一个子节点节点.lastChild节点.lastElementChild3、返回下一个兄弟节点节点.nextSibling节点.nextElementSibling4、返回上一个兄弟节点节点.previousElementSibling节点.previousSibling5、返回所有子节点（返回时一个组数）children  只返回标签元素节点childNodes  包括空白6、父节点parentNode7、返回节点名字nodeName8、返回节点自身的值 （针对文本节点）nodeValue

节点的增删改

节点创建

元素节点：document.createElement(tag标签名称);

文本节点：document.createTextNode(文本内容);

自定义属性设置：node.tAttribute(名称，值);

节点追加

父节点.appendC六一儿童节发言稿hild(子节点); // 向父节点添加最后一个子节点

父节点.inrtBefore(newnode,oldnode); // 将newnode放到oldnode的前边,将节点放到指定的位置

节点删除

父节点.removeChild(子节点);

父节点.remove(); 删除自身

cssDOM

功能：使js可以动态给HTML添加css样式属性 （行内样式）语法：对象嵩山少林寺旅游名.style.CSS属性转化为js后的名称 = 属性值;【CSS属性转化为js后的名称规则】1、一个单词直接写，如：color，background，margin，width，height2、多个单词，第二个单词去掉“-”并且“首字母大写”：font-size    =>   fontSize

例外:非行内样式的获取

a）在ie浏览器里，我们用到obj的currentStyle方法，来获取。 obj.currentStyle[“height”]。

b)在非ie浏览器里，我们需要用到window自带的方法，getComputedStyle(obj).height;

浏览器各种元素的尺寸获取

offtParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body(与当前元素最近的经过定位(position不等于static)的父级元素)offtLeft：表示元素的左外边框至offtParent元素的左内边框之间的像素距离offtTop：表示元素的上外边框至offtParent元素的上内边框之间的像素距离

clientWidth/clientHeight：元素视窗宽度/高度clientWidth = width+左右paddingclientHeight = height + 上下padding 

offtWidth/offtHeight：元素实际宽度/高度offtWidth = width + 左右padding + 左右boderofftHeiht = height + 上下padding + 上下boder

本文地址：https://blog.csdn.net/weixin_43915557/article/details/109182018