《JavaScript高级程序设计》心得笔记—–第三篇

第十章

1、   
DOM1级定义了一个Node接口,以Node类型实现(除IE以外),为了保险过浏览器兼容,最好用nodeType属性与数字数值举办相比(someNode.
nodeType==1),来检查节点的档次。检查节点类型,淌倘诺一个因素,保存NodeName的价值,对素节点吧,NodeName保存的凡素的标签名,NodeValue的价值老为null。

2、   
每个节点都发生一个childNodes属性,其中保存在一个NodeList对象【类数组,有length属性[someNode.
childNodes.
length],但非是Array】,访问保存在NodeList中之节点可以经方括号【someNode.
childNodes[0]】或者经过item()【someNode. childNodes.item(0)】。

ps::::::对arguments使用 Array.prototype.slice可以用这易成屡组。

在IE8之上可用将NodeList转换成数组:

Array.prototype.slice.call(someNode. childNodes,0)

有浏览器适用的:

 function converToArray(node){
                var array = null;

                try{
                    Array.prototype.slice.call(someNode. childNodes,0);
                }catch(e){
                    array = new Array();
                    for (var i=0,;i<node.length;i++) {
                        array.push(node[i]);
                    }
                }
}

1、   
hasChildNodes()方法当查问到闹一个或基本上只子节点的状下会回去true,所有节点的终极一个性能都是ownerDocument,该属性指向表示所有文档的文档节点。

2、    操作节点:

1)         firstChild和lastChild:父节点的第一单跟最终一个节点

2)        
向childNodes列表的末段添加一个节点,不会面删除节点:appendChild(newNode)

3)        
向childNodes列表的一定岗位添加一个节点,不会合去除节点:insertBefore(newNode,插入地方)

4)         向childNodes列表的一定岗位交换一个节点:replaceChild
(newNode,插入地方)

5)         向childNodes列表移除了节点:removeChild (移除地点)

6)        
所有品类的节点都有些:cloneNode()方法接受一个布尔值参数,true时深复制,复制节点和万事子节点培育,false时浅复制,只复制节点本身。。。。normalize()用来拍卖文档树中的公文节点。

3、    document类型:

1)         document.documentElement;à<html>

2)         document.bodyà<body>

3)         document.doctype浏览器之间略有不同

4)         document.title

5)         取得完整的URL:document.URL

取得域名:document.domain

拿到来源页面的URL:document.referrer

6)         查找元素:

(1)          
document.getElementById(id)【假如发差不多单相同的ID,只回去第一软面世的要素,在IE7及前的本,name的特征与受定ID匹配的表单元素(input、textarea、button、select)也会面吃归】

(2)          
document.getElementByTagName()【重临集合,得到集合中的宗可以透过nameItem()也可透过方括号

eg: <img name=”myImg” src=”” alt=””/>

            var imgs = document.getElementsByTagName(“img”);

            var myImg = imgs.namedItem(“myImg”);

            或者

    var myImg = imgs[“myImg”];

(3)     document.getElementByName()

(4)     document.anchors【所有带有name属性的<a>元素】

(5)     document.link【所有带有href属性的<a>元素】

(6)     document.applets【<applet>】

(7)     document.forms【<form>元素】

(8)     document.images【<img>元素】

7)         DOM一致检测(在hasFeature检测此前最好先接纳能力检测):

var hasXmlDom = document.implementation.hasFeature(“XML”,”1.0”);

4、    Element类型

1)         访问元素的标签名好行使nodeName和tagName

【myDiv. nodeName== myDiv. tagName(最好用myDiv. tagName.
toLowerCase())】

2)         元素中之特征可以:

<div  class=”mydiv” id=”myid” title=”” ></div>

var mydiv = document.getElementById(myid);

法一:mydiv.id  、  mydiv.className

拟二:采纳getAttribute(“”)、setAttribute(“”,””)、removeAttribute(),使用的时刻,不推荐用的是:style和onclick

