BOMAPI和DOMAPI

bom api：
用于操作浏览器的API

BOM是browser object model的缩写，简称浏览器对象模型
它提供了独立于内容而与浏览器窗口进行交互的对象，
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，
DOM的标准化组织是W3C。
window.history
操纵浏览器记录

history.back(); // 等同于点击浏览器的回退按钮
history.go(-1); //等同于history.back();
window.innerHeight/innerWidth
浏览器窗口的视口（viewport）高宽

*window.location
操作刷新按钮和地址栏

location.host
设置或取得当前 URL 的主机名称和端口

*IE和Opera及苹果不支持

location.pathname
设置或取得当前 URL 的路径部分

location.search
查询或设置当前URL的?号开始的字符串

location.href
返回整个URL

location.hash
返回或设置#号开始的部分

location.origin
返回当前域名

*此属性为只读，且IE8不支持

window.navigator
返回当前浏览器的信息

navigator.userAgent
获得HTTP请求的用户带头的值

window.screen
返回有关屏幕大小宽高以及颜色深度等信息

dog	bird
screen.availWidth	可用的屏幕宽度
screen.availHeight	可用的屏幕宽度
screen.width	当前屏幕宽度 (分辨率)
screen.height	当前屏幕高度 (分辨率值)
screen.colorDepth	当前屏幕色彩深度(bit)

window.self
即window
尽量少使用全局变量!!

window.top
返回最顶层页面

window.open()
于打开一个新的浏览器窗口或查找一个已命名的窗口

再次注意：
BOM，即JavaScript可以进行操作的浏览器的各个功能部件的接口。

domapi：

文档对象模型 (DOM) 是HTML和XML文档的编程接口。
它提供了对文档的结构化的表述，
并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。
操作：

document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；

节点创建API
createElement创建元素：
var elem = document.createElement("div");
elem.id = 'haorooms';
elem.style = 'color: red';
elem.innerHTML = '我是新创建的haorooms测试节点';
document.body.appendChild(elem);
通过 createElement 创建的元素并不属于 document 对象，它只是创建出来，并未添加到html文档中，要调用 appendChild 或 insertBefore 等方法将其添加到HTML文档中。createTextNode创建文本节点：
var node = document.createTextNode("我是文本节点");
document.body.appendChild(node);
cloneNode 克隆一个节点：
node.cloneNode(true/false) ，它接收一个bool参数，用来表示是否复制子元素。var from = document.getElementById("test");
var clone = from.cloneNode(true);
clone.id = "test2";
document.body.appendChild(clone);
克隆节点并不会克隆事件，除非事件是用这种方式绑定的，用 addEventListener 和 node.onclick=xxx; 方式绑定的都不会复制。
createDocumentFragment
本方法用来创建一个 DocumentFragment ，也就是文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，大量操作DOM时用它可以大大提升性能。

节点修改API
1、appendChild语法：parent.appendChild(child);
2、insertBeforeparentNode.insertBefore(newNode, refNode);
3、insertAdjacentHTML//js谷歌浏览器，火狐浏览器，IE8+
el.insertAdjacentHTML('beforebegin', htmlString);
关于insertAdjacentHTML，这个API比较好用，具体可以看：https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML<!-- beforebegin -->
<p><!-- afterbegin -->foo<!-- beforeend -->
</p>
<!-- afterend -->
4、Element.insertAdjacentElement()用法和上面类似，targetElement.insertAdjacentElement(position, element);
5、removeChildremoveChild用于删除指定的子节点并返回子节点，语法：var deletedChild = parent.removeChild(node);
deletedChild指向被删除节点的引用，它仍然存在于内存中，可以对其进行下一步操作。另外，如果被删除的节点不是其子节点，则将会报错。一般删除节点都是这么删的：function removeNode(node)
{  if(!node) return;  if(node.parentNode) node.parentNode.removeChild(node);
}
6、replaceChildreplaceChild用于将一个节点替换另一个节点，语法：parent.replaceChild(newChild, oldChild);

