js中BOM总结

最新推荐文章于 2022-12-02 16:52:49 发布

mwx_993457988

最新推荐文章于 2022-12-02 16:52:49 发布

阅读量4.4k

点赞数

本文深入解析JavaScript的核心组成部分，包括ECMAScript语法、BOM与DOM的基本概念，重点阐述了BOM（浏览器对象模型）的结构与功能，如window对象的使用、location对象的属性、offset系列方法的应用等，以及事件处理机制与正则表达式的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js组成

1.ECMAScript基本语法

2.BOM（浏览器对象模型）

3.DOM（文档对象模型）

什么是BOM

BOM（Borwser Object Model）即浏览器对象模型，提供了独立于内容而与浏览器进行交互的对象。由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window;BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；BOM缺乏标准，Javascript语法的标准组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。具体的BOM结构图如图1所示：

图1 BOM结构图

windows对象

window对象是js中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。window常用的方法：

a) open() 打开一个新的资源。打开窗口 window.open(url,target,param);open()方法接收4个参数，分别是打开资源名；打开方式；打开的窗口大小位置；资源找不到是否用其他代替。下面是一个例子：

function openImage(){

    window.open("image.html", "_blank", "height = 500pt, width = 350pt,top = 50pt,left = 450pt", false);

}
//其中第三个参数设置各种属性，我们用逗号分割开。

b) moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

moveBy() 相对于当前的窗口移动指定的 x 和 y 偏移值(左上角)。

window.moveTo(100,100);

window.moveBy(30,0); 

//传入的参数都是移动的数值，知识参考的原点不同。

c) setInterval() 每隔指定的毫秒数运行指定的代码（循环执行）。例如：

<body>
<input type="button" value="倒计时10" id="btn" disabled/>
<script>
    var btn = document.getElementById("btn");
    var num = 10;
    var timerId = setInterval(function(){
        num--;
        btn.value = "倒计时开始" + num;
        if(num == 0){
            clearInterval(timerId);
            btn.disabled = false;
            btn.value = "同意，可以点了";
        }
    }，1000)；
</script>
</body>

d) setTimeout（）经过指定毫秒数指定一次指定的代码（只执行一次）。例如：

window.setTimerout("showImage()",2000);

地址栏对象

location（URL地址栏对象）常用方法有如下两个：href: 设置或获取整个 URL 为字符串；reload() ：重新加载页面地址。

document.write("当前地址栏的地址："+ location.herf);//获取地址栏地址
location.herf = "http://www.baidu.com";//设置地址栏地址
location.reload();//重新加载地址栏地址

offset系列方法

首先给出offset的示意图如下图所示：

offset示意图

offsetWidth和offsetHeight	offsetHeight的构成	offsetHeight = height + padding + border offsetWidth = width + padding + border
	offsetHeight和style.height的区别	1. demo.style.height只能获取行内样式，否则无法获取到 2. .style.height是字符串（有单位px）， offsetHeight是数值（无单位） 3. .style.height可以设置行内样式，但offsetHeight是只读属性，不可设置所以：demo.style.height获取某元素的真实高度/宽度，用.style.height来设置高度/宽度
offsetLeft和offsetTop	offsetLeft的构成	1，到距离自身最近的（带有定位的）父元素的左侧/顶部 2，如果所有父级元素都没有定位，则以body为准 3，offsetLeft是自身border左侧到父级padding左侧的距离
	offsetLeft和style.left的区别	1，style.left只能获取行内样式 2，offsetLeft只读，style.left可读可写 3，offsetLeft是数值，style.left是字符串并且有单位px 4，如果没有定位，style.left获取的数值可能是无效的 5，最大的区别：offsetLeft以border左上角为基准， style.left以margin左上角为基准
offsetParent	构成	1. 返回该对象距离最近的带有定位的父级元素 2. 如果当前元素的所有父级元素都没有定位（position为absolute或relative），那么offsetParent为body 3. offsetLeft获取的就是相对于offsetParent的距离
	与parentNode的区别	parentNode始终指向的是当前元素的最近的父元素，无论定位与否

scroll方法

scrollHeight和scrollWidth	对象内部的实际内容的高度/宽度（不包括border）
scrollTop和scrollLeft	被卷去部分的顶部/左侧到可视区域顶部/左侧的距离
onscroll事件	滚动条滚动触发的事件
页面滚动坐标	var scrollTop = window.pageYoffset \|\| document.documentElement.scrollTop \|\| document.body.scrollTop \|\| 0;

scroll示意图

client系列

clientX和clientY ：获取鼠标在可视区域的位置

clientX = width + padding，clientY = height + padding

clientLeft ：边框的宽度，若有滚动条的话，包括滚动条

client示意图

例：获得页面可视区域的大小

function(){
    return {
        clientWidth:window.innerWidth || document.body.clientWidth || 
                            document.documentElement.clientWidth || 0;
        clientHeight:window.innerHeight || document.body.clientHeight ||  
                           document.documentElement.clientHeight || 0;
    };
}

事件参数e

当事件发生的时候，系统会自动的给事件处理函数传递一个参数，会提供事件相关的一些数据，事件参数e浏览器的兼容性检测:

e = e || window.event

e.pageX和e.pageY

获取鼠标在页面中的位置（IE8中不支持pageX和pageY，支持window.event获取参数事件）

pageX = clientX + 页面滚动出去的距离

获得计算后样式的方法

w3c标准

window.get ComputedStyle(element, null)[属性]

