JavaScript基础篇（3）

18 BOM

浏览器对象模型（Browser Object Model (BOM)），提供了一整套操作浏览器窗口的属性和方法。

1) 获取可视窗口的宽和高

• window.innerHeight - 浏览器窗口的内高度（以像素计）
• window.innerWidth - 浏览器窗口的内宽度（以像素计）

2) 浏览器的弹框

• 弹出框：window.alert()
• 询问框：window.confirm()
• 输入框：window.prompt()

3) 开启和关闭页面

• 开启：window.open()
• 关闭：我们直接调用返回值的一个属性close进行关闭

var openDate = undefined;
function openPage() {
    
    
	openDate = window.open("./注册.html");
		console.log(openDate);
}

function closePage() {
    
    
	openDate.close();
}

4) 浏览器历史记录的操作

• 回退页面：window.history.back() 或 window.history.go(-1)
• 前进页面： window.history.forward() 或 window.history.go(1)
• 刷新页面：window.history.go(0)

5) 窗口常用事件

• onload()：页面加载时

• onresize()：调整窗口大小事件

• onscroll()：滚动窗口时的事情

6) 浏览器卷去的尺度 (是文档元素不是window)

• 高度：document.documentElemrnt.scrollTop(有声明) 或 document.body.scrollTop(没有声明)
• 宽度：document.documentElemrnt.scrollLeft(有声明) 或 document.body.scrollLeft(没有声明)

window.onscroll = function() {
    
    
            // 6. 浏览器卷去的尺寸
            console.log("卷去的高" + document.documentElement.scrollTop);
            console.log("卷去的宽" + document.documentElement.scrollLeft);
        };

7) 窗口滚动到什么位置

语法：window.scrollTo(top, left)

19 DOM

Document Object Model，文档对象模型，提供了一整套操作文档流相关内容的属性和方法。

1）文档树( DOM树 )

2）获取文档元素

• 通过 id 名获取：document.getElementById()

• 通过类名获取：document.getElementsByClassName()

• 通过标签名获取：document.getElementsByTagName()

• 通过选择器获取：document.querySelectorAll()

注意：querySelector只能获取一个元素，querySelectorAll 获取多个元素

• 获取特殊元素：body和html

// 1. 获取body元素
var bodyEle = document.body;
console.log(bodyEle);
// 2. 获取HTML元素
var htmlEle = document.documentElement;
console.log(htmlEle);

3）操作元素内容

• 操作文本内容：innerText

• 操作超文本内容：innerHtml

3）操作元素属性

• 原生属性

// 注意：name和class不能获取
var ele = document.getElementById("orange");
ele.id = "fruit";
console.log("id:", ele.id); // id: fruit

• 自定义属性

// 1. 获取属性：getAttribute("属性名")
var classVal = ele.getAttribute('class');
console.log("class:", classVal); // class: orangeCls
// 2. 修改属性：setAttribute("属性名", "属性值")
ele.setAttribute("class", "active");
console.log("class:", ele.className); // class: active
// 3. 移除属性：removeAttribute("属性名")
ele.removeAttribute("class");
console.log("class:", ele.className); // class:

4）操作元素类名className

var cls = ele.className;
// 修改属性
ele.className = "activeCls";
// 移除属性
ele.className = "";

5）操作元素样式

• 操作行内样式：元素.style.样式名 = '属性值'

• 操作非行内样式：window.getComputedStyle(元素)

注意：要修改元素样式只能采用第一种方式，第二种只能获取不能修改

6）操作节点

• 创建节点：document.createElement(节点名称)

• 插入节点：

父节点.appendChild(子节点) ：用这个插入的子节点为父节点的最后一个节点

父节点.insertBefore(子节点，要插入的位置的子节点)

• 删除节点：

移除子节点：父节点.removeChild(子节点)

移除本身：节点名.remove()

