10. javacript高级程序设计-DOM
1. DOM
DOM(文档对象模型)是针对HTML和XML文档的一个API（应用程序接口）
1.1 节点层次
DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记。
1.1.1 Node类型
DOM1中定义了一个Node接口，该接口由DOM中所有的节点类型实现，这个Node接口在JavaScript中作为Node类型实现。
每个节点都有一个nodeType属性，因此所有节点类型都共享着相同的基本属性和方法
每个节点都有一个nodeType属性，用于表明节点的类型，节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型比居其一：
l Node.ELEMENT_NODE(1);
l Node.ATTRIBUTE_NODE(2);
l Node.TEXT_NODE(3)
l Node.CDATA_SECTION_NODE(4)
l Node.ENTITY_REFERENCE_NODE(5)
l Node.ENTITY_NODE(6)
l Node.PROCESSING_INSTRUCTION_NODE(7)
l Node.COMMENT_NODE(8)
l Node.DOCUMENT_NODE(9)
l Node.DOCUMENT_TYPE_NODE(10)
l Node.DOCUMENT_FRAGMENT_NDOE(11)
l Node.NOTATION_NODE(12)
(1). 判断节点类型
if(someNode.nodeType == 1){
}
适用所有浏览器
(2). nodeName 和 nodeValue，可以了解具体信息，这两个属性取决于属性类型
(3). 节点关系：
- childNodes对象，NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点
- parentNode属性，该属性指向文档树中的父节点
- previousSibling:前面的兄弟节点
- newSibling:后面的兄弟节点
- firstChild:第一个子节点
- lastChild:最后一个子节点
- ownerDocument,该属性指向表示整个文档的文档节点
(4). appendChild():在节点的末尾添加一个节点
hasChildNodes():是否有子节点
insertBefore():在前面插入节点
replaceChild():替换节点
removeChild():移除节点
cloneNode():复制节点
1.1.2 Document类型
l nodeType的值为9
l nodeName的值为 “#document”
l nodeValue的值为null
l parentNode的值为null
l ownerDocument的值为null
l 其子节点可能是一个DocumentType(最多一个)，Element(最多一个)，ProcessingInstruction或者Comment
常见属性：
document.body
document.title
document.URL
document.domain
document.referrer
document.getElementById()
document.getElementsByTagName()
document.anchors
document.applets
document.forms
document.images
document.links
1.1.3 Element类型
l nodeType的值为1
l nodeName的值为 元素的签名值
l nodeValue的值为null
l parentNode的值为Document或Element
l 子节点可能是Element，Text，Comment，ProcessingInstruction，CDATASection或者EntityReference
一般会存在下列属性：
id，title，lang，dir，className
<div id="id" title="title" lang="lang" dir="dir" class="className"></div>
可以使用getAttribute(),setAttribute()和removeAttribute()来操作属性
Element类型是使用attributes属性的的唯一一个DOM节点类型，表示所有的属性集合。
1.1.4 Text类型
l nodeType的值为3
l nodeName的值为 “#text”
l nodeValue的值为 节点所包含的文本
l parentNode的值为Element
l 没有子节点
l 可以通过nodeValue属性或data属性访问Text节点中的文本
l appendData(text)
l deleteData(offset,count)
l insertData(offset,text)
l replaceData(offset,count,text)
l splitText(offset)
l substringData(offset,count)
1.1.5 Comment
l nodeType的值为8
l nodeName的值为 “#comment”
l nodeValue的值为 注释的内容
l parentNode的值为Element或者Document
l 没有子节点
1.1.6 CDATASection
l nodeType的值为4
l nodeName的值为 “#cdata-section”
l nodeValue的值为 CDATA区域中包含的内容
l parentNode的值为Element或者Document
l 没有子节点
1.1.7 DocumentType
l nodeType的值为10
l nodeName的值为 doctype的名称
l nodeValue的值为 null
l parentNode的值为Document
l 没有子节点
1.1.8 DocumentFragment
l nodeType的值为11
l nodeName的值为 ‘#document-fragment’
l nodeValue的值为null
l parentNode的值为null
l 子节点可能是Element，Text，Comment，ProcessingInstruction，CDATASection或者EntityReference
1.1.9 Attr类型
l nodeType的值为2
l nodeName的值为 特性的名称
l nodeValue的值为特性的值
l parentNode的值为null
l 没有子节点
1.2 DOM操作技术
1.2.1 动态脚本
var script = document.createElement(‘script‘);
script.type = "text/javascript";
script.sec = "io.js";
document.body.appendChild(script);
1.2.2 动态样式
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "io.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
1.2.3 操作表格
<table>属性和方法
l caption
l tBodies
l tFoot
l tHead
l rows
l createTHead()
l createTFoot()
l createCaption()
l deleteTHead()
l deleteTFoot()
l deleteCaption()
l deleteRow(pos)
l insertRow(pos)
<tbody>属性和方法
l rows
l deleteRow(pos)
l insertRow(pos)
<tr>属性和方法
l cells
l deleteCell(pos)
l insertCell()pos
1.2.4 使用NodeList
由于NodeList是动态的，在迭代NodeList时，使用length属性初始化第二个变量，然后将迭代器与该变量比较
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
