JavaScript知识点整理3-DOM、BOM

 

       firstChild:(获取父元素的首只节点)、

      cloneNode:(创立指定节点的副本)

     

 

 

         
registerContentHandler(要处理的MIME类型,可以拍卖该MIME类型的页面的URL,应用程序的称呼)

var URL=document.URL;//取得完整的URL 
var domain=document.domain;//取得域名 
var referrer=document.referrer;//取得来源页面的URL

(1)  动态脚本

       
DOM1级定义了一个Node接口,该接口将出于DOM中之具备节点类型实现。这一个Node节点在JavaScript中凡是因而Node类型实现之。JavaScript中有所节点类型且累自Node类型,即享节点类型且共享着一样之骨干性能和艺术。

var num=0; 
var max=10; 
var intervalId=null; 
function incrementNumber(){ 
    num++; 
    if(num==max){ 
        clearInterval(intervalId); 
        alert("done"); 
    } 
} 
intervalId=setInterval(incrementNumber,500);

       
IE、firefox、Safari、chrome:document.documentElement.clientWidth与document.documentElement.clientHeight中保存了页面视口的消息。IE6中这几个性在正儿八经形式下才有效;混杂形式则要经document.body.clientWidth与document.body.clientHeight,取得一致音信。混杂情势下之chrome,两种方法还好取视口大小。

       属性:nodeValue.length、data.length

    
DOM对象:针对HTML和XML文档的一个API,DOM描绘了一个层次化的节点树,允许开发人士添加、移除和改动页面的之一平组成部分。

2  DOM操作技巧:

    normalize():处理文档中之公文节点。

 

Ps:尝试看未声明的变量会摒弃来荒唐,但经询问window对象,可领略有可能未讲明的变量是否是。         

       lastChild:(获取父元素的尾声一个子节点)、

    [3] 查找元素

参考资料:

     
  location,提供以及当前窗口加载的文档有关的信息,还提供了部分导航效率。其既是window对象属性,也是document对象属性。即window.location和document.location引用的是同一个目的。location对象的用途不止表现于保留着时文档的音,还展现在它以URL解析为独立的有的,开发人士可通过不同的特性访问这个有。

      location.search:再次回到URL的询问字符串,该字符串以?开首

        document.getElementsByTagName() :(通过元素标签获取节点)

      
文档节点是每个文档的根节点。文档节点才生一个子节点,如<html>元素,称为文档元素。文档元素是文档的最为外层元素,文档中之任何因素还包含在文档元素被。每个文档只好有一个文档元素。

//法1:外部文件 
<link rel="stylesheet" type="text/css" href="style.css"> 

var link=document.createElement("link"); 
link.rel="stylesheet"; 
link.type="text/css"; 
link.href="style.css"; 
var head=document.getElementsByTagName("head")[0]; 
head.appendChild(link); 

//封装 
function loadStyle(url){ 
    var link=document.createElement("link"); 
    link.rel="stylesheet"; 
    link.type="text/css"; 
    link.href="style.css"; 
    var head=document.getElementsByTagName("head")[0]; 
    head.appendChild(link); 
} 
loadStyle("style.css"); 

//法2:嵌入式css 
<style type="text/css"> 
     body { 
         background-color: red; 
    } 
</style> 

var style=document.createElement("style"); 
style.type="text/css"; 
try{ 
    style.appendChild(document.createTextNode("body{ background-color:red}")); 
}catch(ex){ 
    style.styleSheet.cssText="body{background-color:red;}"; 
} 
var head=document.getElementsByTagName("head")[0]; 
head.appendChild(style); 

//封装 
function loadStyleString(css){ 
    var style=document.createElement("style"); 
    style.type="text/css"; 
    try{ 
        style.appendChild(document.createTextNode("body{ background-color:red}")); 
    }catch(ex){ 
        style.styleSheet.cssText="body{background-color:red;}"; 
    } 
    var head=document.getElementsByTagName("head")[0]; 
    head.appendChild(style) 
    loadStyleString("body{background-color:red;}"); 
} 
loadStyleString("body{background-color:red;}")

      替换节点:

       调用set提姆eout后,会回去一个数值ID,表示过调用。该id是计划执行代码的绝无仅有标识符,可以因而她实现撤消超时调用。要吊销尚未施行的逾期调用计划,可以调用clear提姆(Tim)eout()方法以相应的晚点调用ID作为参数传递给她。

      location.hostname:再次来到不带捧口号的服务器名称

       
能够通过nodeValue或data属性访问Text节点包含的文书。操作节点粤语本之法子:appendData(text)、deleteData(offset,count)、insertData(offset,text)、      
replaceData(offset,count,text)、splitText(offset)、substringData(offset,count)

