javascriptDom
DOM:文档对象模型，是针对html和xml文档的一个API。描绘一个层次化的节点树，允许开发人员添加、移除、修改页面的某一个部分。
IE中所有的DOM对象都是以ＣＯＭ对象的形式实现的，这意味着ＩＥ的ＤＯＭ对象与原生的javascript对象行为或活动不一致。
DOM层次：
<html>
<head>
<title>SamplePage</title>
</head>
<body>
<p>HelloWorld!</p>
</body>
</html>
文档元素：文档的节点即每个文档的跟节点。如<html>节点元素
Node类型：
javascript中所有的借点光类型都继承自Node类型，因此所有节点类型都共享着相同的基属性和方法。
每个节点都有一个nodeType属性，用于表名节点的类型，节点类型有在Node；类型中定义的12个数值常量来表示任何节点类型比居其一：
Node.ELEMENT_NODE:1
Node.ATTRIBUTE_NODE:2
Node.TEXT_NODE:3
Node.CDATA_SECTION_NODE:4
Node.ENTITY_REFERENCE_NODE:5
Node.ENTITY_NODE:6
Node.PROCESSING_INSTRUCTION_NODE:7
Node.COMMENT_NODE:8
Node.DOCUMENT_NODE:9
Node.DOCUMENT_TYPE_NODE:10
Node.DOCUMENT_FRAGMENT_NODE:11
Node.NOTATION_NODE:12
if(someNode.nodeType == Node.ELEMENT_NODE){
alert(“nodeis an element”); //在ＩＥ中无效
}
if(someNode.nodeType == 1){
alert(“nodeis an element”); //在所有浏览器中有效
}
nodeName和nodeValue属性
nodeName 属性含有某个节点的名称。
* 元素节点的 nodeName 是标签名称
* 属性节点的 nodeName 是属性名称
* 文本节点的 nodeName 永远是 #text
* 文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的.
nodeValue:
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
节点关系：节点间的各种关系可以用传统的家族关系来描述，相当于把文档树比喻成家谱，每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
每个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的所有节点都有相同的父节点，因此他们的parentNode指向同一个引用（节点），chileNodes中所有节点间都属于同胞节点。
通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中其他节点。列表中第一个节点的previousSibling属性值为null，而列表中最后一个节点的nextSibling属性值同样为null。
if(someNode.nextSibling == null){
alert(“Lastnode in the parent’s childNodes list”);
}else if(someNode.perviousSibling == null){
alert(“Firstnode in the parent’s childNodes list”);
}
父节点与其最后一个节点之间也存在特殊关系。父节点的firstChild和lastChild属性分别指向器childNodes列表中的第一个和最后一节点。其中someNode.firstChild == someNode.childNodes[0]，而someNode.lastChild== some.childNodes[some.childNodes.length -1]
关系如图所示：
操作节点：
添加节点：appendChild(),添加完成之后，childNodes的新增节点、父节点以及以前的最后一个子节点关系指针都会相应的更新。
如果传入到appendChild()中的节点已经是文档的一部分了，那么结果就是将该节点从原来位置转移到新位置。即使可以将ＤＯＭ树看成由一系列指针连接起来的，但任何ＤＯＭ节点也不能同时出现在文档的多个位置。因此在调用appendChild()时传入了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点。
//someNode有多个节点
var returnedNode= someNode.appendChild(someNode.firstChild);
alert(retrunedNode== someNode.firstChild); //true
alert(retrunedNode== some.lastChild); //false
如果需要把节点放在childNodes的某个位置，就可以使用insertBefor()方法。两个参数：要插入的节点和作为参数的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点(previousSibling)，同时被方法返回。如果参照的节点是null，则insertBefor()与appendChild()执行相同的操作。
//插入后成为最后一个子节点
var retrunedNode= someNode.insertBefor(newNode,null);
alert(newNode ==someNode.lastChild); //true
//插入后成为第一个子节点
var retrunedNode= someNode.insertBefor(newNode,someNode.firstNode);
alert(retrunedNode== newNode); //true
alert(newNode ==someNode.firstChild); //true
//插入到最后一个子节点前面
var returnedNode= someNode.insertBefor(newNode,someNode.lastChild);
alert(newCode ==someNode.childNodes[someNode.childNodes.length - 2]); //true
替换节点：
replaceChild(要插入的节点，要替换的节点);
//替换第一个子节点
varreturnedNode = someNode.replaceChild(newNode,someNode,firstChild);
该节点的所有关系指针都会从被它替换的节点复制过来，尽管从技术上讲，被替换的节点依然还在文档中，但它在文档中已经没有了自己的位置。
移除节点：
removeNode();被移除的节点成为方法的返回值
//移除第一个子节点
varformerFirstChild = someNode.removeChild(someNode,firstNode);
一．Document类型：
document：文档，document对象是HTMLDocument(继承自Document类型)的一个实例，表示整个HTML页面，而且document对象是 window对象的一个属性。
nodeType:9
nodeName:#document
nodeValue:null
parentNode:null
ownerDocument:null
其子节点可能是一个DocumentType（最多一个）、element（最多一个）、ProcessingInstruction或Comment。
1.Document子节点：
var html = document.documentElement;
var html = document.childNodes[0];
var html = document.firstChild;
document对象还有一个body属性，直接指向<body>元素
var body = document.body;
var doctype = document.doctype; //取得对<!DOCTYPE>
2.Document信息：
//取得文档标题
var originalTitle = document.title;
//设置文档标题
document.title = “New page title”;
//获取完整的域名
var url = document.URL;
//获取域名
var domain = document.domain;
//获取来源页面的URL
var referrer = document.referrer;
只有domain是可以设置的。
3.查找元素：
document.getElementById();根据ID获取元素
document.getElementByTagName();根据标签名获取元素集合HTMLCollection，HTMLCollection对象有个namedItem()，通过元素的name属相获取集合中的项
document.getElementByName():根据class属性获取元素集合HTMLCollectoin.
特殊集合：
document.anchors:包含文档总带有name特性的<a>元素
document.applets:包含文档总所有的<applet>元素，不推荐使用
document.forms包含文档中所有的<form>元素
document.images:包含文档中所有的<img>元素
document.links:包含文档中所有带href特性的<a>元素
4.DOM一致性的检测：
document.implementation属性提供相应的信息和功能对象，其hasFeature()检测版本信息
var hasXmlDom = document.implementation.hasFeature(“XML”,”1.0”);
二．Element类型：
nodeType:1
nodeName:元素的标签名
nodeValue:null
其子节点可能是Element,Text,……
var div = document.getElementById(“div”);
var tagName = div.nodeName;
var tagName = div.tagName;
if(element.tagName == “div”){
//很容易出错，转换为小写
}
1.HTML元素：
所有的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性。id、title、…..
获取特性：
document.getAttribute():获取特性
document.setAttribute():设置特性
document.removeAttribute():移除特性
2.attributes属性：
Element是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap,与NodeList类似，也是一个“动态”的集合，元素的每个特性都有一个Attr节点表示，每个节点都保存在NameNodeMap对象中，包含以下方法
getNameItem(name):返回nodeName属性等于name的节点。
removeNamedItem(name):从列表中移除nodeName属性等于name的节点
setNameItem(node):向列表中添加节点，以节点nodeName属性为索引
item(pos):返回位于数字pos位置处的节点
var id = element.attributes.getNamedItem(“id”).nodeValue;
var id = element.attributes[“id”].nodeValue;
3．创建元素
var div = document.createElement(“div”);
在创建新元素的同时，也为新元素设置了ownerDocument属性
document.body.appendChild(div);
将新创建元素添加到<body>元素中
三．Text
nodeType:3
nodeName:#text
nodeValue:节点包含的文本
parentNode:Element
没有子节点
可以通过nodeValue或data属性访问Text节点中包含的文本，对nodeValue的修改在data反映出来
appendData(text):将text添加到节点末尾
deleteData(offset,count):从offset指定位置开始删除count字符
insertData(offset,text):在offset指定的位置插入text
replaceData(offset,count,text):用text替换从offset指定位置开始到offset、count为止的文本
splitText(offset):从offset指定的位置位置将当前文本分成两个文本节点
substringData(offset,count):提取从offset指定位置开始到offset+count为止处的字符串
1. 创建文本节点
document.createTextNode()创建新文本节点
var textNode = document.createTextNode(“<strong>Hello</strong>”);
四．Comment类型：
nodeType:8
nodeName:#comment
nodeValue:注释中的内容
parentNode:Document或Element
五．CDATASection类型：
nodeType:4
nodeName:#cdata-sectoin
nodeValue:CDATA区域中的内容
parentNode:可能是Document或Element
没有子节点
六．DocumentType类型
nodeType:10
nodeName:docType的名称
nodeValue:null
parentNode:Document
不详述
七．DocumentFragment类型
nodeType:11
nodeName:#document-fragment
nodeValue:null
parentNode:null
不详述
八．Attr类型
nodeType:11
nodeName:特性名称
nodeValue:特性的值
parentNode:null
扫一扫
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
