预习六DOM和BOM

文章目录 一、DOM(Document Object Model)（一）DOM树（二）获取页面中的元素1.根据ID获取2.根据标签名获取（1）getElementByTagName()（2）element.getElementsByTagName() 3.通过HTML5新增的方法获取（1）document.getElementsByClassName('类名')（2）document.querySelector('选择器')；（3）document.querySelectorAll('选择器'); 3.获取特殊元素（body,html）（1）获取body元素（2）获取html元素 （三）事件1.事件三要素2.执行事件的步骤 （四）改变元素内容1.element.innerText2.element.innerHTML3.innerText和innerHTML的区别 （五）改变元素属性1.元素属性 *** 作2.表单元素属性 *** 作3.样式属性 *** 作（1）element.style行内样式 *** 作（2）element.className类名样式 *** 作 （六）排他思想（七）自定义属性 *** 作1.获取属性值（1）element.属性（2）element.getAttribute('属性'); 2.设置属性值（1）element.属性='值'（2）element.setAttribute('属性','值'); 3.移除属性 （八）H5自定义属性（九）节点1.获取元素2.节点概述3.节点层级4.添加新元素（1）创建节点（2）添加节点 5.删除节点6.复制节点 二、BOM（Browser Object Model）1.window对象2.窗口加载事件（window.onload）3.调整窗口大小事件（window.onresize）4.定时器（setTimeout() 和setInterval()）（1）setTimeout()（2）停止setTimeout()定时器（3）setInterval()（4）停止setInterval()定时器 5.this6.JS执行队列7.location对象8.navigator对象9.history对象

一、DOM(Document Object Model) 文档对象模型，是W3C组织推荐的处理**可扩展标记语言（HTML或XML）**的标准编程接口W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页内容，结构和样式 （一）DOM树

文档：一个页面就是一个文档，DOM中使用document表示元素：页面中的所有标签都是元素，DOM中使用element表示节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示DOM把以上内容都看做是对象 （二）获取页面中的元素 根据ID获取根据标签名获取通过HTML5新增的方法获取特殊元素获取 1.根据ID获取

使用getElementById()方法可以获取带有ID的元素对象

1.因为文档页面从上到下加载，所以先有标签，script写在标签下面
2.get获取 element元素 by通过 驼峰命名法
3.参数 id是大小敏感的字符串
4.返回的是一个元素对象

console.dir();打印我们返回的元素对象，更好的查看里面的属性和方法

2.根据标签名获取 （1）getElementByTagName()

使用getElementByTagName()方法可以返回带有指定标签名的对象集合

document.getElementsByTagName('标签名');

返回的是获取过来元素对象的集合，以伪数组的形式存储我们想要一次打印里面的元素对象可以采用遍历的方式得到元素对象是动态的
如果页面中只有一个li，返回的还是伪数组形式如果页面中没有li，返回的是空的伪数组形式 （2）element.getElementsByTagName()

使用element.getElementsByTagName()获取某个元素（父元素必须是单个对象，获取时不包括父元素自己）内部所有指定标签的子元素

element.getElementsByTagName('标签名');

3.通过HTML5新增的方法获取 （1）document.getElementsByClassName(‘类名’)

document.getElementsByClassName('类名');根据类名获取某些元素集合，返回元素对象集合

（2）document.querySelector(‘选择器’)；

document.querySelector('选择器');根据指定选择器返回第一个元素对象

（3）document.querySelectorAll(‘选择器’);

document.querySelectorAll('选择器');根据指定选择器返回所有元素对象集合

3.获取特殊元素（body,html） （1）获取body元素

document.body返回body元素对象

（2）获取html元素

document.documentElement返回html元素

（三）事件

JS使我们有能力创建动态页面，而事件可以被JS侦测到的行为

1.事件三要素 事件源事件类型事件处理程序 2.执行事件的步骤 获取事件源注册事件（绑定事件）添加事件处理程序（采取函数赋值方式）
（四）改变元素内容 1.element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时去掉空格和换行

2.element.innerHTML

从起始位置到终止位置的全部内容，包括html标签，保留空格和换行

3.innerText和innerHTML的区别

（五）改变元素属性 1.元素属性 *** 作

2.表单元素属性 *** 作

