JS高级程序设置笔记

Posted 2020-07-02

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