11.BOM和DOM基础

BOM

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

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

window对象的属性及方法
属性

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

方法

方法

alert()

prompt(输入框提示信息,输入框默认值)

confirm(确认框提示的信息)

open(待打开的网页,窗口名,打开窗口的外观)

close() 关闭当前网页

location.reload(); //刷新页面的方法，一般情况下，传递一个true，不使用缓存刷新

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

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

方法：

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

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

该对象的属性：

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

location.search; //返回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的值
    以上这些常用属性既可以获取，也可以设置

节点的非内置属性

setAttribute(name,value)

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

getAttribute acbt(name)

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

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

removeAttribute(name)

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

节点的公共属性

1、返回第一个子节点
节点.firstElementChild 
节点.firstChild（会返回空白节点）

2、返回最后一个子节点
节点.lastChild
节点.lastElementChild

3、返回下一个兄弟节点
节点.nextSibling
节点.nextElementSibling

4、返回上一个兄弟节点
节点.previousElementSibling
节点.previousSibling

5、返回所有子节点（返回时一个组数）
children  只返回标签元素节点
childNodes  包括空白

6、父节点
parentNode

7、返回节点名字
nodeName

8、返回节点自身的值 （针对文本节点）
nodeValue

节点的增删改

节点创建

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

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

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

节点追加

父节点.appendChild(子节点); // 向父节点添加最后一个子节点

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

节点删除

父节点.removeChild(子节点);

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

cssDOM

功能：使js可以动态给HTML添加css样式属性 （行内样式）

语法：对象名.style.CSS属性转化为js后的名称 = 属性值;
【CSS属性转化为js后的名称规则】

1、一个单词直接写，如：color，background，margin，width，height
2、多个单词，第二个单词去掉“-”并且“首字母大写”：

font-size    =>   fontSize

例外:非行内样式的获取

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

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

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

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

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

offsetWidth/offsetHeight：元素实际宽度/高度
offsetWidth = width + 左右padding + 左右boder
offsetHeiht = height + 上下padding + 上下boder

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