weixin_30258027
weixin_30258027

《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) {
                        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;à

2)         document.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:

            var imgs = document.getElementsByTagName("img");

            var myImg = imgs.namedItem("myImg");

            或者

    var myImg = imgs["myImg"];

】

（3）     document.getElementByName()

（4）     document.anchors【所有带有name属性的元素】

（5）     document.link【所有带有href属性的元素】

（6）     document.applets【】

（7）     document.forms【

元素】

（8）     document.images【元素】

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取得属性的值【

   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属性的元素，、、、、、