当前位置:Gxlcms > JavaScript > JavaScript高级程序设计DOM学习笔记_javascript技巧

JavaScript高级程序设计DOM学习笔记_javascript技巧

时间:2021-07-01 10:21:17 帮助过:2人阅读

第十章 DOM
DOM是针对XML和HTML文档的一个API:即规定了实现文本节点操控的属性、方法,具体实现由各自浏览器实现。
1. 节点层次
1) 文档节点:document,每个文档的根节点。
2) 文档元素:即元素,文档最外层元素,文档节点第一个子节点。
3) Node类型:
①Node是DOM中各种节点类型的基类型,共享相同的基本属性和方法。
□ 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);
每种节点的nodeType属性返回上述类型之一,为一常量。
通过节点nodeType属性与数字值比较,可得节点类型。
②nodeName和nodeVlue属性。
③每个节点的子节点信息保存在childNodes属性中,childNodes属性中保存一个NodeList对象。
□ NodeList对象,类数组对象,有length属性,但非Array的实例。
□ 访问NodeList中的节点,可以通过方括号,也可以使用item()方法。
var firstChild = someNode.ChildNodes[0];
var secondChild = someNode.ChildNodes.item(1);
var count = someNode.childNodes.length;
□ 将NodeList转为数组对象。
function convertToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0); //非IE
}catch(ex){
array = new Array();
for(var i = 0,len = nodes.length; i < len; i++){
array.push(nodes[i]);
}
}
return array;
}
④parentName属性:指向文档树中父节点。
⑤previousSibling属性和nextSibling属性:前一个/下一个同胞节点。
⑥firstChild属性和lastChild属性:前一个/后一个子节点。
⑦hasChildNodes()方法:含子节点返回true,反之返回false。
⑧appendChild()方法:向childNodes列表末尾添加一个子节点,返回新增节点。
⑨insertBefore()方法:两个参数:要插入的节点和作为参照的节点。返回新增节点。
⑩replaceChild()方法:两个参数:要插入的节点和要替换节点。返回新增节点。
⑾removeChild()方法:移除节点。
⑿cloneNode()方法:接受一个布尔值。true为深复制,复制节点及子节点。false为浅复制,仅复制本身节点。
⒀nomalize()方法:处理文档树中文本节点。
4) Document类型(针对document对象)
①Document类型表示文档,是HTMLDocument类型的一个实例,表示整个HTML页面。document对象是window对象的一个属性,可作全局对象访问。
②documentElement属性;该属性始终指向HTML页面中的元素。
③body属性;直接指向元素。
④doctype属性:访问,各浏览器支持不一致。用处有限。
⑤title属性:可获得和设置title的文本。
⑥URL属性:地址栏中的URL。
⑦domain属性:页面的域名(可设置,有限制)
⑧referrer属性:保存链接到当前页面的那个页面的URL
⑨getElementById()方法:传入元素的ID,返回元素节点。
⑩getElementsByTagName()方法:传入元素名,返回NodeList。
□ 在HTML中返回一个HTMLCollection对象,与NodeList类似。
□ 访问HTMLCollection对象:方括号语法,item()方法,namedItem()方法,HTMLCollection对象还可通过元素的name特性取得集合中的项。
⑾getElementsByName()方法:返回带有给定name特性的所有元素。
⑿特殊集合,这些集合都是HTMLCollection对象。
□ document.anchors:包含文档中所有带name特性的元素。
□ document.applets:包含文档中所有的元素。
□ document.forms:包含文档中所有的
元素。
□ document.images:包含文档中所有的元素。
□ document.links:包含文档中所有带href属性的元素。
⒀DOM一致性检测:document.implementation属性就为此提供相应信息和功能的对象。
□ 此对象有一个方法:hasFeature():两个参数:要检测的DOM功能的名称及版本号。
□ 功能:Core、XML、HTML、Views、StyleSheets、CSS、CSS2、Events、UIEvents、MouseEvents、MutationEvents、HTMLEvents、Range、Traversal、LS、LS-Async、Validation
⒁将输出流写入网页:write()、writeln()、open()和close()。
5) Element类型
①用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。
②可用nodeName属性或tagName属性访问元素标签名。tagName会在HTML中返回大写标签名,在XML中会原样返回。
(1)HTML元素
■所有HTML元素都由Element类型子类HTMLElement类型表示,其属性如下:
□id:元素在文档中的唯一标识符。
□title:有关元素的附加说明信息,一般通过工具提示条显示出来。
□lang:元素内容的语言代码,很少使用。
□dir:语言的方向,值为“ltr”或“rtl”,很少使用。
□className:与元素的class特性对应,即为元素指定的css类。
上述这些属性都可以用来取得或修改相应的特性值。
(2)取得特性
①getAttribute()方法:可以取得公认特性和自定义特性的值。
□任何元素的所有特性,也可以通过DOM元素本身的属性来访问。alert(div.id);alert(div.align);
□只有公认的(非自定义的)特性才会以属性的形式添加到DOM对象中。
□style特性通过getAttribute()访问得特性值CSS文本。通过属性访问得一个对象。
□onclick特性:getAttribute(),返回JS代码字符串。通过属性访问返回一个函数。
□一般通过属性取得特性,只有在取自定义特性值时,才用getAttribute()。
(3)设置特性
①setAttribute():两个参数,要设置的特性名和值。如果特性已经存在,setAttribute()会以指定的值替换现有的值;如果特性不存在,setAttribute()则创建该属性并设置相应的值。
□此方法既可以操作HTML特性也可以操作自定义特性。
□所有公认特性都是属性,因此直接给属性赋值可以设置特性的值。
□IE6、IE7中,setAttribute()设置class、style,事件处理程序会每没有任何效果。但不建议通过属性设置特性。
②removeAttribute():彻底删除元素的特性(IE6不支持)。
(4)attributes属性
①此属性包含一个NameNodeMap对象(类似NodeList的“动态”集合)。元素的每一个特性有一个Attr节点表示,每个节点保存在NameNodeMap对象中。
□getNameItem(name):返回返回nodeName属性等于name的节点
□removeNameItem(name):从列表中移除nodeName属性等于name的节点。
□setNameItem(node):向列表中添加节点,以节点的nodeName属性为索引。
□item(pos):返回位于数字pos位置的节点。
(5)创建元素
①使用document.createElement()方法可以创建新元素。参数:标签名。
②IE中createElement()可传入完整的元素标签,防止IE7以及IE6问题:
□不能设置动态创建的");
}
(6)元素的子节点
①元素的childNode属性中包含了它的所有子节点:元素、文本节点、注释或处理指令。
□一般浏览器解析childNodes时会把元素节点空间的空白符解析为文本节点,而IE不会。因此遍历执行操作需要检查nodeType属性。
For(var i= 0, len = element.childNode.length; i> len; i++){
If(element.childNodes[i].nodeType == 1){
//执行某些操作
}
}
□元素节点支持getElementByTagName()方法。
6) Text类型
①文本节点由Text类型表示,包含纯文本内容,不含HTML代码。
□不支持(没有)子节点
□nodeValue属性、data属性可访问Text节点中包含的文本。
②操作文本节点
□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为止处的字符串。
□文本节点有一个length属性,保存节点中字符的数目。而nodeValue.length和data.length中也保存着同样的值。
○修改文本节点值时字符串经HTML编码,特殊符号转义:
div.firstChild.nodeValue = "Someother"; //输出Someother③创建文本节点
□使用document.createTextNode()创建新文本节点。参数:要插入的文本(自动按HTML或XML格式编码)
④规范化文本节点
□DOM操作中可向同一父元素插入多个文本节点,但会造成混乱。
□通过node类型继承的normalize()方法可合并同一父元素上的所有文本节点。
⑤分割文本节点
□Text类型方法splitText():与node方法normalize()相反传入一个位置参数,从该位置拆分成两个文本节点,返回后面的文本节点。
□分割文本节点是从文本节点中提取数据的一种常用DOM解析技术。
7) Comment类型
□Comment类型与Text类型继承自相同的基类,因此它拥有除splitText()之外所有字符串操作方法。
□可使用document.createComment()创建注释节点。
8) CDATASection类型
□CDATASection类型只针对基于XML的文档表示CDATA区域。
□CDATASection类型继承自Text类型,拥有除splitText()之外所有方法。
□各大浏览器均无法正确解析这种类型。
9) DocumentType类型
□IE不支持
□在DOM1级中DocumentType对象不能动态创建。
□DocumentType对象保存在document.doctype中。
◇name属性:文档类型名称。
◇entities属性:文档类型描述的实体的NamedNodeMap对象。
◇notation属性:文档类型描述的符号的NamedNodeMap对象。
10) DocumentFragment类型
□DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外资源。
□文档片段不能添加到文档中,只会添加文档片段作为“仓库”保存的节点。
var fragment = document.createDomFragment();
var ul = document.getElementById("myList");
var li = null;
for(var i= 0; i<3; i++){
li = document.createElement("li");
li.appendChild(document.createTextNode("haha"));
fragment.appendChild(li);
}
ul.appendChild.appendChild(li);
□可以通过appendChild()或insertBefore()将文档片段中内容添加到文档中。
11) Attr类型
□是节点,但特性不被认为是DOM文档树的一部分。很少使用这类节点。
□Attr对象3个属性:
◇name属性:特性名称(如nodeName)
◇value属性:特性的值(如nodeValue)
◇specified属性:布尔值,用以区别特性是在代码中指定的还是默认的。
□不建议直接访问特性节点。建议用getAttribute()
setAttribute()、removeAttribute()方法。0

