我要评论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
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论