十一、JavaScript之BOM和DOM操作

一、BOM操作

Browser Object Model 浏览器对象模型

window 对象中存储所有对浏览器操作的方法

window 顶级对象中存储的方法可以不写window，也能正常调用

1 window.alert('我是弹窗功能1111');
2 alert('我是弹窗功能2222');

1、常见弹窗

警告框

1 window.alert('弹出内容')

输入框

  • 以字符串形式存储在输入框输入的数据信息

  • 如果输入的是数值内容，必须要转化为数值类型，再进行数学运算

1 window.prompt('输入框提示信息');

确认框

  • 点击确定，返回值是 true

  • 点击取消，返回值是 false

1 window.confirm('确认框提示信息');

2、监听滚动条

1 window.onscroll = function(){
2   // 执行程序内容
3 }
  • 有文档类型声明 <!DOCTYPE html>
    • 通过 html 标签对象，获取滚动条滚动高度
1 var h1 = document.documentElement.scrollTop;
2 var w1 = document.documentElement.scrollLeft;
  • 没有文档类型声明 <!DOCTYPE html>
    • 通过 body 标签对象，获取滚动条滚动高度
1 var h2 = document.body.scrollTop;
2 var w2 = document.body.scrollLeft;

兼容语法

1 var h = document.documentElement.scrollTop || document.body.scrollTop;
2 var w = document.documentElement.scrollLeft || document.body.scrollLeft;

3、事件类型

事件对象：绑定事件的标签对象

事件类型：触发事件的类型，click是事件类型，onclick是绑定事件

JavaScript常见的事件类型：

  • 鼠标事件 : 鼠标的各种点击、移动

  • 键盘事件 : 键盘的各种按键

  • 表单事件 : form标签相关的事件

  • 特殊事件 : 动画终止事件、过渡终止事件、滚动条监听事件...

鼠标事件：

  • 鼠标事件，可以绑定给标签对象，也可以绑定给整个文档

  • 鼠标点击，是按下和抬起两个动作都完成才会触发

1 // 标签对象.onclick = function(){}
2 var oDiv = document.querySelector('div');
3 oDiv.onclick = function () {
4   console.log('鼠标点击');
5 }
1 // 鼠标事件绑定给整个文档--document
2 document.onclick = function(){
3     console.log(456);
4 }

  • click：鼠标左键单击，按下和抬起两个动作都完成才触发

  • dbclick：鼠标左键双击

  • contentmenu：鼠标右键单击，一般阻止默认点击事件

  • mousedown：鼠标按下，永远只执行一次

  • mouseup：鼠标抬起

  • mousemove：鼠标移动

  • mouseover：鼠标移入

  • mouseout：鼠标移出

  • mouseenter：鼠标移入

  • mouseleave：鼠标移出

1 // mouseover和mouseout在经过当前绑定事件的标签,以及标签的子级元素,都会触发事件
2 // 经过当前标签,只触发移入或者移出
1 // mouseenter和mouseleave只有经过当前标签的边界时会触发，经过子级标签不会触发

键盘事件：

  • 键盘事件绑定事件标签对象，不能随便定义

  • 只有可以被选中的标签可以绑定，也就是css样式中可以获取鼠标焦点的标签，才支持键盘事件（input , textarea , select , button , a超链接）

  • document可以被绑定

  • keydown：键盘按下

    • 鼠标按下事件，一直按住只会触发一次

    • 键盘按下事件，一直按住会一直触发

  • keyup：键盘抬起

1 var oDiv = document.querySelector('div');
2 
3 oDiv.onkeyup = function(){
4   console.log(456);
5 }

  • 键盘多按键事件

    • 在定义事件处理函数时，如果定义一个形参，JavaScript程序会自动向这个形参存储数据

    • 形参中存储的是事件对象的相关数据信息

    • 一般事件对象，形参名称为 event 或者 e

 1 document.onkeydown = function (e) {
 2   // 兼容低版本IE事件对象window.event
 3   e = e || window.event;
 4   // 兼容低版本的火狐浏览器e.which获取按键编码
 5   var keyCode = e.keyCode || e.which;
 6   // altKey、ctrlKey、shiftKey判断是否按下alt、ctrl、shift
 7   // 判断按键是否是 alt + ctrl + j (74) 
 8   if (e.altKey && e.ctrlKey && keyCode === 74) {
 9     console.log('三个按键都按下')
10   }
11 }

触屏事件：

只有移动端设备(终端) 支持触摸事件

  • 标签对象.ontouchstart：触摸开始事件

  • 标签对象.ontouchend：触摸结束事件

  • 标签对象.ontouchmove：触摸移动事件

  • 长按事件：判断触摸开始和触摸结束的时间间隔，大于1秒

  • 轻触事件：判断触摸开始和触摸结束的时间间隔，小于 0.1秒

  • 左滑事件：判断触摸开始和触摸结束的时间坐标位置

  • 放大事件

  • 缩小事件

