JS高级程序设置笔记（三）

8：BOM（浏览器对象模型）
BOM的核心是window，它是一个浏览器的实例
在浏览器中，window具有双重角色，它既是用过JS访问浏览器的一个接口，又是EMCA规定的Global对象。
 定义全局变量和定义在window上的属性还是有区别的；
全局变量是不能直接使用delete删除（通过var创建的属性有个一个ConfigureAble特性，他的默认值是false所以不能直接删除）
定义在window对象上的属性是可以直接用delete删除的。
var num=10;//定义的全局变量的属性
window.num2=12;//在window下创建的属性
delete num;
delete window.num2;
console.log(num);
console.log(window.num2);
结果：
 
8.1.2窗口关系及框架：
  如果页面中包含框架，则每个框架都会保存在frames集合中，可以通过索引值来访问相应的框架Frame（框架）
  可以通过页面结构来访问相印的框架
8.1.3窗口位置
确定window的位置属性值得方法是：screenLeft 和screentop 分别指上方的左侧。firefox也支持screenX和screenY属性来提供window对象的位置属性。
使用moveTo（）和moveBy（）方法可以将窗口移动到一个新的位置都接受两个值：
moveTo（）接受的两个值是x和y坐标的值而moveBy（）接收的是水平方向和垂直方向上移动的像素值。
window.moveTo(200,300);
window.moveBy(100,200);
8.1.4 窗口大小：
确定一个窗口的大小：提供了四个属性：innerWidth innerHeight outWidth outHeight.在IE9+ safair 和firefox中，outerWidth和outerHeigth返回浏览器窗口本身的尺寸 
var height = document.documentElement.clientHeight;
document.write(height);
var width = document.documentElement.clientWidth
document.write(" "+width);
获取页面视口的大小
在IE6中，标准模式对着些方法来说才能使用，在混杂模式下只能通过
document.body.clientHeight;
document.body.clientLeft;
来获取
对于移动设备，window.innerWidth 和 document.innerHeight 保存着可视视口
 
通过resizeTo()和resizeBy()方法可以调整浏览器的大小。都接受两个参数
resizeTo()接受浏览器的新宽度和新高度，
resizeBy()接受新窗口和旧窗口的宽度只差和高度只差。
 
8.1.5导航和打开窗口
window.open();方法可以导航到一个新的窗口
可以接收四个参数：要加载的URL 窗口目标 一个特性字符串以及一个表示新页面是否取代旧页面的boolean值
通常只传递一个参数
第二个参数：窗口目标，如果没有窗口目标就可以使用下列的任意一个数：_self _paretn _top _blank。
第三个参数
 
 

 
弹出窗口屏蔽程序：
var blocked=false;
try{
var wroxWin=window.open("http://www.wrox.com","_blank");
    } catch (ex){
blocked=true;
    }
if(blocked){
alert("The popup was blocked!");
    }
8.1.6间歇调用和超时调用
超时调用：

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);
建议调用方式


setTimeout(function(){
alert("Hello World");
},3000);






setTimeout()和clearTimeout()一起使用，停止计时器。


语法:




clearTimeout(id_of_setTimeout)






var timer=setTimeout(function(){
alert("Hello World");
},3000);
clearTimeout(timer);

间歇调用：


setInterval(function(){
alert("Hello World");
},1000);

故名思议就是过一段时间就调用一次


 


系统对话框：


浏览器有三种形式的对话框


alert（），confirm（），prompt（），


第一种：

alert("are you sure");


在浏览器中的现实效果






 


第二种：


confirm（）：它返回的是一个boolean值类型，点击确认按钮返回true 点击取消就返回false






if(confirm("are you sure!")){
alert("you click sure");
}else{
alert("you click False");
}




第三种：prompt（）方法，


里面包含得了两个参数


prompt（str1,str2）;


str1的值是不能修改的，str2的值是用来提示用户的，可以修改，当你点击确定，返回值是str2的值。如果点击取消返回一个null值。


8.2location对象：提供了当前页面中加载的文档有关信息，还提供了一些导航的功能。








location用于获取或设置窗体的URL，并且可以用于解析URL。


语法:


location.[属性|方法]













location 对象方法




 


解析当前的URL




    var url=document.location.href;


    document.write(url); 








8.2.2位置操作：


使用location对象可以通过很多方式来改变浏览器的位置，最常用的就是：assign（）方法并为其传递一个URL


assign（）和window.location();达到的效果一样；


我们可以通过调用location.replace（）方法来禁用返回前一页面的功能。


location。reload（true）；//重新加载（从服务器重新加载）


location.replace（）；//重新加载（有可能从服务器中加载）


 


8.3navigator对象


Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。











