DOM---JavaScript高级程序设计的笔记

DOM

IE9以下的所有DOM对象都是以COM对象的形式实现

1.Node类型
1.NodeType属性:
(1) ELEMENT_NODE
(2) ATTRIBUTE_NODE
(3) TEXT_NODE
(4) CDATA_SECTION_NODE
(5) ENTITY_REFERENCE_NODE
(6) ENTITY_NODE
(7) PROCESSING_INSTRUCTION_NODE
(8) COMMENT_NODE
(9) OCUMENT_NODE
(10) DOCUMENT_TYPE_NODE
(11) OCUMENT_FRAGMENT_NODE
(12) NOTATION_NODE

2.nodeName、nodeValue
对于元素节点而言nodeName保存的是标签名，nodeValue则是null

3.节点关系 childNodes 属性：保存着类似数组的NodeList对象 NodeList访问：

someNode.childNodes[0]

someNode.childNodes.item(1)

someNode.childNodes.length

装换为数组：

var arrNodes = Array.prototype.slice.call(some.childNodes,0)

• parentNode 属性
• firstChild 属性
• lastChild 属性
• previousSibling 属性
• nextSibling 属性
• ownerDocument 属性
• hasChildNodes() 方法 是否包含子节点，返回布尔值

4.操作节点
- appendChild(new)
- insertBefore(new,old)
- replaceChild(new,old)
- removeChild(old)
- cloneNode() 参数为true，则复制子节点
- normalize() 删除空节点，合并重复文本节点

---

2.Document 类型
在浏览器中，document对象是HTMLDocuemnt（继承自Document类型）的一个实例，表示整个HTML页面，且是window的属性

1.文档子节点
document.documentElement
document.body
document.doctype

注：document对象是只读，不能增删节点

2.文档信息
title
URL（包含页面完整的URL）
domain （只包含页面域名）
referrer （保存着链接到当前页面的上个页面URL）

注：domain不能设置为URL中不包含域，且改为松散的域后无法再改为具体的域

3.查找元素
document.getElementById()
注：IE7以下若表单元素的name等于查找的id会返回

document.getElementsByTagName()
返回HTMLCollection对象
注：IE将注释节点实现为元素，document.getElementsByTagName(‘*’)会返回注释节点

document.getElementsByName()
返回特定name的元素
使用namedItem(‘name’)值返回第一项

4.特殊合集
这些特殊合集都是HTMLCollection对象
document.anchors （包含文档中所有带name特性的a）
document.forms （包含文档中所有form）
document.images （包含文档中所有images）
document.links （包含文档中所有links）

5.DOM一致性检测
document.implementation属性
提供检测浏览器实现DOM的哪部分

包含hasFeature(‘名称’，‘版本号’)方法，返回布尔值

6.文档写入
write()
writeln()

---

3.Element 类型
1.HTML元素
每个元素都有以下属性
id、title、lang、dir、className

2.取得特性 getAttribute() 与属性访问特性的不同：

getAttribute()可取得自定义特性

取得style和事件时返回字符串，属性访问返回的是对象和函数

3.设置特性
setAttribute(‘name’,’value’)
若无特性则创建，特性会被转换为小写

removeAttribute(‘name’)
IE6不支持

4.attributes属性
该属性包含一个NamedNodeMap对象，拥有下列方法
- getNamedItem(name) 【返回nodeName属性等于name的节点】
- removeNamedItem(name) 【从列表中移出节点】
- setNamedItem(node) 【向列表中添加节点】
- item(pos) 【返回pos位置处的节点】

每个特性节点都有一个名为specified属性，值为true时，为指定特性

---

4.Text 类型
通过nodeValue 属性或data属性访问Text节点中包含的文本

创建文本节点
document.createTextNode()

规范化文本节点
normalize()

分割文本节点
splitText()

---

5.Comment类型
注释节点

---

6.CDATASection类型

---

7.DocumentType类型

---

8.Document.Fragment类型

---

9.Attr 类型

==============================================================================

DOM操作技术

1.动态加载脚本
外部加载脚本

function loadScriptUrl(url){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.body.appendChild(script);
}

内联脚本

function loadScriptUrl(code){
    var script = document.createElement('script');

    try{
        script.appendChild(document.createTextNode(code));
    }catch(ex){
        script.text = code;   //兼容IE(IE将script视为一个特殊的元素，不允许DON访问其子节点)
    }
    document.body.appendChild(script);
}

---

2.动态样式

---

3.操作表格
table属性和方法
caption:
tBodies
tFoot
tHead
createTHead()
createTFoot()
createCaption()
deleteTHead()
deleteTFoot()
deleteCaption()

tbody的属性和方法

rows

deleteRow(pos)

insertRow(pos)

cells

deleteCell(pos)
:insertCell(pos)