特殊事件：

  • 动画结束：标签对象.onanimationend

  • 过度结束：标签对象.ontransitionend

表单事件：

  • 要阻止默认事件的执行
 1 // 例如点击button按钮就会执行提交表单事件
 2 // 点击鼠标右键,弹出的内容,也是默认事件,也可以阻止
 3 // 阻止鼠标右键事件
 4 document.oncontextmenu = function (e) {
 5   // 事件对象的兼容
 6   e = e || window.event
 7 
 8   // 阻止右键单击,默认事件的执行,没有不会弹出默认的右键菜单
 9   if (e.preventDefault) {
10     // 普通浏览器,阻止默认事件的方式
11     e.preventDefault()
12   } else {
13     // 低版本IE浏览器阻止默认事件方式
14     e.returnValue = false;
15   }
16   console.log(123);
17 }
  • submit 表单提交事件
1 <form action="./01_复习.html" method="GET">
2   账号: <input type="text"><span name="1"></span><br>
3   密码: <input type="password"><span name="2"></span><br>
4   <button>提交</button>
5 </form>
 1 var oFrom = document.querySelector('form');
 2 oFrom.onsubmit = function(e){
 3   // 兼容事件对象
 4   e = e || window.event;
 5   
 6   // 阻止默认事件的执行
 7   if (e.preventDefault) {
 8     // 普通浏览器,阻止默认事件的方式
 9     e.preventDefault()
10   } else {
11     // 低版本IE浏览器阻止默认事件方式
12     e.returnValue = false;
13   }
14   
15   var oIpt1 = document.querySelectorAll('input')[0].value;
16   var oIpt2 = document.querySelectorAll('input')[1].value;
17   
18   // 获取两个span标签,准备写入提示信息
19   var oSpan1 = document.querySelectorAll('span')[0];
20   var oSpan2 = document.querySelectorAll('span')[1];
21   
22   // 验证判断账号
23   if (oIpt1.length >= 8 && oIpt1.length <= 16) {
24     // 账号符合规范,给账号之后的span,内容清空
25     oSpan1.innerHTML = '';
26   } else {
27     // 账号不符合规范,给账号之后的span,添加内容
28     oSpan1.innerHTML = '<em style="color:red">账号不符合规范<em>';
29   }
30   
31   // 验证判断密码
32   if (oIpt2.length >= 8 && oIpt2.length <= 16) {
33     // 密码符合规范,给密码之后的span,内容清空
34     oSpan2.innerHTML = '';
35   } else {
36     // 密码不符合规范,给密码之后的span,添加内容
37     oSpan2.innerHTML = '<em style="color:red">密码不符合规范<em>';
38   }
39 }

4、事件的绑定

  • 同一个标签，默认是不能对同一个事件类型，绑定多个事件处理函数

  • 如果给同一个标签，绑定相同类型的事件，后绑定的事件处理函数会覆盖之前绑定的事件处理函数

  • 给标签添加监听事件，绑定事件类型和事件处理函数

    • 标签对象.addEventListener('事件类型' , 匿名函数function(){});

    • 标签对象.addEventListener('事件类型' , 函数名称fun);

  • 删除绑定的事件处理函数（匿名函数语法绑定的方法无法删除）

    • 标签对象.removeEventListener('事件类型',函数名称)

1 var oDiv = document.querySelector('div');
2 // 添加监听事件
3 oDiv.addEventListener( 'click', fun3 );
4 // 删除监听事件
5 oDiv.removeEventListener( 'click', fun3 );
6 function fun3(){
7   console.log('事件绑定');
8 }
  • 低版本IE绑定语法
1 // 匿名函数绑定
2 oDiv.attachEvent('onclick', function(){
3   console.log(123);
4 })
5 // 函数名称绑定
6 oDiv.attachEvent('onclick' , fun2)

5、地址栏相关信息

浏览器地址栏的相关信息都存储在window.location属性中

  • window.location.href：存储的是地址栏中的相关信息

    • 中文会显示为 %2位十六进制数值形式

    • 如果只是浏览器使用，没有必要转化，浏览器可以正常的解析显示这些内容

    • 判断比较时需要转化为中文

      • decodeURI()

      • decodeURIComponent()

    • 可以通过设定window.location.href来完成页面的跳转，不再需要超链接

  • window.location.search：

    • 通过get方式，在地址栏中存储的传参数据信息

    • 中文显示也是需要转化

6、浏览器历史记录