判断当前所用的浏览器型号信息






  function validB(){ 


    var u_agent =navigator.userAgent; 


    var B_name="不是想用的主流浏览器!"; 


    if(u_agent.indexOf("Firefox")>-1){ 


        B_name="Firefox"; 


    }else if(u_agent.indexOf("Chrome")>-1){ 


        B_name="Chrome"; 


    }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 


        B_name="IE(8-10)";  


    }


        document.write("浏览器:"+B_name+"<br>");


        document.write("u_agent:"+u_agent+"<br>"); 


  } 

8.3.1检测插件：


对于非IE浏览器，可以使用plugins数组来达到这个目的。




function hasPlugin(name){
    name=name.toLowerCase();//转换小写
for(var i=0;i<navigator.plugins.length;i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
return true;
        }
    }
return false;
}

这个hasplugin（）接受一个参数：要检测的插件名。




//检测IE中的插件
function hasIEPlugin(name){
try{
new ActiveXObject(name);
return true;
    }catch(ex){
return false;
    }
}






8.4 screen对象：




screen对象




screen对象用于获取用户的屏幕信息。


语法：


window.screen.属性

8.5 history对象


保存着用户的上网历史记录。


//前进一页


history.go(1)

//后退一页


history.go(-1)


//前进两页


history.go(2)


back()和forward（）方法用来前进和后退


history.back（）；


history.forwward（）；


 


 


第十章：DOM


DOM（文档对象模型）






文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。





将HTML代码分解为DOM节点层次图:

1：nodeName和nodeValue


要了解节点的具体类型，可以使用者两个属性，分别返回的值是，节点的名称和节点的值。


nodeType：节点属性


元素：1


属性：2


文本：3


注释：8


文档：9


2：节点关系：


每个节点都有一个childNodes属性，其中保存着一个NodeList对象。它是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList对象也有length属性，但是他不是Array的实例。


下面的例子展示了如何访问保存在nodeList中的节点——可以通过方括号，可以使用item（）方法。




遍历节点树:






var firstChile=someNode.childNodes()[0];


var secondChild=someNode.childNodes.item(1);


var count=someNode.childNodes.length;


 


3操作节点：


appendChild（），在childNode列表的末尾添加一个节点。


insertBefore（）接受两个参数，要插入的节点和需要参照的节点。


replaceChild（）接受两个参数，要插入的值和要取代的值。


如果只想删除某个节点的话就可以使用


removechild（）；


这几个方法操作的都是子节点，所以必须先得到父节点（parentNode）。


4：其他方法：


cloneNode（），用于创建调用这个方法的节点的一个完全相同的副本。cloneNode接收一个boolean值类型的参数值


参数是true：执行深复制，复制整个节点和子节点树；


参数是false：执行浅节点，复制完的节点属于文档所有，单并没有给他指定父节点。除非使用上述添加节点的方法将它添加到父节点中。


normalize（）处理文档树中的文本节点；


10.1.2 Document类型


document对象是HTMLDocument的一个实例，表示整个HTML页面。而且document是window对象中的一个属性，因此可以将其作为全局对象来访问。Document节点具有以下特征：


nodetype：9


nodeName："#document";


nodeValue：null


parentNode：null


ownerDocument：null


其子节点可能是一个DocumentType、Element、processingInstruction或Comment；


1:文档的子节点：


访问其子节点的快捷方式：documentElement属性该属性始终指向HTML页面中的<html>元素。


另一个就是通过childNodes列表访问文档元素。但是通过前者更加快捷




var html = document.documentElement;//取得对<html>的引用




作为HTML的实例对象还有一个body属性，直接指向<body>元素




var body=document.body;//取得对<body>的应用




2：文档信息：


设置文档的标题：




document.title="demo";

获取文档的标题    




var title=document.title;
console.log(title);

三个关于网页请求的属性：


//取得完整的URL


var url =document.URL


//取得域名


var domain=document.domain;


//取得来源页面的URL


var referrer=document.referrer;


在这三个属性中，只有domain是可以设置的。


 


3：查找元素：


取得元素的操作可以使用document对象的几个方法来完成。其中，Document类型提供了两个方法：


getElementById()和getElementByTagName();


getElementById():通过ID名来获取相应的元素；


getElementByTagName()接受一个参数，就是你要获取的元素的名称


还有一个方法叫做，nameItem（）；可以通过元素的name特性取得集合中的项。


想要获取全部元素可以向getElementByTagName()中添加一个*，


 


第三个方法用样也是对文档类型对象


getElementByName()；通过name属性来获取元素；


 


4：特殊集合


除了属性和方法，document对象还有一些特殊的集合。这些集合都是HTMLCollection对象，为访问文档常用的部分提供了快捷方式，包括：


document.anchors:包含文档中所有包含name特性的<a>标签