节点关系API
1、父关系APIparentNode ：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment；parentElement ：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；2、子关系APIchildren ：返回一个实时的 HTMLCollection ，子节点都是Element，IE9以下浏览器不支持；childNodes ：返回一个实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；firstChild ：返回第一个子节点，不存在返回null，与之相对应的还有一个 firstElementChild ；lastChild ：返回最后一个子节点，不存在返回null，与之相对应的还有一个 lastElementChild ；3、兄弟关系型APIpreviousSibling ：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。nextSibling ：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。previousElementSibling ：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。nextElementSibling ：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持

元素属性型API
1、setAttribute 给元素设置属性：element.setAttribute(name, value);
其中name是特性名，value是特性值。如果元素不包含该特性，则会创建该特性并赋值。2、getAttributegetAttribute返回指定的特性名相应的特性值，如果不存在，则返回null：var value = element.getAttribute("id");
3、hasAttributevar result = element.hasAttribute(name);var foo = document.getElementById("foo");
if (foo.hasAttribute("bar")) { // do something
}
4、dataset获取html data-开头的属性，用法如下：<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>let el = document.querySelector('#user');// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true

BOMAPI和DOMAPI相关推荐

解密虚拟 DOM——snabbdom 核心源码解读
本文源码地址:https://github.com/zhongdeming428/snabbdom 对很多人而言,虚拟 DOM 都是一个很高大上而且远不可及的专有名词,以前我也这么认为,后来在学习 V ...
解析XML方式-DOM，SAX
students.xml <?xml version="1.0" encoding="UTF-8"?> <students><st ...
jquery获取浏览器版本号_前端为什么弃用jQuery？有这六个原因
点击右上方红色按钮关注"小郑搞码事",每天都能学到知识,搞懂一个问题! 前端为什么都不再使用jQuery?这个问题其实也非常好理解,首先,你得知道jQuery给我们解决了什么问题. ...
jquery parsley ajax,用户体验超棒且功能强大使用简单的javascript表单验证 - Parsley.js...
大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧,使用这个插件你不需要写任何一行js代码就可以生成一个功能强大的表单验证功能.是不是超棒? 今天介绍的 ...
Vue2的核心原理剖析
✨ 用了这么久的Vue2了你真的知其然,知其所以然么? ✨今天博主就为大家带来一篇对Vue核心功能的部分剖析\textcolor{pink}{今天博主就为大家带来一篇对Vue核心功能的部分剖析}今天 ...
使用GlassFish 4.0测试驱动Java API以处理JSON
编写规范并为其做出贡献是一回事. 如果您想提供宝贵的反馈意见,请使用它并研究真实的示例. 最新推广的GlassFish构建包含重命名为4.0,我认为现在是对Java处理JSON(JSON-P)API进 ...
Angular使用总结 --- 如何正确的操作DOM
无奈接手了一个旧项目,上一个老哥在Angular项目中大量使用了JQuery来操作DOM,真的是太不讲究了.那么如何优雅的使用Angular的方式来操作DOM呢? 获取元素 1.ElementRef ...
大学生及转行学IT编程，必须做到这4点，做不到！建议放弃编程方向
大学生及转行学IT编程,必须做到这4点,做不到!建议放弃编程方向,否则,未来前途会非常迷茫,事业发展会更加尴尬! IT界:选择与努力,同样重要!方向错了,只能与目标背道而驰! 本文所有的数据为2018 ...
【React 基础】之 React 基本介绍、jsx 规则、模块与组件
React 全家桶 React 基础 React-Router 路由 PubSub + 消息管理库 Redux 集中式的状态管理 Ant-Design UI 组件库 - React 简介官网英文官 ...
【Vue.js源码解析二】-- 虚拟 DOM
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读虚拟 DOM 基本介绍什么是虚拟 DOM 虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象 ...

BOMAPI和DOMAPI

BOMAPI和DOMAPI相关推荐

最新文章

热门文章