《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)         【TreeWalker比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.addEventListener(“click”, handler,false);

2)         移除事件：btn.removeEventListener(“click”, handler,false);

3、    IE事件处理

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

1)         添加事件：btn.attchEvent(“onclick”, handler,false);

2)         移除事件：btn.detachEvent (“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>

 

 

 

未完待续。。。

posted @ 2016-03-24 13:38  逆光飞翔23  阅读(239)  评论(0)  编辑  收藏  举报