document.applets:不再使用了，获得所有appletes元素标签


document.forms:获取所有<form>元素


document.images:包含所有文档中的<img>元素


document.links:获取文档中所有带href特性的a标签。


 


5：DOM一致性


由于DOM分为多个级别，也包含了多个部分，所以就需要来检测


利用document.implementation属性的hasFeature（）方法来进行检测


这个方法接收两个参数，一个是DOM功能的名称和版本号，如果支持就返回true 不支持就返回false




 


 


6：文档写入：


重要功能就是将输出流写入到页面中的能力。这个能力体现在以下的四个方法中


write（）和writeln（）：


都接受一个参数，即要写入到页面中的值，write（）会原样写入，writeln（）方法则会在字符串最后加一个换行符


例子：




document.write("<strong>"+new Date().toString()+"</strong>")

open（）和close（）分别用于打开和关闭网页的输出流。如果是在页面加载期间使用write（）或者writeln（）方法则不需要使用这两种方法：


 


10.1.3Element类型：Element节点具有以下特征




nodetype：1


nodeName：的值为元素的标签名;


nodeValue：null


parentNode：可能是document或者Element

其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或者EntntyReference。


要访问元素的标签名可以使用nodeName或者tagName属性




var element=document.getElementById("myiD");
console.log(element.tagName);
console.log(element.tagName.toLowerCase()=="div");

1：HTML元素：


id：元素在文档中的唯一标识符


title：有关元素的附加说明，一般通过工具提示条显示出来


lang：元素内容的语言代码，很少使用


dir：语言方向很少使用


className：通过元素的class特性来对应


上述这些属性都可以用来取得或修改相应的特性值。




<div id="myiD" title="123" lang="en" dri="ltr" class="myid">IS a div element</div>

可以先通过document.getElementById("myiD");方法或者其他方法来得到元素，在使用.属性。来获取或者修改元素的特性值


 


2：取得特性（属性）：


通过getAttribute（）；来获取元素内部的属性；


如：

var element=document.getElementById("myiD");
var name=element.getAttribute("title");
console.log(name);




3：设置特性：


通过获得元素，然后通过getAttribute()方法来获取内部的属性值、


有获得当然就有修改和删除：


修改：setAttribute();获取两个string类型的参数，一个是你要修改的属性值，一个是替换的值


删除：removeAttribute();彻底删除这个属性。


 


4：attributes属性


attribute属性是一个DOM节点类型属性。attribute属性中包含一个NameNodeMap，与Nodelist类似，也是是一个动态集合，元素的每一个特性都由一个attr节点表示，


NameNodeMap对象拥有下列方法。


getNamedItem(name):返回nodeName属性等于name的节点


removeNameItem(name)：从列表中移除nodeName属性。


setNameItem(node)：向列表中添加节点


Item(pos);返回数字pos位置处的节点；


attribute具有一系列的节点，nodeName就是元素内属性（特性）的name nodeValue就是该属性（特性）的值；


想获得id元素的特性


 


 


5：创建元素：


通过 document.creatElement("element");


接收一个参数，要创建的标签名


 


6：元素的子节点：


childNodes属性包含了所有子节点的信息




var getElement=document.getElementById("menu");
for(var i= 0,len=getElement.childNodes.length;i<len;i++){
if(getElement.childNodes[i]==1){
//执行操作
}
}

10.1.4 Text类型：


对纯文本的操作，就是元素标签之间的值；




var one=document.getElementById("newOne");
one.innerHTML="thi";

向空标签之间添加内容；


可以通过nodeValue属性或者data属性访问text节点中包含的文本，下列方法可以操作节点中的文本。


appendDate（text）：将text添加到节点的末尾；


deleteDate（offset，count）：从offset指定的位置开始删除count个字符；


insertData（offset，text）：在offset的位置添加text


replaceData（offset，count，text）替换


splitText（offset）分割


substringData（offset，count）：提取




var one=document.getElementById("newOne");
var text =document.createTextNode("hello word")
one.appendChild(text);

2规范化文本节点：


normalize（）


3：分割文本节点：


splitText（offset）分割 从offset的位置开始分割；


 10.1.5 comment类型


获取注释的值；


10.1.6 CDATASection类型


只针对XML文档，表示CDATASction区域


10.1.7 DocumentType类型


主要包含着doctype的相关信息


10.1.8 DocumentFragment类型：


一种轻量级文档，可以包含控制节点，但不会想完整的文档那样去占用内存。


10.1.9 attr类型：


attr就是attribute（）的子节点：操作属性最常用到的就是getAttribute（），setAttribute（），和removeAttribute（），操作属性的。


attr有三个属性：name,value和specified


 


 


 


 


 


 


 


 


 


 


 



        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/gavinzzh-firstday/p/5342930.html