• 克隆节点：节点.cloneNode(是否克隆后代节点)
  • true ( 深克隆 )：克隆本身+子节点
  • false ( 浅克隆 )：只克隆本身，不克隆子节点

7）和位置相关的操作

• 获取元素可视区域的宽高：window.innerHeight/innerWidth
• 获取元素卷去的宽高：document.documentElement.scrollTop/scrollLeft || document.body.scrollTop/scrollLeft
• 获取元素可视区域的宽高：clientWidth/clientTop
• 获取元素偏移量：offsetWidth/ofsetHeight

element.offsetWidth 返回包括content、padding、border，返回的数值不带单位，相当于 border-box（IE 盒子模型）
element.clinetWidth 返回包括content、padding，不含border，返回数值不带单位
element.scrollWidth 返回包括content、padding，不含border、，返回数值不带单位.
offset系列经常用于获取元素的位置
clinet系列经常用于获取元素大小
scroll系列经常获取滚动距离
注意：页面滚动的距离通过window.pageYoffset获得

20 事件

事件指的是用户触发指定行为。

事件是由三部分组成的：事件源 事件类型 事件处理程序 我们也称为事件三要素
(1) 事件源：事件被触发的对象，谁被触发
(2) 事件类型：如何触发什么事件 ，比如鼠标点击(onclick) 还是鼠标经过还是键盘按下
(3) 事件处理程序：通过一个函数赋值的方式完成

• 事件绑定：

// 1、事件源上添加事件类型   
<button onclick="事件处理函数">按钮</button>
// 2、先获取事件源， 在绑定事件
<button class="submitCls">提交</button>
var btnEle =  document.querySelector(".submitCls")[0];
btnEle.onclick = function(){
    
    
    // 事件处理函数
 }
// 3、先获取事件源，进行事件的监听
<button class="submitCls">提交</button>
var btnEle =  document.querySelector(".submitCls")[0];
btnEle.addEventListener('事件名',function(){
    
    
     // 事件处理函数
});

• 事件对象：当事件触发的时候, 一个描述该事件信息的对象。事件对象只有有了事件才会存在，是系统给我们自动创建的，不需要我们传递参数。

事件对象也有兼容性问题，ie678 通过 windows.event。兼容性写法: e = e || window.event

• 事件委托：事件委托也成为事件代理，在jQuery里面称为事件委派。

  事件委派的原理：不是给每个子节点单独设置监听器，而是事件监听器在其父节点上，然后利用冒泡原理影响设置每个子节点
  事件委派的作用：我们只操作了一次DOM，提高了程序的性能

• 阻止冒泡：e.stopPropagation();

• 阻止默认行为：e.preventDefault()

• 注册事件

		var btns = document.querySelectorAll('button');
		// 1. 传统方式注册事件:会覆盖掉以前的
		btns[0].onclick = function() {
    
    
			alert('hi');
		}
		btns[0].onclick = function() {
    
    
			alert('我是小布');
		}
		// 2. 事件侦听注册事件 
		// (1) 里面的事件类型是字符串 必定加引号 而且不带on
		// (2) 同一个元素 同一个事件可以添加多重侦听器(事件处理程序)，而且不会覆盖
		btns[1].addEventListener('click', function() {
    
    
			alert(22);
		})
		btns[1].addEventListener('click', function() {
    
    
			alert(33);
		})

• 鼠标事件

offsetX/offsetY：相对于触发事件的元素在x轴或y轴的偏移量

clientX/cilentY：相对于浏览器可视窗口在x轴或y轴的偏移量

pageX/pageY：相对于页面文档流上面/左边的偏移量

• 键盘事件

keyup 弹起事件

keydown 按下事件

keypress按下事件，但是这个不能识别CTRL shift 左右箭头等功能键盘

• 定时器

setInterval(函数,毫秒数) 每隔多少毫秒执行一次函数，重复执行

setTimeout(函数,毫秒数) 每隔多少毫秒执行一次函数，只执行一次