二、DOM扩展
1. 呈现模式
①document对象的compatMode属性
□值为“CSS1Compat”即标准模式。
□值为“BackCompact”即混杂模式。
②IE8为document对象引入documentMode新属性,返回数值:5(混杂模式)、7(仿真模式)、8(标准模式)
2. 滚动
□滚动方法都是作为HTMLElement类型的扩展存在,可再元素节点上使用。
□scrollIntoView(bool):滚动浏览器窗口或容器元素,以便在视口(viewport)中看到元素。(参数为true或省略,则滚动到顶部)。
□scrollIntoViewIfNeeded(bool):只在当前元素在视口中不可见的情况下,才滚动浏览器窗口或容器元素,让当前元素可见。(Safari和Chorme实现)。
□scrollByLines(lineCount):将元素的内容滚动指定的行数的高度,lineCount可为正/负数。(safari和Chrome可用)
3. children属性
□children属性中只包含元素的子节点中那些也是元素的节点。
□作为HTMLCollection对象。
□Firefox不支持,IE中的children集合会包含注释节点。
4. contains()方法
□应在作搜索起点的祖先节点上调用,传入要检测的节点作参数。返回true则传入节点作为当前节点后代。
□Firefox不支持contains()方法,在DOM3级实现替代的compareDocumentPosition()方法,确定两个节点间关系。Safari2.x以下版本不支持。
兼容各浏览器代码:
function contains(refNode, otherNode){
if(typeof refNode.contains == "function" && (!client.engine.webkit || client.engin.webkit >=552)){
return refNode.contains(otherNode);
}else if(tyepof refNode.compareDocumentPosition =="function"){
return !!(refNode.compareDocumentPosition(otherNode)&16);
}else{
var node = otherNode.parentNode;
do{
if(node === refNode){
Return true;
}else{
node = node.parentNode;
}
}while(node !== null);
return false;
}
}
5. 操作内容
①innerText属性
□可读取节点文档书中由浅入深的所有文本。
□通过inner.Text属性设置节点文本,会移除先前存在的所有子节点,完全改变了DOM树。
□赋给此属性的文本将自动进行HTML编码。
□Firefox不支持innerText,但支持作用类似的textContent属性。
□innerText:支持IE、Safari、Opera、Chrome
□textContent:支持Safari、Firefox、Opera、Chrome
兼容代码:
function getInnerText(element){
return (typeof element.textContent == "string")?element.textContent:element.innerText;
}

function setInnerText(element, text){
if(typeof element.textContent == "string"){
element.textContent = text;
}else{
element.innerText = text;
}
}
②innerHTML属性
□读取信息时,返回当前元素所有子节点的HTML表现。
□写入信息时,会按照指定的值创建新的DOM子树,并以该子树替换当前元素的所有子节点。
□innerHTML限制:插入输出true
⑦比较DOM范围
在有多个范围的情况下,可以使用compareBoundaryPoints()方法来确定这些范围是否有公共的边界(起点或终点)。两个参数:表示比较方式的常量和要比较的范围。
比较方式常量值:
□Range.START_TO_START(0):比较第一个范围和第二个范围起点。
□Range.START_TO_END(1):
□Range.END_TO_END(2):
□Range.END_TO_STRAT(3):
⑧复制DOM范围
□cloneRange()方法:var newRange = range.cloneRange();
⑨清理DOM范围
□调用detach()方法,从文档分离出范围。
range.detach(); //从文档中分离
range = null; //解除引用
2.IE中的范围
①概况:
□IE不支持DOM范围。支持类似的文本范围(text range)。
□文本范围处理的主要是文本(不一定是DOM节点)。通过、