浏览器跳转过的页面的记录，window.history

  • window.history

    • 存储浏览器的历史记录

    • 是当前这个窗口的浏览记录，新窗口打开的页面不算浏览记录

    • window.history.length：次数

    • window.history.back()：上一个浏览的页面

    • window.history.forward()：下一个浏览的页面

    • window.history.go()：根据括号中正负数值跳转

    • window.history.back()：效果等于 window.history.go(-1)

    • window.history.forward()：效果等于 window.history.go(1)

7、浏览器对象信息

存储与浏览器配置等相关的信息，window.navigator

  • window.navigator.userAgent：浏览器型号，内核，版本等相关信息

  • window.navigator.appVersion：浏览器版本信息

  • window.navigator.appName：浏览器名称，Netscape网景公司名称

  • window.navigator.platform：浏览器操作系统

8、浏览器的事件

  • widow.onload：浏览器加载事件

    • 如果js代码在html代码之前，html代码还没有执行，无法正确获取到div标签

    • 让定义的程序在浏览器所有内容都加载之后，再执行

  • window.onscroll：浏览器滚动条监听事件

  • window.onresize：浏览器窗口大小监听事件

  • window.open()：在新窗口打开页面事件

  • window.close()：关闭当前窗口

9、获取浏览器宽高

浏览器的宽度和高度只能获取不能设定

  • 包含滚动条
1 var w1 = window.innerWidth;
2 var h1 = window.innerHeight;
  • 不包含滚动条
1 var w2 = document.documentElement.clientWidth;
2 var h2 = document.documentElement.clientHeight;

二、DOM操作

Document Object Model 文档对象模型

对文档的操作，document 的顶级对象

document 对象中存储所有对文档的操作方法

document中存储的方法必须要写document

  • DOM操作基本流程

    • 获取DOM文档中标签对象模型

    • 操作标签

1、获取标签对象

标签对象：变量的命名一般使用的是o开头的小驼峰命名法，object的简写，表示是一个对象

  • 通过id属性获取，id是标签唯一标识符，其他方法获取的是伪数组
1 // document.getElementById()是JavaScript固定的语法形式,必须特别注意大小写
2 // ()中必须以字符串的形式,定义id属性的属性值,做匹配查询
3 var oDiv1 = document.getElementById('div1');

  • 通过标签名称获取标签对象

    • 将获取到的标签对象，定义成一个伪数组

    • 如果要通过for...in循环对其中的标签对象进行操作，会引起报错，因为会有多余的伪数组的函数方法参与循环

    • 不能使用 forEach() 循环遍历

1 var oDivs1 = document.getElementsByTagName('div');
2 
3 // for循环
4 for(var i = 0 ; i <= oDivs1.length-1 ; i++){
5     console.log(oDivs1[i]);           
6 }

  • 通过class属性的属性值获取

    • 通过class属性的属性值获取标签对象，定义成伪数组

    • for...in循环遍历，操作标签对象也是会报错

    • 不能使用 forEach() 循环遍历

1 var oDivs2 = document.getElementsByClassName('div2');

  • 通过name属性的属性值获取

    • 执行结果也是一个伪数组，但是是包含 forEach() 方法的伪数组

    • 可以使用 forEach() 循环遍历

1 var oDivs3 = document.getElementsByName('div3');

最新获取标签的方法

  • 低版本的IE浏览器不支持

  • 支持所有的html、css的语法形式来获取标签对象

 1 // document.querySelector()
 2 // 获取第一个匹配条件的标签对象，只会获取一个标签对象
 3 
 4 // 通过标签名称获取标签对象
 5 var oDiv = document.querySelector('div');
 6 
 7 // 通过id属性值获取标签对象
 8 var oDiv1 = document.querySelector('#div1');
 9 
10 // 通过class属性值获取标签对象
11 var oDiv2 = document.querySelector('.div2');
12 
13 // 其他属性的属性值
14 var oDiv3 = document.querySelector('[name="div3"]');
15 
16 // 兄弟选择器
17 var oSpan1 = document.querySelector('[name="div4"]~span');
18 
19 // 父子选择器
20 var oLi1 = document.querySelector('ul>li');
21 
22 // 后代选择器
23 var oLi1 = document.querySelector('ul li');
1 // document.querySelectorAll()
2 // 获取所有匹配条件的标签对象，执行结果是伪数组，可以使用forEach方法
3 var oLis1 = document.querySelectorAll('ul>li');

2、操作标签文本内容

innerHTML 和 innerText 执行的都是全覆盖写入操作

  • 标签对象.innerHTML：

    • 支持获取和写入标签对象

    • 可以解析标签

    • 可以获取标签对象中，内容以及子级标签名称和子级标签内容