location.assign("http://www.baidu.com"); 
window.location="http://www.baidu.com"; 
location.href="http://www.baidu.com"; 
//修改location对象的其他属性也可以改变当前加载的页面 
location.hash="#section1";  //修改后为:http://www.baidu.com/#section1 
location.search="?q=javascript";
//修改后:http://www.baidu.com/q=javascript




location.hostname="www.yahoo.com";//修改后为:http://www. yahoo.com/ 
location.pathname="mydir";//修改后为:http://www. yahoo.com/ mydir/ 
location.port=8080;// 修改后为:http://www. yahoo.com:8080/
history.go(-1); //后退一页 
history.go(1);//前进一页

   [2] 位置操作

 

(8)       Attr类型

   [7] 系统对话框

    [2]规范化文本节点

 

       分割文本节点是由文本节点受到取数据的同一栽常用DOM解析技术。

           检测浏览器被是不是安装了特定的插件

       
getElementsByTagName()、getElementsByClassName()重返的是HTMLCollection对象,可以通过方括号要item()方法来走访HTMLCollection对象的要素。通过方括号可以流传数值或字符串格局的目,当传入的是数值型索引时会调用item()方法,而针对字符串型索引则会调用namedItem()方法。

九  BOM对象(浏览器对象)

      插入节点:

          
用于表现XML或HTML元素,提供了针对性素签名、子节点及特色的访。nodeType值为1。访问元素的标签名,可以择nodeName或tagName属性。

 

      [1] 检测插件

        
用来阐明客户端的能力,其中包括浏览器窗口外部的呈现器的信,如像素宽度,也可用来调整浏览器窗口大小

     
location.href:重临时加载页面的完好URL。(同location对象toString方法)

 
       使用location对象能够由此重重办法来改浏览器的职位,最常用之是采用assign()方法并为其传递一个URL。

       创制动态脚本方法:法1即插外部文件,法2即直接插入JavaScript代码

 

      setInterval(),遵照指定的时间距离重复执行代码,直至间歇调用被废除或页面被卸载。参数和再次回到值与set提姆eout类似。

     
ps:只要以指定的莫过于并未过去在此以前调用clear提姆eout()都可以完全撤除超时调用。

《JavaScript高级程序设计》、《JavaScript权威指南》

 

        forward():模仿浏览器前进按钮

   4  文本操作

(2)  Document类型

      previousSibling:(获取已清楚节点的先头一个节点)、

 

       
document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()、document.getElementsByName()、document.anchors()、document.forms()、document.images()、document.links()、

 3  navigator对象

         normalize(),若有些许个或多单公文节点的父元素调用normalize()方法,则会用有着文件节点合并成为一个节点,结果节点的nodeValue值等于合并前每个文本节点的nodeValue值拼接起来的价值。

   
appendChild(要加上的节点):用于为chiildNodes列表末尾插入一个节点,重返新栽的节点。

     节点指针:

     [1] 节点属性:nodeName、nodeValue

 

     [2]
节点关系:父子关系(childNodes、parentNode)、兄弟关系(previousSibling、nextSibling)

      childNodes:(获取元素的子节点列表)、

 

 

   
ownerDocument,所有节点的末段一个性质,表示此外节点都属于其所当的文档,任何节点都无可以而有叫简单个或另行多文档中。

 

   

 

   [1] 查询字符串参数

        back():模仿浏览器后低落按钮

      removeChild:(删除指定的节点)

     hasChildNodes():判断节点是否含有子节点

 

(4)  Text类型

        splitText(),将一个文书节点分成俩这个过文本节点,即依据指定地点分割nodeValue值。原来的文书节点将含有从上马至指定地方在此以前的始末,新文本节点将涵盖剩下的文件。再次来到一个新的文件节点。

      
每一样截标记都好通过塑造被之一个节点来表示,HTML元素通过元素节点表示,特性通过特色节点表示,文档类型通过文档类型节点表示,注释通过注释节点表示。。。。

(1)  Node类型

八  JS DOM 基本操作

      insertBefore:(在已经了解的子节点前插入一个初的子节点)    

    [3]细分文本节点

 

(2)  动态样式

 

      
window.open(要加载的URL,窗口目的,一个特性字符串,一个表示初页面是否代表浏览器历史记录中即加载页面的布尔值)可以导航及一个一定的URL,也可打开一个新的浏览器窗口。通常只是待传递第一只参数,最终一个参数就以匪打开新窗口的情下使用。二参可以为_self、_parent、_top、_blank

      replaceChild:(将有子节点替换为外一个)

        document.getElementById() :(通过元素id获取节点)

        
