javascript--DOM概念

Posted 2020-10-17

?BOM概念

BOM : Browser Object Model 浏览器对象模型，描述与浏览器进行交互的方法和接 口，?ECMAscript是javascript的核心，但如果要在web中使用javascript，那么 BOM则无疑才是真正的核心。

BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

由于浏览器提供商会按照各自的想法随意去扩展它，使得BOM缺乏一定的规范，于是 浏览器之间共有的对象成为了事实上的标准。

?window对象介绍

BOM 的核心对象是?window ，它表示浏览器的一个实例。在浏览器中，?window对象有双 重角色，它既是通过?JavaScript 访问浏览器窗口的一个接口，又是ECMAScript 规定的? ?全局（global）对象。这意味着在网页中定义的任何一个对象、变量和函数，都以?window 作 为其Global 对象，因此有权访问parseInt()等方法。

?与document的关系（扩展）

当浏览器下载到一个网页，通常是?html，这个HTML就叫?document（当然，这也是DOM ? 树中的一个?node），document通常是整个DOM 树的根节点。这个?document 包含了标 题（document.title）、URL（document.URL）、(document.body)等属性，可以直接在?JS 中 访问到。

DOM 是为了操作文档出现的?API，document 是其的一个对象；

BOM 是为了操作浏览器出现的?API，window 是其的一个对象。

?window内置对象(location/history/navigator)及方法

location对象

n?href属性??控制浏览器地址栏的内容

n?reload()方法???刷新页面

?/*setInterval(function(){

? ?location.reload();//每隔两秒自动刷新页面。

n? },2000);*?/

n?reload(true) ??刷新页面，不使用缓存?( 类似于重新打开?)

history对象

history对象是window对象的属性

浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history对象记录了用户曾经浏览过的页面，并可以实现浏览器前进与后退相似的导航功能

可以通过back函数后退一个页面，forward函数前进一个页面，或者使用go函数任意后退或前进页面，还可以通过length属性查看history对象中存储的页面数

由于安全的原因，不能显示history对象中的历史页面URL

如果一个窗体没有被用户浏览过任何页面(也就是一个新建的窗体)，其history对象缓存的URL为空，无法使用相关函数导航

JavaScript history.go() 函数?-- 前进或后退指定的页面数

JavaScript history.back() 函数?-- 后退一页

JavaScript history.forward() 函数?-- 前进一页

JavaScript history.length 属性?-- history对象中缓存了多少个URL

?

navigator对象--了解

n?appName??浏览器名称

n?appVersion??浏览器版本

n?platform操作系统

最新的浏览器已经全面放弃以上这些属性

n?userAgent??用户代理信息，通过该属性可以获取浏览器及操作系统信息

?onload事件：页面内容加载完成（DOM结构，图片.....）

?/location.href=‘http://www.baidu.com‘;//设置跳转的地址

? ? ?location.href=‘02 success.html‘;

?onscroll事件：拖动浏览器的滚动条触发此事件。

?onresize事件：浏览器窗口缩放所触发的事件。

?open() 和?close() 方法--打开一个页面/关闭一个页面

?alert() prompt() confirm()浏览器事件

?定时器

n?setInterval(函数名称，时间)；间隔定时器(反复调用)

clearInterval( 定时器的返回值?); ?停止定时器

n?setTimeout(函数名称，时间); 延时定时器

clearTimeout( 定时器的返回值?); 停止定时器

?DOM的概念及作用

DOM是”Document Object Model”的首字母缩写，即文档对象模型。用来描绘一 个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。浏览器支持情况：不友好，有兼容问题?

?DOM的基本操作(查询、修改、创建、删除)

?//aInput[0].value文本框的内容

? ? var cLi=document.createElement(‘li‘);

? ? var cText=document.createTextNode(aInput[0].value);//将文本框内容，创建出来，赋值给cLi

? ? cLi.appendChild(cText);

? ? oUl.appendChild(cLi);

? ? aInput[0].value=‘‘;//清空

? ? aInput[0].focus();//文本框得到焦点

n?getElementById() 获取特定?ID 元素的节点

n?getElementsByTagName() 获取相同元素的节点列表，返回类数组，使用[0]来获取

n?getElementsByClassName() 获取相同类名的节点列表（IE8及以下不支持）

n?getElementsByName() 获取相同类名的节点列表，不是所有标签都有name属性。

n?createElement() 创建一个元素节点

n?createTextNode() ?创建一个文本节点

n?obj.appendChild(node) ?把node节点插入到box的内部最后的位置

n?box.insertBefore(newNode, existNode) ?把newNode节点插入到exsitNode的前面

n?box.removeChild(node) ?删除阶段

n?obj.cloneNode(）?复制节点,复制obj元素标签，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起复制。如果为空（false）复制obj节点。

n?obj.replaceChild(新添加的节点（替换）,被替换的节点);

?DOM元素类型(元素和文本)

n?节点可以分为元素节点、属性节点和文本节点...，而这些节点又有三个非常有用的属性?，分别为：nodeName、nodeType 和?nodeValue（文本）

n?//var cloneUl=oUl.cloneNode();//克隆ul节点，追加

n? ? //var cloneUl=oUl.cloneNode(true);//参数true,克隆ul节点以及ul子节点，追加

n? ? //document.body.appendChild(cloneUl);

n?

n? ? //obj.replaceChild(新添加的节点,被替换的节点);

n? ? //var oDiv=document.createElement(‘div‘);//创建div节点

n? ? //document.body.replaceChild(oDiv,oUl);//用创建的节点替换ul节点 ???????????????replace替换字符串??string.replace("tmd", "*");

n???????????????????/*var str=‘tmdtmdtmdtmdtmdtmd‘;

n? ??????alert(str.replace(‘tmd‘,‘*‘));*/

n?

n? ?/*var str=‘tmdtmdtmdtmdtmdtmd‘;

n? ?alert(str.replace(/tmd/g,‘*‘));//正则*/

n

n? ? //DOM元素类型(元素，属性，文本)

n? ? //nodeName、nodeType 和?nodeValue

n? ? //alert(oUl.nodeType);//1 : 代表是元素节点。

n?nodeType：元素(1) ????属性(2) ????文本(3)

n?//alert(document.body);//获取body元素

n? ? //document.title=‘我是标题‘;

n? ? //alert(document.documentElement);//获取html标签

n? ?

n? ? /*alert(document.documentElement.clientWidth);//可视区的宽度

n? ? alert(document.documentElement.clientHeight);//可视区的高度*/

n?

n? ? //四个属性：offsetLeft/offsetTop/offsetWidth/offsetHeight ?没有单位

n? ? //alert(oBox.offsetWidth);获取盒子对应的宽度(盒模型：width+border+padding)

n? ? var scrolltop=document.documentElement.scrollTop || document.body.scrollTop;

获取非行内样式（兼容问题）