1 var oDiv = document.querySelector('div');
2 oDiv.innerHTML = '<ul><li>我是ul,li标签</li></ul>';

  • 标签对象.innerText：

    • 不支持获取和写入标签对象，只支持文本操作

    • 不能解析标签

    • 只能获取标签对象中，内容以及子级标签内容，不能获取子级标签名称

1 var oDiv = document.querySelector('div');
2 
3 // 写入的字符串内容如果有标签名称,不能支持解析标签
4 // 显示效果是纯字符串效果
5 oDiv.innerText = '<ul><li>我是ul,li标签</li></ul>';

3、操作标签属性和属性值

特殊的属性

  • 可以直接通过点语法或者[]语法来操作的属性

  • 标签.id：可以操作设定 id属性和属性值

  • 标签.className：可以操作设定 class属性和属性值

  • 直接写是获取，带有赋值的是设定

    • 标签对象.id、标签对象.className：获取属性值

    • 标签对象.id = 赋值、标签对象.className = 赋值：设定属性值

 1 // <div id="div1" class="div2" title="我是div">我是一个div标签</div>
 2 var oDiv = document.querySelector('div');
 3 
 4 // 获取属性值
 5 console.log(oDiv.id);
 6 console.log(oDiv.className);
 7 console.log(oDiv.title);
 8 
 9 // 设定属性值
10 oDiv.id = 'ddd';
11 oDiv.className = 'ccc';
12 oDiv.title = '我是设定的提示内容';

所有属性都可以使用的操作方式

  • 获取属性值：getAttribute('属性')

1 oDiv.getAttribute('class')
  • 设定属性值：setAttribute('属性' , '属性值')
1 oDiv.setAttribute('index', 1);

4、特殊标签的获取

方法1：低版本IE浏览器也支持

方法2：不兼容低版本IE浏览器

 1 // 1,body标签
 2 var oBody1 = document.body;
 3 var oBody2 = document.querySelector('body');
 4 
 5 // 2,head标签
 6 var oHead1 = document.head;
 7 var oHead2 = document.querySelector('head');
 8 
 9 // 3,html标签
10 var oHtml1 = document.documentElement;
11 var oHtml2 = document.querySelector('html');

5、操作标签样式

  • 获取标签样式

    • 标签对象.style.属性

  • 设置标签样式

    • 标签对象.style.css样式 = 属性值

    • 此语法设定的CSS样式是 行内/内嵌 样式，权重或优先级最高

1 var oDiv = document.getElementById('div');
2 oDiv.style.color = 'blue';
    • 不支持 - 减号符号，减号是作为减法运算符执行，在style中定义css样式要去掉减号，使用小驼峰命名法，font-size要写成fontSize

  • 获取css样式属性值

    • 标签对象.style.属性

      • 只能获取标签行内样式属性的属性值

      • 其他 内部样式 / 外部样式 设定的属性的属性值，获取结果是空字符串

    • 获取标签执行的css样式属性的属性值

      • 不管是行内、内部、外部css样式设定的属性值

      • 获取的是最终标签执行的css样式的属性值

      • 普通浏览器：window.getComputedStyle(标签对象).属性

1 window.getComputedStyle(oDiv).width
      • 版本IE浏览器：标签对象.currentStyle.属性
1 oDiv.currentStyle.width

6、获取标签占位信息

1 var oDiv = document.querySelector('div');

获取宽高（内容）+ padding + border

1 // 水平方向，左右的padding和border都算
2 console.log( oDiv.offsetWidth );
3 // 垂直方向，上下的padding和border都算
4 console.log( oDiv.offsetHeight );

获取宽高（内容）+ padding

1 // 水平方向，左右的padding都算
2 console.log( oDiv.clientWidth );
3 //垂直方向，左右的padding都算
4 console.log( oDiv.clientHeight );

独立获取边框线宽度

1 // 上边框线宽度
2 console.log( oDiv.clientTop );
3 // 左边框线宽度
4 console.log( oDiv.clientLeft );

通过获取css样式来获取右下边框线的宽度

1 console.log( window.getComputedStyle(oDiv).borderRightWidth );
2 console.log( window.getComputedStyle(oDiv).borderBottomWidth );

获取与定位父级对象的间距

1 // console.dir(标签对象)，其中有一个属性offsetParent，就是定位的父级对象
2 // 1、父级没有定位属性，定位对象是body
3 // 2、父级有定位属性，定位对象是父级标签
4 // 3、标签有fixed,定位对象是视窗窗口
5 // console.dir(标签对象)看offsetParent后定义的标签
6 console.dir( oDiv );
7 console.log( oDiv.offsetTop );
8 console.log( oDiv.offsetLeft );

 

 

 

posted @ 2021-07-17 19:04  大米饭盖饭  阅读(95)  评论(0)    收藏  举报