Chrome:outerWidth、outerHeight、innerWidth、innerHeight再次来到相同之价值,即视口大小要不浏览器窗口大小。

 

  

       用来规定和改window对象地方的习性与办法来好多:

        
Opera:outerWidth、outerHeight表示页面视图容器的轻重,而innerWidth、innerHeight则代表该容器中页面视图区的高低。

         
所有HTML元素都出于HTMLElement类型表示,不是平昔通过者类型,也是透过她的子类型来表示。HTML元素中的表征:id、title、className、dir、lang

   1  window对象

      
alert():接收一个字符串并拿其形为用户,其行结果包含一个点名的文件和一个OK按钮。

      location.pathname:重返URL中的目及文书称

    [3] 操作节点

      nextSibling:(获取已清楚节点的继一个节点)、

      createElement:(成立元素节点)

      
documentElement属性,始终对HTML页面被之<html>元素;childNodes列表访问文档元素。

 

      createTextNode:(创建文本节点)

     [3] attributes属性

(7)       DocumentFragment类型

     设置属性:setAttribute

       
(Firefox、Safari、Chrome):screenX、screenY代表窗口相对于屏幕左边与上的岗位。         

     [2] 操作元素属性方法

   [4] 文档写入

     write()、writeln()、open()、close()、前两个都是接受一个字符串参数,即要写入到输出流中的文本,第一个会原样写入,而第二个则会在字符串末尾添加一个换行符。在页面被加载过程中,可以使用前两个方法向页面中动态添加内容。后面两种方法分别用于打开和关闭网页的输出流。若在页面加载期间使用了前两种方法,则不需要用到后两种方法。

 

          alert()、confirm()、prompt() 
=>用于调用系统对话框向用户显示信息

 

      
Element类型是采纳attributes属性的唯一一个DOM节点类型。Attributes属性中富含一个NamedNodeMap,一个会聚。元素的各级一个特征还由一个Attr节点表示,每个节点都保存在NamedNMapode对象被。NamedNMapode对象方法:getNamedItem(name)、removeNamedItem(name)、setNamedItem(node)、items(pos)

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

      parentNode:(获取已解节点的父节点)

       close()关闭新辟的窗口

 

    removeChild(要移除的节点):移除节点,再次来到移除的节点。

 

   
insertBefore(要插入的节点,作为参照地方的节点):向某个固定地点插入节点,再次来到新栽的节点。

   BOM:浏览器对象模型,其中央目标为window ,它代表浏览器的一个实例。

      
在大局效率域中声称的变量、函数都相会变成window对象的属性与措施。定义全局变量:var
age=26; 在window对象上定义属性:window.color=”red”;
二者区别:全局变量不可知因此delete操作符删除,而window对象上定义的习性可经过delete删除。因为经过var添加的window属性有一个名为吧[[confugurable]]的性状,其值被装置也false,这样定义的性质无法透过delete操作符删除。

         document.createTextNode()

       
ps:(1)IE、Opera中,screenLeft、screenTop中保留之是从屏幕左边和上到由window对象表示的页面可见区域之离。即window对象是极外层对象,且浏览器窗口紧贴屏幕最上端:y轴坐标为0,这screenTop的价值是坐落页面可见区域上方之浏览器工具栏的像素低度。(2)chrome、firefox、Safari中,screenY或screenX中保留之是全浏览器窗口被相对于屏幕的坐标值,即以窗口的y轴坐标为0时回回0。

 

      复制节点:

     
