JavaScript复习记录（1）—— DOM&BOM

1、DOM

1.1、什么是DOM

文档对象类型（Document Object Model，简称DOM）,是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

W3C已经定义了一系列的DOM接口，通过调用这些接口可以改变网页的内容、结构和样式

在DOM中就是将一个文档看做是一个节点树

DOM就是提供一系列方法（API）对这些节点树进行增删改查

DOM只是一个接口规范，可以用各种语言实现，不是JavaScript语言的一部分，但是DOM操作是JavaScript最常见的任务，离开了DOM，JavaScript就无法控制网页，并且JavaScript也是最常用于DOM操作的语言。

1.2、DOM树

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中的所有标签都是元素，DOM中用element表示

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作是对象

1.3、节点

元素节点（标签）

属性节点（标签上的属性） 

 文本节点（标签之间的文本）

 1.4、获取元素节点的方法

document.getElementById(ID名字) 通过id（唯一）获取标签

document.getElementsByTagName(标签名字) 返回的是一个类似数组的集合

document.getElementsByName(标签name属性) 返回的是一个类似数组的集合

document.getElementsClassName(标签class名字) 返回的是一个类似数组的集合

document.querySelector(部分css选择器的写法) 返回匹配的第一个

document.querySelectorAll()

document.body 获取body标签

document.documentElement 获取html标签

document.表单name.表单标签name

//辅助方法

hasChildNodes()判断是否有子节点 返回的是布尔值

childNodes 返回所有子节点列表。

firstChild 返回第一个子节点。

lastChild 返回最后一个子节点。

nextSibling 返回后面的兄弟节点。

previousSibling 返回前面的兄弟节点。

parentNode 返回父节点。

children 返回子元素节点。

1.5、属性节点操作

1、.attributes 

 取得所有的属性

 2、元素.属性名   

获取某个属性，但是获取class的时候要写为className

3、元素.getAttribute(属性名) 属性名需要打引号   

这种方法获取class可以直接写class

4、 设置属性

元素.属性名 = 属性值

元素.setAttribute(属性名，属性值); //避免设置style 和onclick

5、 元素.removeAttribute(属性名)

移除某个属性

6、hasAttribute()

返回一个布尔值，表示是否有某个属性。

HTML5中可以自定义属性 所有自定义属性 以data-自定义属性名

7、dataset

HTML5自定义属性获取方法。

元素.dataset.属性名 //属性名不写data-

可以在标签上保存数据-直接用data-

1.6、 文本节点

1、 innerHTML

可以重写标签中的内容，会解析成html的格式进行显示

2、innerText

可以重写标签中的内容，但是不会解析HTML（会直接将标签当作内容展示）

3、outerHTML

替换整个节点

4、value

获取/设置表单的值

1.7、 节点属性

1、节点.nodeName

元素节点返回 标签名；

属性节点 返回属性名；

文本节点始终返回#text；

2 节点.nodeValue

元素节点返回 undefined 或者null

属性节点返回属性值

文本节点返回文本

3、元素.nodeType

元素节点返回 1

属性节点返回 2

文本节点返回 3

1.8、 css操作

1、 元素.style.css属性

注意：设置的时候是将css添加到行内的

获取的时候只能获取行内属性

如果是设置float ，要写为cssFloat

2、元素.style.cssText

批量增加css

注意：会覆盖原来的style

3、获取当前标签渲染后所有样式

IE：element.currentStyle

window.getComputedStyle(element,null)

4、最佳修改css是控制class

box.className = 'bg';

1.9、 节点操作

1、document.createElement(标签名)

创建一个元素节点（标签）

2、 document.createTextNode(文本)

创建文本节点

3、 parentNode.appendChild(子节点)

将子节点添加到父节点的最后

4、parentNode.insertBefore(newNode,oldNode)

将newNode插入到oldNode之前

5、parentNode.replaceChild(newNode, oldNode)

用newNode替换oldNode

6、 parentNode.removeChild(子节点)

移除某个子节点

7、cloneNode(bool)

克隆节点（复制节点）

如果bool不写或者为false ,则只会克隆标签和属性

如果bool为true,则该节点的所有后代节点也会被克隆

2、BOM

2.1、JS组成

ECMAScript(ES3,ES5,ES6,ES7,ES8):核心语法，条件判断，循环，函数，变量，运算符

DOM：操作标签和CSS的方法 （API）

BOM：浏览器对象模型

2.2、BOM能做什么

1、操作浏览器窗口

2、提高导航对象

3、屏幕相关对象

4、浏览器信息

5、cookie

2.3、 window认识

1、window是作为浏览器端最顶层的对象

注意：调用这个对象下的方法和属性可以不用写window

2、window.open() 打开一个新窗口

3、window.close()关闭一个窗口

4、window.innerWidth 获取浏览器可用宽

5、window.innerHeight 获取浏览器可用高

浏览器的可用宽度还可以使用：document.documentElement.clientWidth || document.body.clientWidth

2.4、location认识

理解：用于获得当前页面的地址，也可以操作当前页面定向到其他页面

location 的属性：

1、location.href

当前页面完整的url //JS跳转页面

2、location.protocal

url的协议部分

3、location.host

主机名和端口

4、location.hostname

url的主机名

5、location.port

url中的端口号

6、location.hash

锚点部分，url中以'#'开头 的部分

7、location.pathname

url的路径部分 以/开头部分

8、location.search

url中的参数 以？开头的键值对字符串 ，格式 ？键=值

&键=值

locatin 方法：

1、 location.assgin()

载入新文档

2、location.replace

用新文档替换当前历史记录

3、location.reload()

重新载入

navigator 对象：

包含浏览器所有的详细信息

screen 对象：

获取当前屏幕

history对象：

提供对浏览器历史记录的访问能力

1、history.length：

访问了多少个页面

2、history.back()

后退

3、history.forward()

前进

4、history.go(n)

后退或者前进多少步，n是一个数值，正数代表前进多少页，负数代表后退多少页

5、history.state

获取history的堆栈，初始为空

6、history.pushState(state ,title,url)

state:一个与添加的记录相关联的状态对象

title:新页面的标题，一般浏览器会忽略，所以可以直接填空的

url:要打开的新网址