BOM和DOM

BOM和DOM

一 BOM

1.定义

• （1）BOM是Browser Object Model的缩写，即浏览器对象模型。
• （2） BOM没有相关标准。不同浏览器定义有差别,实现方式不同。
• （3） BOM的最根本对象是window。

2.window对象

• （1）open()
  window.open(“要打开的网页”, “网页名字”, “height=400,width=400,top=10,left=10”);
• （2）close()
  关闭网页。
• （3）innerHeight
  浏览器窗口的内部高度(兼容所有浏览器)—包含滚动条。
• （4）innerWidth
  浏览器窗口的内部宽度(兼容所有浏览器)。
• （5）outerWidth
  可以获取浏览器窗口的整个宽。
• （6）outerHeigh：
  可以获取浏览器窗口的整个高。

3.location对象

• （1）reload()
  重新加载当前页面。
• （2）herf
  location.href = “https://www.baidu.com/”;
  跳转打开页面。产生历史记录。可以获取当前页面的地址。
• （3）assign
  location.assign(“https://www.baidu.com/“)；
  跳转打开页面。产生历史记录。
• （4）replace
  location.replace(“https://www.baidu.com/”);
  跳转打开页面。不产生历史记录。
• （5）hash
  获取到url中 # 后的字符串，如果没有，则返回空字符串。
• （6）search
  获取到url中 ？后的字符串，如果没有，则返回空字符串。
• （7）hostname
  返回 web 主机的域名。
• （8）pathname
  返回当前页面的路径和文件名。
• （9）port
  返回 web 主机的端口 （80 或 443）。
• （10）protocol
  返回所使用的 web 协议（http:// 或 https://）。

4.history对象

• （1）back
  向后退一页
• （2）forward
  向前进一页
• （3）go
  ①go（0） 刷新页面
  ②go（1） 前进一页
  ③go（-1）回退一页
  ④go（2）前进2页
• （4） history.pushState({a:1},"","?data="+n);
• （5）length
  属性返回历史列表中的网址数。

5.screen对象

• （1）availHeight
  屏幕的高度像素减去系统部件高度之后的值。
• （2）availWidth
  屏幕的宽度像素减去系统部件宽度后的值。

6.navigator对象

• （1）userAgent
  返回由客户机发送服务器的 user-agent 头部的值。
• （2）appName
  返回浏览器的名称。返回浏览器的名称。
• （3）appVersion
  返回浏览器的平台和版本信息。
• （4）platform
  返回运行浏览器的操作系统平台。

二 DOM

1.定义

• （1） DOM是Document Object Model的缩写，即文档对象模型。
• （2） DOM是W3C的标准。
• （3） DOM最根本对象是document（实际上是window.document）。

2.node 节点

• （1）节点包括：标签 注释 文本 文档
• （2）节点属性
  ①nodeName（节点名称）
  1°元素节点的 nodeName 是标签名称 （任何标签的nodeName都是该标签的大写字母）。
  2°文本节点的 nodeName 永远是 #text .
  3°注释节点的 nodeName 永远是 #comment。
  ②nodeValue（节点值）。
  ③nodeType（节点类型）。
• （3）获取Dom
  ①根据ID获取元素：document.getElementById()
  ②根据标签名获取标签列表：document.getElementsByTagName()
  1°获取后只能生成HTMLCollection
  2°只能通过documen获取
  ③根据class名获取标签列表：document.getElementsByClassName()
  1°只能获取HTMLCollection
  2°任何标签都可以获取其子项中class名的元素
  ④根据name名获取表单标签：document.getElementsByName()
  1°获取后只能生成Nodelist。
  2°只能通过document获取
  3°Nodelist通过forEach遍历。
  ⑤根据选择器获取选择器列表中第一个元素 document.querySelector( 所有CSS选择器)；
  ⑥根据选择器获取选择器列表中所有元素 document.querySelectorAll(选择器)
• （4）节点遍历
  ①childNodes：
  获取所有子节点列表（包括注释）
  ②children：
  所有是标签类型的子节点列表 获取所有子元素
  ③firstChild :
  第一个子节点
  ④firstElementChild :
  第一个子节点 （元素）
  ⑤lastChild：
  最后一个子节点
  ⑥lastElementChild：
  最后一个子节点（元素）
  ⑧nextSibling：
  下一个兄弟节点
  ⑨nextElementSibling：
  下一个兄弟节点（元素）
  ⑩previousSibling：
  上一个兄弟节点
  ⑩①parentNode：
  获取已知节点的父节点
  ⑩②parentElement:
  获取已知元素的父元素
• （5）创建节点
  ①document.createElement(“标签名”) :
  创建新元素（可以创建任何元素）
  div.style.width=“10px”; 给元素添加属性。
  ② document.createDocumentFragment() 碎片容器
  ③document.createTextNode("")
  创建文本节点
• （6）插入节点
  ①父元素.appendChild(子元素)；
  将子元素放入父元素内尾部。
  ②父元素.insertBrfore(要插入的子元素，插入在这个元素的前面)；
  将子元素插入到父元素中，其中插入到某个子元素前面。
• （7）替换节点
  replaceChild(newNode,oldNode) : newNode替换节点oldNode
• （8）删除节点
  删除时，元素只从页面中删除，不是在内存中国删除。
  如果在没有清除内存的情况下还可以加入回去。
  如果要删除的节点含有事件，需要在节点设置为null之前，将事件删除。
  ①removeChild(node) :
  移除父节点的某个子节点
  ②remove()：
  移除当前节点
• （9）复制节点
  cloneNode(boolean) : 复制一个节点
  ①boolean=true时，为深复制：复制该元素以及该元素内部全部节点。
  ②boolean=false时，为浅复制：仅复制该标签。
  ③复制标签时，会把标签内的属性同时复制过去。

3.DOM属性

DOM的对象属性，分为自定义属性和原DOM对象属性。
DOM的对象原属性与DOM对象标签的属性部分相同，部分有差别。

（1）设置标签属性和属性值

div.setAttribute("属性","属性名")；
DOM标签属性命名，必须全部小写，并且使用 - 区分每个单词。

（2）div.getAttribute(“属性”)；

	获取标签属性。

（3）div.removeAttribute(“属性”)；

	输出属性标签。

（4）Dom常用属性

    ①document.body：body元素
    ②document.title：获取、设置文档的标题
    ③document.URL：获得完整的URL

DOM样式

• （1）行内样式
  ①div0.style.fontSize=“5px”;
  对象写法，需要将所有的CSS中 - 字母 替换为大写字母
  如font-size 替换为 fontSize
  ②div0.style=“width:10px font-size:5px”
  style字符串方式写法，按照原CSS行内样式填写。

  ③getComputedStyle(div0).with
  	1°获取计算后样式   （不支持IE8及以下）。
  	2°IE中使用 div0.currentStyle.width
  	try{
  		style=getComputedStyle(div0);
  	}catch(error){
  		style=div0.currentStyle;
  	}
  

• （2）JS添加CSS

4.DOM对象常用属性

• （1）宽高
  ①clientWidth clientHeight
  客户宽高。计算后宽高=宽高+padding-（如果有滚动条，减去滚动条宽高）
  ②offsetWidth offsetHeight
  偏移宽高。 （计算后的宽高=宽高+padding+margin）
  ③scrollWidth scrollHeight
  滚动内容宽高
  1°如果没有超出等同于clientWidth。
  2°如果超出了就是实际内容所占的宽高，但是padding没有右侧和下侧
  ④body的宽高
  1°document.body.clientWidth , document.body.clientHeight
  实际body的宽度和高度-滚动条宽高
  2°document.body.offsetWidth , document.body.offsetHeight
  实际body的宽度和高度-滚动条宽高
  3°document.body.scrollWidth , document.body.scrollHeight
  实际body中内容的宽高
  ⑤html的宽高
  1°document.documentElement.clientWidth , document.documentElement.clientHeight
  当前文档的可视宽高-(如果有滚动条，减去滚动条宽高)
  2°document.documentElement.offsetWidth , document.documentElement.offsetHeight
  当前文档的内容宽高-(如果有滚动条，减去滚动条宽高)
  3°document.documentElement.scrollWidth , document.documentElement.scrollHeight
  当前文档的可视宽高
  如果有滚动条，就是实际body撑开的宽高
• （2）位置
  ①clientLeft clientTop
  边线的宽高
  ②offsetLeft offsetTop
  当前div到父容器左上角的距离（父容器是定位），
  它和position的left和top是相同的
  ③scrollLeft scrollTop
  滚动条位置设置
  ④html和body的clientLeft ,offsetLeft 不考虑
  ⑤页面中的滚动是html的scrollTop和scrollLeft控制
  早期的浏览器是body控制