location.hash:返回URL中的hash(#声泪俱下跟0或多单字符),倘诺URL中无分包散列,则赶回空字符串。

     [4] 窗口大小

     [5] 导航和开辟窗口

 

    [6] 间歇调用和过调用

 

 

   [3] 窗口地方

       
moveTo(x,y)、moveBy(x,y)将窗口位置走及一个新岗位,moveTo(x,y)中x,y是初职务的坐标,moveBy(x,y)中x,y是水平和垂直方向上移步的比如说素数。

         
registerProtocolHandler(要拍卖的协议,处理该谋的页面的URL,应用程序的名目)

var value1=someNode.childNodes[0]; 
var value2=someNode.childNodes.item(1);

 

      
每个节点都有一个childNodes属性,保存在一个NodeList对象。NodeList是同一种植类数组对象,用于保存一组有序的节点,可以经岗位来聘那个节点。其是透过DOM结构动态执行查询的结果。

 

     location对象的特性:

      访问NodeList中节点的形式:方括如泣如诉情势、item()方法

        
go():可以以用户的历史记录中随意跳转,参数为倚表示于后跳转,参数为刚刚表示向前跳转。参数为字符串时,浏览器会超过反至历史记录中富含该字符串的第一单职位,后退或发展,具体看何人地方再靠近。

    [2]
文档新闻:title(浏览器窗口的标题栏)、URL(页面地址栏展现的URL)、domain(页面的域名)、referer(链接到当前页面的坏页面的URL)

      
表示文档。在浏览器被,document对象是HTMLDocument的一个实例,表示一切HTML页面。且document对象是window对象的一个属性,可将该看成全局对象开展访问。

   [2] 窗口关系及框架

     Window对象既是由此JavaScript访问浏览器窗口的一个接口, 
 又是ECMAScript规定之Global对象。è在网页遭到定义之其它一个靶、变量、函数,皆以window作为这些Global对象,有且访问parseInt()等形式。

      
每个节点都发nodeType属性,用于讲明节点类型,节点类型由在node类型中定义之12单数值常量表示,即1意味元素节点、2表示属性节点、3表示文本节点、4象征CDATASection节点、、、

      
prompt():提示框,用于提醒永辉输入有文本,提醒框除了展现ok、cancle外,还碰面体现一个文件输入域。其收取两只参数,要显得为用户的文本提醒和文件输入域的默认值。

      appendChild:(向节点的子节点列表的终极添加新的子节点)

  [4] 创建元素

document.createElement()
var div=document.createElement("div"); 
div.id="myDiv"; 
div.className="box"; 
ó 
var div=document.createElement("<div id=\"myDiv\" class=\"box\"></div> ");

 

(3)  Element类型

    
   (IE、Safari、Opera、chrome):screenLeft、screenTop表示窗口相对于屏幕左侧与上的职务。

         innerWidth、innerHeight、outerWidth、outerHeight

       
JavaScript,单线程语言,但允许通过设置超时值(set提姆eout())与间歇时间(setInterval())来调度代码在一定时刻执行。其中,setTimeout()在指定的命宫未来执行代码。setInterval()每隔得时间实施同一涂鸦代码。set提姆(Tim)eout()第一独参数,可以是可尽之字符串,也不过函数(推荐);第二单参数表示等多少长度期的纳秒数,但透过该时空后,代码不肯定可以实施。

      

      
使用<script>元素得以望页面中插入JavaScript代码:法1即通过src属性包含外部文件,法2即用这一个元素本身来含有代码。

     appendData(string):(将string插入到文本节点的末尾处)

 

      创设节点:

   
cloneNode(布尔值):用于创造调用那些法的节点的副本,参数为true表示深复制,复制节点及其所有子节点树;参数为false表示浅复制,仅复制节点本身。

       
Ps:在未曾来自页面时,referrer属性可能包含空字符串。所有这个信息有叫要的http头部。

 

 

(5)       Commet类型

 

 

     

var leftPos=(typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;

var topPos=(typeof window.screenTop == "number" ) ? window.screenTop : window.screenY ;
     

function getQueryStringArgs(){ 
    //取得字符串,并去掉开头的问号 
    var qs=(location.search.length > 0 ?location.search.substring(1) : " "), 
        args={ },     //保存数据的对象 
        items=qs.length ? qs.split("&") : [],      //取得每一项 
        item=null, 
        name=null, 
        value=null, 
        i= 0, 
        len=items.length; 
    for(i = 0;i < len; i++){      //逐个将每一项添加到args对象中 
        item=items[i].split(" = "); 
        name=decodeURIComponent(item[0]); 
        value=decodeURIComponent(item[1]); 
        if(name.length){ 
            args[name]=value; 
        } 
    } 
    return args; 
}

       
history对象的length属性,保存在历史记录的数额。对于加载到窗口、标签页

alert("hello"); 

if(confirm("are you sure?")){ 
    alert("I'm so glad"); 
}else{ 
    alert("so bad"); 
} 

var res=prompt("what is your name?"," "); 
if(res!==null){ 
    alert("welcome"+res); 
}

     删除属性:removeAttribute

var myEle=eles[0]; <=> var myElm=eles.item(0); 
var myEle=eles["myele"]; <=> var myEle=eles.namedItem("myele");

      
confirm():同alert(),区别在其推行结果包含一个点名文本、一个OK按钮、一个cancle按钮。

      location.port:再次来到URL中指定的端口号

       JavaScript是单线程的解释器,一段时间内只可以举行同样段落代码。为了操纵而执行之代码,就来一个JavaScript任务列。这多少个职责会按它增长到任务队列里的各种执行。set提姆(Tim)eout的亚个参数告诉JavaScript再过多短时间把当前任务加到行列中,若队列是拖欠的,则代码会立即实施,若队列非空,则要等前方任务履行了了双重实践。

     substring(offset,count):(返回由offset起的count个节点)

  4  screen对象

    ps:通过上述任何一种方式修改URL后,浏览器的历史记录中就会生成一条新记录,因此当用户通过单击后退按钮都会导航到前一个页面。可以利用replace(要导航到的URL)方法来禁
用这种行为。

 

    reload():重新加载当前显示的页面。若该方法无参数则页面以最有效的方式重新加载,即:若页面自上次请求以来没有改变过,则页面之间从浏览器缓存中重新加载;若强制从服务
器重新加载则需传递参数true

      location.host:重返服务器名称及端口号。

     deleteData(offset,count):(从offset起删除count个字符)

 

   1  获取节点:

      location.protocol:重返页面下的协商

 var newVal=oldVal;//这里会抛出错误,因为oldVal没有定义 

 var newValue=window.oldValue;//这里不会抛出错误,这是数学查询,undefined

        document.getElementsByName() :(通过元素name属性获取节点)

   2  节点操作

        文本节点由Text类型表示。nodeType值为3.

   [1] 全局功用域

 

     insertData(offset,string):(从offset指定的岗位插入string)

 

    
replaceData(offset,count,string):(从offset将count个字符用string替代)

 

  

 

         getAttribute()、setAttribute()、removeAttribute()

      删除节点:

var timeoutId=setTimeout(function(){ 
    alert("hi"); 
},1000); 
clearTimeout(timeoutId);

      createAttribute:(创立属性节点)

  5  history对象

  2 location对象

     获取属性:getAttrribute

        
 registerContentHandler()、registerProtocolHandler()都可被一个站点指明它可处理特定类型的信息。

 

     [1] HTML元素

    [1] 创制文本节点

       [1]
文档子节点:DocumentType、Element、ProcessingInstruction、Commet

 

      [2] 注册处理程序

       如页面中涵盖框架,则每个框架还晤面具备好的window对象,且保存于frames集合中。在frames集合中,可经数值索引或框架名称来拜访相应的window对象。每个window对象还发一个name属性,其蕴含框架的名称。<frameset></frameset>与<body></body>不克以起。

   3  属性操作

 

法1:
//引入外部文件 
<script type="text/javascript"  src="client.js"></script> 

var script=document.createElement("script"); 
script.type="text/javascript"; 
script.src="client.js"; 
document.body.appendChild(script);//在这里之前是不会下载外部文件的 

//封装 
function loadScript(url){ 
    var script=document.createElement("script"); 
    script.type="text/javascript"; 
    script.src=url; 
    document.body.appendChild(script); 
} 
loadScript("client.js");




法2: 
//行内方式 
<script type="text/javascript"> 
        function sayHi(){ 
            alert("hi"); 
        } 
</script> 

var script=document.createElement("script"); 
script.type="text/javascript"; 
script.appendChild(document.createTextNode("function sayHi(){ alert('hi');}")); 
document.body.appendChild(script); 

//IE 
var script=document.createElement("script"); 
script.type="text/javascript"; 
script.text="function sayHi(){ alert('hi');}"; 
document.body.appendChild(script); 

//封装 
function loadScriptString(code){ 
    var script=document.createElement("script"); 
    script.type="text/javascript"; 
    try{ 
        script.appendChild(document.createTextNode(code)); 
    }catch(ex){ 
        script.text=code; 
    } 
    document.body.appendChild(script); 
} 
loadScriptString("function sayHi(){alert('hi');}"); //这种方式加载的代码会在全局作用域中执行,且当脚本执行后立即执行

     
法1就是<link>元素用于包含来自外部的文件,法2即<style>元素用于指定嵌入的样式。

         history对象保存在用户上网的历史记录,从窗口被打开的那一刻算是从。

     splitData(offset):(从offset起以文件节点分成六只节点)

var id=element.attributes.getNamedItem("id").nodeValue;   ó 
var id=element.attributes["id"].nodeValue;

        
IE9+、firefox、Safari:outerWidth、outerHeight重临浏览器窗口本身的尺码。

1  节点层次:

      
DOM可以拿其他HTML或XML文档描绘成一个是因为多叠节点构成的结构。节点是不同的种,每种型分别代表文档中不要的信息及标记。每个节点都有所各自的风味、数据和艺术,与另节点内为设有某种关系。节点内的涉及结合了层次,而具备页面标记则显示也一个因一定节点吧彻底节点的树形结构。

 

(6)       CDATASection类型

七  DOM对象

   
replaceChild(要插入的节点,要替换的节点):替换节点,重返给替换掉的节点(已抹的)。