eg:mydiv.getAttribute(“id”)  、mydiv.getAttribute(“class”)

3)         attributes属性(element.attributes.XXX)

4)         document.creatElement()可以创造属性

5、    TEXT类型(文本节点保留有length属性)

1)         创制文本节点:document.creatTextNode(“”);

2)         appendData (text):将text添加到文本的终极

3)         deleteData(offset, count):从offset地方上马去count个字符

4)         insertData(offset, text):从offset地方上马插入text

5)         replaceData(offset, count, text)

6)         splitText(offset):从offset处分成两独文本节点

7)         substringData(offset,
count)提取从offset处起首至offset+count节数的字符

6、    Comment类型(注释)

1)         通过nodeValue和data取得注释的内容

2)         创设注释节点:document.creatComment(“”);

7、    CDATASection类型(XML文档)

8、    DocumentType类型

  保存在document.doctype中,含3个属性:name、entities、notations

第十一章节

1、    选择符

document.querySelector(“”)取得某个元素的css选拔切合

document.querySelectorAll(“(em)/(.select[类])/(p
strong)”)取得某个元素的css选用切合

matchesSelector()假如调用元素与该采取适合匹配,重回true反之

2、   
元素遍历:childElementCount【再次来到元素个数】、firstElementChild【第一只子元素】、

lastElementChild【最终一个子元素】、previousElementSlibing【前一个同辈元素】、nextElementSlibing【后一个同辈元素】

3、    HTML5初添的

(1)           document.getElementByClassName()

(2)           className(div.className)、

(3)          
classList【add(value)[既在不添加,不有添加]、contains(value)、remove(value)、toggle(value)[一度有去,没有就创建]】

(4)           document.head【Chorme、Safri 5】

(5)          
为元素添加非标准的特性,要加前缀data-,,,通过dataset取得属性之价值【<div
data-myname=””>   mydiv.dataset.myname】

(6)          
scrollIntoView()方法:除Chorme可用,传入的价好啊空、true、false

4、    DOM中取得到点子的素:document.activeElement

取得关节:页面加载、键盘输入、focus()

认清是否拿走关键:hasFoucs()

5、    document.readyState:loading和complete

6、    兼容形式:在业内形式下:document.compatMode==”CSS1Compat”

以混形式下:document.compatMode==”BackCompat”

7、    字符集属性:document.charset=”UTF-8”【IE、Chorme、Safri、Opera】

document.Characterset【Firefox】、document.defalutCharset【IE、Chorme、Safri】

8、    插入标记:

1)         innerHTML属性(创设新的DOM树)

莫辅助innerHTML属性的元素,<col>、<colgroup>、<freamset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfood>、<tr>。IE8在此之前<title>也不曾,在行使<style>,因为<style>是一个不曾成效域的要素,所以如若她一个放到的有功能域的元素_<style>

2)         outerHTML属性(创制新的DOM子树)

3)        
insertAdjacentHTML(“beforebegin【当前因素此前插入一个附近的同辈元素】/afterbegin【当前元素以下插入一个子元素或者以首先单子元素在此以前在插入一个新的子元素】/beforeend【当前元素以下插入一个子元素或者以末一个子元素从前在插入一个初的子元素】/afterend【当前元素之后栽一个紧邻的同辈元素】”,”<p>sss</p>”)方法

9、    childen属性

跟nodeLit没有呀界别,element. childen.length、element. childen[0]

10、contains()方法:某个节点是不是任何一个节点的遗族,有:true,无:false

为得采取compareDocumentPosition()来规定节点内的干,重返改呢关联之掩码【1(无关)、2(居前)、4(居后)、8(包含)、16(被含有)】

11、插入文本:innerText和outerText

第十二回

1、   
在DOM2蒙,取得计量后底样式document.defalutView.getComputedStyle(myDiv,null);然而当IE中,getComputedStyle()不辅助,使用myDiv.currentstyle;

2、    创设规则:IE:addRule(“body”,”color:blue”,0)

另外浏览器:insertRule(“body{color:blue}”,0);