IE浏览器

element.currentStyle[属性]

封装浏览器兼容性函数

function getStyle(element, attr) {

if(window.getComputedStyle) {

return window.getComputedStyle(element, null)[attr];

} else {

return element.currentStyle[attr];

}

事件补充

1.注册事件

2.注册事件的性能问题

3.移除事件

4.事件冒泡

5.事件捕获事件的三个阶段

6.事件对象的常见三个属性

事件对象的常见属性如下：

6.1 target 和 currentTarget

target	始终是点击的元素（IE8及之前是srcElement）
currentTarget	执行事件处理函数的元素
this	始终和currentTarget一样

6.2事件冒泡

addEventListener() 方法用于向指定元素添加事件句柄。用addEvenrListener注册事件的时候，第三个参数是false，即冒泡。冒泡的好处：事件委托。例如：

<body>
<ul id="ul">
    <li>我是第1个li标签</li>
    <li>我是第2个li标签</li>
    <li>我是第3个li标签</li>
    <li>我是第4个li标签</li>
</ul>
<input type="button" value="insertLi" id="btn">
<script>
    var ul = document.getElementById("ul");
    var btn = document.getElementById("btn");
    //把本来应该给li注册的事件，委托给li，只需要给一个元素注册事件
    //动态创建的li，也会执行预期的效果
    ul.addEventListener("click",test,false);
    btn.onclick = function (){
        var li = document.creatElement("li");
        li.innerHTML = "我是新插入的li标签"；
        ul.appendChild(li);
    };
    //函数写在注册事件代码之外，提高性能
    function test(e){
        alert(e.target.innerText);
    }
</script>
</body>

当事件冒泡影响到了其他功能的实现时，需要阻止冒泡

e.stopPropagation( )

IE8及之前： event.cancleBubble = true;

阻止默认行为的执行

e.preventDefault()

IE8及之前： event.returnValue = false；

例如：

<body>
    <a href="http://www.baidu.com" id="link"></a>
<script>
    var link = document.getElementById("link");
    link.addEventListener("click",fn,false);
    function(e){
        e.preventDefault();
        //若用return false;不起作用，若用link.onclick = function();return false可以阻止
    }

</script>
</body>

鼠标事件的参数

e.type	事件的类型，如click，mouseover
事件的3个阶段	1 捕获阶段 2 目标阶段 3 冒泡阶段
e.eventPhase	事件阶段
shiftKey/ctrlKey/altKey	按下鼠标同时按下组合键
button	获取鼠标的按键
e.clientX和e.clientY	获取鼠标在可视区域的位置

正则表达式

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

1 元字符	. 匹配任何单个字符，除了换行 d 数字 \D 非数字 [0-9] w 数字字母下划线 \W 非 [0-9a-zA-Z_] \s 空白 \S 非空白 \n 换行 \t 制表符
2 范围-- 匹配的是一个字符	[0-9] [0123] [a-z] [A-Z] 匹配的是一个字符
3 \| 或者	\| 或者
4 量词 -只修饰一个字符	a+ 1个或多个a a? 1个或0个a a* 0个或多个a a{x} x个n a{x,} 至少x个a a{x,y} x-y个a
5 开始结束	^a 以a开始 a$ 以a结束
6 ( ) 看成是一个整体，即分组
7 匹配汉字	[\u4e00-\u9fa5]
8 参数	i 忽略大小写 g 全局匹配
9 ^在[ ]中的作用——取反
10 贪婪模式和非贪婪模式	默认情况贪婪模式 <.+> 非贪婪模式 <.+?>

正则表达式对象RegExp

<body>
    <a href="http://www.baidu.com" id="link">百度</a>
<script>
    //var regularExpression = new RegExp("\\d"); 第一种写法
    var regularExpression = /\d/;//第二种写法
    var str = "afehrie45";
    console.log(regularExpression.test(str));//test就是匹配方法，结果是true
</script>
</body>

正则之匹配

//验证电子邮箱
    // abc@sohu.com
    // 11111@qq.com
    // aaaaa@163.com
    // abc@sina.com.cn 
     var reg = /^\w+@\w+\.\w+(\.\w+)?$/;
     var str = "abc@sina.com.cn";
     console.log(reg.test(str));

正则之提取

// 找数字
var str = "张三: 1000，李四：5000，王五：8000。";
 var reg = /\d+/g;
 //默认情况下，找到第一个匹配的结果就返回，后面加个g，就是全局找
 var arr = str.match(reg);
 console.log(arr);

正则之替换

//所有的逗号替换成句号
 var str = "abc,efg,123,abc,123,a";
 str = str.replace(/,/g,".");
 console.log(str);

正则的分组（）

在正则表达式中用( )把要分到一组的内容括起来，组分别是RegExp.$1 RegExp.$2等等

//交换位置  源字符串"5=a, 6=b, 7=c"  要的结果"a=5, b=6, c=7"
var str = "5=a, 6=b, 7=c";
str = str.replace(/(\d+)=(\w+)/g, "$2=$1");
console.log(str);

键盘事件对象

方法

keydown 按下时

keypress 按下

keyup 抬起时

属性

keyCode 键盘码，只有数字和字母对应ASCII码

charCode 对应ASCII码，只有在keypress中才生效（IE9+）

js中的instanceof运算符

//判断某个变量是不是某种类型的对象

var num = 5;
var arr = [];
console.log(num instanceof Array); //false
console.log(arr instanceof Array); //true