3.样式属性 *** 作 （1）element.style行内样式 *** 作 样式采取驼峰命名法（backgroundColor）JS修改style样式 *** 作，产生的是行内样式，CSS权重比较高

（2）element.className类名样式 *** 作 若样式修改较多，采取 *** 作类名方式更改元素样式class是个保留字，因此用className来 *** 作元素类名属性className会直接更改元素的类名会覆盖原先的类名
（六）排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法

所有元素全部清除样式给当前元素设计样式
（七）自定义属性 *** 作 1.获取属性值 （1）element.属性

获取内置属性值（元素本身自带属性）

（2）element.getAttribute(‘属性’);

主要获得自定义的属性（标准），程序员自定义的属性

2.设置属性值 （1）element.属性=‘值’

设置内置属性

（2）element.setAttribute(‘属性’,‘值’);

主要针对于自定义属性（标准）

3.移除属性

element.removeAttribute('属性');

（八）H5自定义属性 自定义属性目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中H5规定自定义属性data-开头作为属性名并赋值（）或用JS设置（element.setAttribute('data-index',2)）
获取H5自定义属性
（1）兼容性获取

 element.getAttribute('data-index');

（2）H5新增

 element.dataset.index 或 element.dataset['index']

（九）节点 1.获取元素 利用DOM提供的方法获取元素（逻辑性不强，繁琐）利用节点层级关系获取元素（利用父子兄节点关系获取元素，逻辑性强，但兼容性稍差） 2.节点概述 节点至少有nodeType(节点类型），nodeName(节点名称），nodeValue(节点值）元素节点nodeType为1属性节点nodeType为2文本节点nodeType为3（换行，空格，文字等） 3.节点层级

父节点node.parentNode

子节点

兄弟节点

4.添加新元素 （1）创建节点

document.createElement('tagName');

（2）添加节点

node.appendChild(child)
node.insertBefore(chid,指定元素)

5.删除节点

node.removeChild(child)

6.复制节点

node.cloneNode()

二、BOM（Browser Object Model） 浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是windowBOM由一系列相关对象构成，并且对象都提供了很多方法属性BOM缺乏标准，JS语法标准化组织ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分 1.window对象 window对象是浏览器的顶级对象，具有双重角色它是JS访问浏览器窗口的一个接口它是全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法 2.窗口加载事件（window.onload） window.load 等页面内容全部加载完毕 包含页面dom元素，图片，flash，css等，只能写一次，若有多个，以最后一个为准document.addEventListener('DOMContentLoaded', function () { })是DOM加载完毕，不包含图片，flash,css等就可以执行 加载速度快

3.调整窗口大小事件（window.onresize）

window.οnresize=function(){}
window.addEventListener('resize',function(){});

4.定时器（setTimeout() 和setInterval()） （1）setTimeout()

window.setTimeout(调用函数,延迟毫秒数）;

window在调用时可以省略延时时间单位是毫秒，可以省略，默认为0这个调用函数可以直接写函数，还可以写函数名，还可以写’函数名()’给定时器添加标识符调用一次
（2）停止setTimeout()定时器

window.clearTimeout(timeoutID);

（3）setInterval()

 window.setInterval(调用函数，延时时间)；

反复调用

（4）停止setInterval()定时器

window.clearInterval();

5.this

this指向问题，一般情况下this最终指向的是那个调用它的对象

全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)

方法调用中谁调用this指向谁

构造函数中this指向构造函数的实例

6.JS执行队列 JS是单线程，同一时间只能做一件事利用多核CPU计算能力，HTML5提出Web Worker标准，允许JS脚本创建多个线程，于是JS中出现了同步和异步同步任务：在主线程上执行，形成一个执行栈异步任务：JS的异步是通过回调函数实现的，回调函数添加到任务队列中事件循环：主线任务不断重复获得任务，执行任务再获得任务 7.location对象

location属性用于获取或设置窗口的URL（统一资源定位符），并可以用于解析URL，因为这个属性返回的是一个对象，所以也称为location对象

URL的语法格式：protocol://host[:port]/path/[?query]#fragment

8.navigator对象

包含有关浏览器的信息，他有很多属性，最常用的是userAgent,该属性可以返回有客户机发送到服务器的user-agent头部的值

9.history对象

与浏览器历史记录进行交互，该对象包含用户在浏览器窗口中访问过的URL