3、    删除规则:IE:remove Rule(0)

另浏览器:deleteRule(0);

4、    遍历:

1)        
【NodeIterator】创造新的实例:document.createNodeIterator(root【作为找从点树的节点】,whatToShow【访问哪些节点的数字代码】,filter【接受或者拒绝某种特定节点的函数,NodeFilter.FILTER_ACCESS/
NodeFilter.FILTER_SKIP】,entityReferenceExpansion【布尔值,false】)

2)        
【Tree沃克比NodeIterator高一级】:提供了firstChild()、lastChild()、parentNode()、nextSibling()、previousSlibing()。创制对象:document.createTreeWalker(root【作为找于点树的节点】,whatToShow【访问哪些节点的数字代码】,filter【接受或驳回某种特定节点的函数,NodeFilter.FILTER_ACCESS/
NodeFilter.FILTER_SKIP】,entityReferenceExpansion【布尔值,false】)

5、    DOM中的限定:document.createRange()。

1)         简单选取:selectNode()、selectNodeContents()

2)         复杂采用:setStart()、setEnd()

3)         删除范围所蕴涵的情:deleteContents()

4)        
删除范围所富含的情节,再次来到范围的文档片段,将限之始末插入到文档中之另地点:
extractContents()

5)         插入DOM范围中的情:insertNode()

6)         折叠DOM范围:collapse()

7)         比较DOM范围:compareBoundaryPoints()

8)         复制DOM范围:cloneRange()

9)         清理DOM范围:detach()

第十三章节

1、    DOM0级事件处理:btn.onclick = function(){alert(1);};

2、    DOM2级事件处理:

var handler = function(){alert(1);}

1)         添加事件:btn.add伊夫ntListener(“click”, handler,false);

2)         移除事件:btn.remove伊夫(Eve)ntListener(“click”, handler,false);

3、    IE事件处理

var handler = function(){alert(1);}

1)         添加事件:btn.attch伊夫nt(“onclick”, handler,false);

2)         移除事件:btn.detach伊芙nt (“onclick”, handler,false);

4、    事件目标:在事件处理后,都会合传一个【event】对象。属性。。。

eg:btn.onclick = function(){alert(event.type)}//click

5、   
IE事件目的:在事件处理后,都谋面流传一个【event】对象。属性和地点装有区别。。。

6、   
UI事件:load(页面完全加载后)、unload(事件于文档完全卸载后点)、abort(用户已下载时,嵌入的情节尚未加载了,在object元素下边触发)、error、select、resize、scroll

7、   
要旨事件:blur()【失去主题】、focus、focusin【元素拿到核心时点,IE5.5+、Safari5.1+、Opera11.5+、Chrome】、focusout【元素失去核心时接触,IE5.5+、Safari5.1+、Opera11.5+、Chrome】、DOMFocusIn【元素得到大旨时接触,Opera】、DOMFocusOut【元素失去主旨时点,Opera】

8、   
页面坐标:在无滚动的意况下:pageX和pageY的价值与clientX和clientY的价等

第十四节

1、    取得表单:var form = document.getElementById(“form1”); 或者
document.forms[0]【看第多少个表单】

2、    提交表单:form.submit();

3、    重置表单:form.reset()

4、    表单字段:form. elements [0]、form. elements [“textbox1”]

5、    表单的数目:form.element.length

6、  避免频繁交由表单(第一涂鸦单击后即夺提交按钮):btn.disabled =
true;

7、  HTML5 为表单字段新增了一个 autofocus 【Firefox 4+、 Safari 5+、
Chrome 、Opera
9.6】属性,但只要看浏览器是否匡助此特性,因而预先检测是否设置了拖欠属性,如果设置了,就无须再行调用
focus();

EventUtil.addHandler(window, “load”, function(event){
var element = document.forms[0].elements[0];

 if (element.autofocus !== true){
element.focus();

}
});

8、 
表单都帮忙:blur()、focus()、change()【用于注脚用户以字段中输入的数额】

