7.15 Bom和Dom
7.15 Bom和Dom
Bom
Window对象
Window对象是BOM中的*对象
window对象表示整个浏览器窗口。
JavaScript中的任何一个全局函数或变量都是window的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。例如：alert，定时器都是window对象的方法。调用它的子对象时可以不显示的指明window对象。
-
open()
- window.open(“要打开的网页”, “网页名字”, “height=400,width=400,top=10,left=10”);
-
close()
-
innerHeight
- 浏览器窗口的内部高度(兼容所有浏览器)—包含滚动条
-
innerWidth
- 浏览器窗口的内部宽度(兼容所有浏览器)
-
outerWidth
- 可以获取浏览器窗口的整个宽
-
outerHeight
- 可以获取浏览器窗口的整个高
-
screenLeft
- 窗口距离屏幕左上角的位置
-
screenTOP
-
窗口距离屏幕顶部的位置
-
screenX
-
鼠标指针相对于屏幕的水平坐标。
-
screenY
-
鼠标指针相对于屏幕的垂直坐标。
history对象
-
back()
-
back()方法用于模仿浏览器的后退按钮，相当于history.go(-1)
-
forward()
-
forward()方法用于模仿浏览器的前进按钮，相当于history.go(1)
-
go()
使用go()方法可以在用户的历史记录中任意跳转。这个方法接收一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于后退按钮)，正数表示向前跳转(类似于前进按钮)-
0
- 刷新页面
-
-1
- 后退一页
-
1
- 前进一页
-
2
- 前进两页
-
-
history.pushState({a:1}),“shop”,"?data="+n);
-
history.pushState()方法向浏览器历史添加了一个状态。pushState()方法带有三个参数：一个状态对象、一个标题(现在被忽略了)以及一个可选的URL地址
-
- history.pushState(state, title, url); -
state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象，此处可以填null
title —— 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null
URL —— 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域，否则，pushState()将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL -
pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏的显示地址发生变化
-
如果pushState的url参数，设置了一个新的锚点值(即hash)，并不会触发hashchange事件，即使新的URL和旧的只在hash上有区别
-
如果设置了一个跨域网址，则会报错。这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上
-
-
window.onpopstate=function(){}
- 触发回退
-
history.replaceState()
- 用来在浏览历史中添加和修改记录。会修改当前历史记录条目而并非创建新的条目.
-
length
- 属性返回历史列表中的网站数
location对象
-
reload()
- 重新加载当前页面
-
href
- 可以设置跳转当前页面地址
- location.href = “https://www.baidu.com/”;
-
assign
- 可以设置跳转当前页面地址
- location.assign(“https://www.baidu.com/“)
-
replace
- location.replace(“https://www.baidu.com/”);
- 不产生历史记录
-
hash
- 获取#号后面的锚点
-
search
- 获取?号后面的参数
-
hostname
- 返回 web 主机的域名
-
pathname
- 返回当前页面的路径和文件名
-
port
- 返回 web 主机的端口 （80 或 443）
-
protocol
- 返回所使用的 web 协议（http:// 或 https://）
screen对象
-
availHeight
- 屏幕的高度像素减去系统部件高度之后的值,不包含任务高
-
availWidth
- 屏幕的宽度像素减去系统部件宽度后的值,不包含任务宽
-
height
- 屏幕的高度像素
-
width
- 屏幕的宽度像素
navigation对象
-
userAgent
- 返回由客户机发送服务器的 user-agent 头部的值
-
appName
- 返回浏览器的名称。
-
appVersion
- 返回浏览器的平台和版本信息。
-
platform
- 返回运行浏览器的操作系统平台。
Dom
Dom节点
- 什么是节点
HTML 文档中的每个成分都是一个节点。
（1）节点类型
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
（2）节点层次关系-节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。<head> 和 <body> 的父节点是 <html> 节点，文本节点 “Hello world!” 的父节点是 <p> 节点。<head> 节点有一个子节点：<title> 节点。<title> 节点也有一个子节点：文本节点 “DOM Tutorial”。
当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，<h1> 和 <p>是同辈，因为它们的父节点均是 <body> 节点。
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点。
节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把 <html> 节点作为先辈节点。
（3）节点属性
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
- nodeName（节点名称）
- 元素节点的 nodeName 是标签名称
- 文本节点的 nodeName 永远是 #text
- 注释节点的 nodeName 永远是 #comment
- nodeValue（节点值）
- 文本节点，nodeValue 属性包含文本
- 元素节点nodeValue不可用
- 注释节点nodeValue包括注释内容
-
nodeType（节点类型）
-
节点属性
-
nodeName（节点名称）
- 元素节点的 nodeName 是标签名称
- 文本节点的 nodeName 永远是 #text
- 注释节点的 nodeName 永远是 #comment
-
nodeValue（节点值）
- 文本节点，nodeValue 属性包含文本。
- 注释节点nodeValue包括注释内容
-
nodeType（节点类型）
- 元素—1
- 属性----2
- 文本----3
- 注释—8
- 文档----9
-
-
-
获取Dom元素
-
documeng.getElementById()
- 通过id获取元素
-
document.getElementByTagName()
- 通过标签名获取标签列表，只能通过document获取,HTMLCollection
-
document.getElementByName()
- 通过name属性获取节点列表，只能通过document获取,NodeList是有forEach方法遍历
-
document.getElementByClassName(新)
- 通过Class名获取标签列表，任何标签都可以获取其子项中Class列表,HTMLCollection
-
document.querySelector(新)
- 根据标签名获取第一个元素
-
document.querySelectorAll(新)
- 获取所有标签名的元素
-
-
节点的创建
- document.createElement(“标签名”) : 创建新元素
- document.createTextNode("") : 创建文本节点
-
节点的插入
(父对象.insertBefore(新插入的对象，目标插入对象之前（兄弟节点对象）,当父对象下无子节点的时候不适用)
document,.body- appendChild(node) : 向childNodes末尾插入一个节点node
- insertBefore(newElement,targetElement) : 向targetNode之前插入节点node
-
节点的替换
- replaceChild(newNode,oldNode) : newNode替换节点oldNode
-
节点的删除
- removeChild(node) : 移除父节点的某个子节点
- remove()：移除当前节点
-
节点的复制
cloneNode(boolean) : 复制一个节点 复制节点后使用插入或者添加都可以完成节点的粘贴，但是仅能粘贴一次，仅为最后一次
true：深复制，复制节点及其整个子节点树
false : 浅复制，只复制节点本身。- cloneNode(boolean) : 复制一个节点
-
节点的遍历
- childNodes：所有子节点 获取所有子节点（包括注释）
- children：所有是标签类型的子节点 获取所有子元素
- parentNode：获取已知节点的父节点
- parentElement 取已知节点的父元素
- firstElementChild : 第一个子节点 （元素）
- firstChild : 第一个子节点
- lastElementChild：最后一个子节点（元素）
- lastChild：最后一个子节点
- nextElementSibling：下一个兄弟节点（元素）
- nextSibling：下一个兄弟节点
- previousElementSibling：上一个兄弟节点
- previousSibling：上一个兄弟节点
Dom属性
-
DOM 对象属性
- 分为自定义型和原DOM对象属性
- DOM的对象原属性与DOM对象的标签属性部分对应，部分有差别
-
DOM 标签属性
1.设置标签的属性和值，值和属性都必须是字符类型。2.DOM的标签属性命名，不能使用大小写区分不适用下划线区分。
3.属性名必须全小写字母，并且使用-区分每个单词-
getAttribute(属性)：
- 获取标签属性
-
setAttribute(属性,值)：
setAttribute(属性,值)： 我们想要把 一个 类名 改为 demo
div.setAttribute(“class”,”demo”);- 给节点创建一个新属性
-
removeAttribute(name)
- 删除标签属性
-
-
Dom常用属性
- document.body：body元素
- document.title：获取、设置文档的标题
- document.URL：获得完整的URL
- document.domain：获取域名
Bom和Dom的区别
BOM
- BOM是Browser Object Model的缩写，即浏览器对象模型。
- BOM没有相关标准。不同浏览器定义有差别,实现方式不同。
- BOM的最根本对象是window。
DOM - DOM是Document Object Model的缩写，即文档对象模型。
- DOM是W3C的标准。
- DOM最根本对象是document（实际上是window.document）。
- DOM的最根本的对象是BOM的window对象的子对象
- BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作
本文地址：https://blog.csdn.net/w_cyj/article/details/107368494