JavaScript Day_08+09

JavaScript Day_08

BOM (Browser Object Model) 浏览器对象模型

1.bom是进行浏览器操作的

2.bom里面存在多个对象

3.bom实际进行操作浏览器是使用多个对象里的属性及相关方法

4.bom没有规范，我们所讲的是bom的共有对象

window的方法及属性

window对象是BOM的顶层对象，window对象表示浏览器窗口的一个对象，每个浏览器窗口都有一个window对象与之对应

window的方法书写时可以省略window.

window对象的属性对象

document(核心)：文档对象，可以在js脚本中直接访问页面元素(DOM)

history：历史对象，包含窗口的浏览历史，可以实现后退

location：包含浏览器当前的地址信息，可用于刷新页面和跳转新页面

frames：框架对象，可以获取页面框架内容

screen：包含客户端显示屏幕的信息

navigator：导航对象，包含所有有关访问者浏览器的信息

location对象

location是BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了导航功能

location对象的属性：

hash 锚点、host 端口号、hostname 主机名、href URL地址、pathname 路径名、search 查询字符串、protocol协议部分

跳转到指定的URL 1. loaction.assign() 2.loaction.href=“” 3.loaction=“” 4.loaction.replace()用新的URL代替，可以避免产生历史记录

history对象

保存着用户上网的记录，从窗口被打开的那一刻算起

history.back() 后退

history.forward() 前进

history.go() 浏览器在history对象中向前或向后(-1代表后退，1代表向前，0代表刷新页面)

navigator对象

navigator.userAgent() //用户代理信息，通过该属性可以获取浏览器及操作系统信息

系统对话框

alert 弹出警告框

confirm 提示框：确认与取消

prompt 输入框

DOM(document object model) 文档对象模型

<div id="box">你好</div>
div //表示元素节点element(任意的标签都是元素节点)
id //表示属性节点attribute(任何的属性都是属性节点)
你好 //表示文本节点text(任意文本都是文本节点)

元素共有属性 赋值就是设置 不赋值就是获取

tagName是一个只读属性，不能进行设置

最常用的三种元素节点对象获取方式：

getElementByid();获取特定id元素的节点对象(返回一个对象)

getElementsByTagName();获取指定标签名的节点列表(返回一个数组)

getElementsByName();获取相同name属性值的节点列表(返回一个数组)

querySelector():通过选择器获取第一个（返回的是一个元素）

querySelectorAll():通过选择器获取所有的(返回的是一个NodeList)

getElementById()

元素节点的id属性，如果找到相应的元素则返回该元素的元素节点对象，如果不存在，则返回null

onload事件：重新加载页面

元素节点的属性

TagName：元素节点对象指向的标签名称

id：元素节点的id属性值

className：元素节点的class属性值

innerText与innerHTML的区别

innerText属性是将文本内容设置为指定节点及其所有子节点的纯文本，而innerHTML还会获取HTML的内容

DOM节点的共有属性

元素节点、属性节点、文本节点的共同属性分别为：nodeName（节点名称）、nodeType（节点类型）、nodeValue（节点值）

如果是元素节点，nodeType返回值为1

如果是属性节点，nodeType返回值是2

如果是文本节点，nodeType返回值是3

childNodes

childNodes：某元素的所有子节点，包含了文本节点及元素节点

属性节点的属性

attributes属性：获取某元素节点的所有属性节点（返回一个数组）

item：根据下表找到对应的属性节点，返回attr对象

getNamedItem:根据属性名获取，返回attr对象

setNamedItem：根据对于的属性名进行设置，返回attr对象

removeNamedItem：根据对于的属性名进行删除，返回attr对象

属性节点操作的三个函数

getAttribute():通过属性名获取对应的属性值

setAttribute():设置一个key-value形式的属性键值对

removeAttribute：移除指定的属性

元素节点间关系的相关属性

children:获取所有的子元素节点（不包含文本节点）

childNodes：子节点集合（包含文本节点）

firstChild：获取当前元素节点的第一个子节点，相当于childNodes[0]

lastChild:用于获取当前元素节点的最后一个子节点

parentNode:属性返回该节点的父节点

previousSibling: 属性返回该节点的前一个同级节点

nextSibling: 属性返回该节点的后一个同级节点。

DOM节点操作

DOM节点操作指的是：创建节点、复制节点、插入节点、删除节点、替换节点等

DOM操作涉及的方法有：

createElement():创建一个元素节点

createAttribute():创建一个属性节点

createTextNode():创建一个文本节点

appendChild():添加一个新节点到子节点末尾

cloneNode(); 复制节点

removeChild(); 移除节点

例如: 
//通过父节点调用, 来删除指定子节点
box.parentNode.removeChild(box);

replaceChild：将新节点替换旧节点

例如: 
//通过父节点调用, 新节点p替换了旧节点div
//第一个参数为新节点, 第二个参数为旧节点
box.parentNode.replaceChild(p, box);

insertBefore(); 将新节点插入到某节点前面

例如: 
//通过父节点调用, 在box之前插入一个新节点p;
//第一个参数为新节点
box.parentNode.insertBefore(p, box); 

onscroll滚动事件

实时获取距离顶部/左边的距离(顶部不可见区域的高度/宽度)

例如: 
window.onscroll = function() {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //考虑浏览器兼容性问题 //获
      var box = document.getElementById("box");
      box.innerHTML = scrollTop;
}