《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) 元素中的特性可以采用：

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>

未完待续。。。

《JavaScript高级程序设计》心得笔记-----第三篇章的更多相关文章

JavaScript高级程序设计---学习笔记（三）
函数表达式定义函数的方式有两种:一种是函数声明,另一种是函数表达式. 关于函数声明,它的一个重要特征就是函数声明提升,意思是在执行代码之前会先读取函数声明所以可以把函数声明放在调用它的语句后面. 而 ...
JavaScript高级程序设计学习笔记第三章--基本概念
一.标识符: 1.区分大小写 2.命名规则: 第一个字符必须是一个字母.下划线(_)或一个美元符号($) 其他字符可以是字母.下划线.美元符号或数字标识符中的字母也可以包含扩展的 ASCII 或 U ...
javascript高级程序设计阅读笔记（一）
javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...
《JavaScript高级程序设计》笔记——第一章到第三章
2019年,新年伊始,我打算好好重读一下<JavaScript高级程序设计>这本前端必备经典书.每天半小时. 以下内容摘自<JavaScript高级程序设计> 2019-2-1 ...
《javascript高级程序设计》笔记三
第三章基本概念任何语言的核心必然会描述这门语言最基本的工作原理.这部分内容对我们来说,读起来很乏味,甚至会产生困意,但这部分内容却是重要的!我有幸拜读<JavaScript高级程序设计> ...
【javascript学习——《javascript高级程序设计》笔记】DOM操作
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...
JavaScript高级程序设计---学习笔记（一）
今天,2017.3.17开始利用课余时间仔细学习<JavaScript高级程序设计>,将需要掌握的知识点记录下来,争取把书里的所有代码敲一遍并掌握. 1.标识符命名最好是第一个字母小写,剩 ...
javascript高级程序设计学习笔记
javascript高级程序设计,当枕头书已经好久了~zz 现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...
《JavaScript高级程序设计》笔记：基本概念（三）
数据类型 ECMAScript中有5种简单数据类型(也称为基本数据类型):undefined,null,boolean,number和string. typeof typeof null会返回“obj ...

随机推荐

iOS开发——多线程OC篇&多线程中的单例
多线程中的单例 #import "DemoObj.h" @implementation DemoObj static DemoObj *instance; // 在iOS中,所有对 ...
android Unable to instantiate application
最近一段时间在做项目时候遇到一个错误老是解决不了,log如下: FATAL EXCEPTION: main12-11 09:08:53.922 E/AndroidRuntime( 1227): jav ...
【ZZ】快速學會開發Android App
http://www.cc.ntu.edu.tw/chinese/epaper/0022/20120920_2209.html 作者:吳玉舒 / 臺灣大學計算機及資訊網路中心程式設計組幹事智慧型手機 ...
LinkedHashMap介绍
转载:http://uule.iteye.com/blog/1522291 jdk1.7API文档链接:http://tool.oschina.net/apidocs/apidoc?api=jdk_7 ...
curl模拟Http请求
一.get请求 curl "http://www.baidu.com" 如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地 curl -i "http://w ...
类的__slots__属性
为什么有"slots"属性? 默认情况下,python对象队象的每个实例(instance)都会有一个字典来存储该实例的属性,这样做的好处在于运行时期每个对象可以任意设置新的属性. ...
python获取每颗cpu使用率
以下是关于python来获取服务器每颗CPU使用率的使用脚本. #!/usr/bin/env python # -*- coding: utf-8 -*- import re,time def _re ...
iOS ----Pods-resources.sh Permission denied
1:执行指令 chmod a+x "路径(Pods-resources.h文件所在的路径)" 2:cd 进如pods文件夹下面 3:执行指令第一步: sudo chmod 777 ...
jQuery实现轮播图效果
通过改变背景色来达到效果,有下角标和左右箭头,都已经实现. html部分: <!DOCTYPE html> <html> <head> <meta chars ...
TCP/IP协议原理与应用笔记24：网际协议（IP）之 IP协议的简介
1. IP协议:(网际协议) 2. IP协议(不可靠无连接数据报协议) (1)连接 vs. 可靠性连接:面向连接.无连接可靠:差错控制.流量控制等面向连接不一定保证可靠,无连接不一定不可靠在连 ...

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

《JavaScript高级程序设计》心得笔记-----第三篇章的更多相关文章

随机推荐

热门专题