9、  <input>和<textarea>都帮助 select()方法,方法不接受参数

10、select
事件可以领略用户什么时候得到了轩然大波,不过未知晓情,由此内容可以动用selectionStart
和 selectionEnd【IE9、 Firefox、 Safari、 Chrome
、Opera】以及document.selection【IE<9】

 function getSelectedText(textbox){
if (typeof textbox.selectionStart == "number"){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
} else if (document.selection){
return document.selection.createRange().text;
}
}

11、  采取一些文本:setSelectionRange()方法【IE9、 Firefox、 Safari、
Chrome 、Opera】和createTextRange()+collapse() +moveStart()和
moveEnd()【接纳的字符总数】+select()【IE<9】

function selectText(textbox, startIndex, stopIndex){
if (textbox.setSelectionRange){
textbox.setSelectionRange(startIndex, stopIndex);
} else if (textbox.createTextRange){
var range = textbox.createTextRange();
range.collapse(true);
range.moveStart("character", startIndex);
range.moveEnd("character", stopIndex - startIndex);
range.select();
}
textbox.focus();
}

 

12、  访问剪贴板中之数(浏览器中出差别):

clipboardData 对象有三独道:getData()、setData()和
clearData()【setData()方法的首先单参数为是数据类型,第二只参数是一旦放在剪贴板中的文本。对于第一个参数,
IE 照样协理”text”和”URL”,而 Safari 和 Chrome 仍旧只是帮忙 MIME
类型,不可知鉴别”text”类型。】

var EventUtil = {
getClipboardText: function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
setClipboardText: function(event, value){
if (event.clipboardData){
return event.clipboardData.setData("text/plain", value);
 } else if (window.clipboardData){
return window.clipboardData.setData("text", value);
}
},};

13、  自动切换要旨:

14、  HTML5 约束验证API:

1)   required:必填字段  eg: <input type=” ” name=” ” required>

2)   数值范围:”number”、 “range”、 “datetime”、 “datetime-local”、
“date”、 “month”、 “week”、”time”

3)   stepUp(num)【加num】和 stepDown(num)【减num】

4)   输入模式:pattern  eg: <input type=” ” pattern=”\d+” name=”
“>

5)   检测中: checkValidity()方法可检测表单中之之一字段是否中

eg: if (document.forms[0].elements[0].checkValidity()){
//字段有效,继续
} else {
//字段无效
}

6)   为啥字段有效要无效:validity

7)   禁用申明: novalidate

8)   接纳框脚本: <select>和<option>

(1)     type 属性不是select-one,就是select-multiple

(2)     每个<option>元素:

(1st) index【当前择在 options 集合中的目】

(2nd)          label【当前挑选之签;等价于 HTML 中的 label 特性】

(3rd)           selected【布尔值,表示即挑是否为入选】

(4th)text【选项的文本】

(5th)   value【选项的价值(等价于 HTML 中之 value 特性)】

9)  
只同意选拔同一桩之选框:selectedIndex【selectbox.options[selectbox.selectedIndex];】

10)  添加选项:

eg:var newOption = new Option(“Option text”, “Option
value”);【第一只参数是text,第二独参数是value】selectbox.add(newOption,
undefined);

11)  移除选项: removeChild()方法、remove()方法、相应选项设置为 null

12) 
表单体系化:在编写代码从前,有要事先干精晓在表单提交期间,浏览器是什么样用数据发送给服务器的

13)  富文本编辑:designMode 属性有星星点点单或的值:
“off”(默认值)和”on”【整个文档都汇合更换得得编制(彰显插入符号),然后便好像下字处理软件一样,通过键盘将文件内容加以多少、变成斜体】

14)  contenteditable:用户可编制该因素【属性:true表示打开、
false表示关闭, inherit代表从父元素这里继承(因为可以在 contenteditable
元素中开创或者去元素)】

eg:<div class=” ” id=” ” contenteditable></div>

 

 

 

未完待续。。。

相关文章