// DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点;
一 DOM类型
1 类型名 说明 2 Node 表示所有类型值的统一接口,IE不支持; 3 Document 表示文档类型; 4 Element 表示元素节点类型; 5 Text 表示文本节点类型; 6 Comment 表示文档中的注释类型; 7 CDATASection 表示CDATA区域类型; 8 DocumentType 表示文档声明类型; 9 DocumentFragment 表示文档片段类型; 10 Attr 表示属性节点类型;
1.Node类型
1 // DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现; 2 // 这个Node接口在JavaScript中是作为Node类型实现的; 3 // 除IE之外,在其他所有浏览器中都可以访问到这个类型;
2.Document类型
1 // Document类型表示文档,或文档的根节点,而这个节点是隐藏的,没有具体的元素标签; 2 document; // document; 3 document.nodeType; // 9;类型值; 4 document.childNodes[0]; // DocumentType;第一个子节点对象; 5 document.childNodes[1]; // HTMLHtmlElement; 对象; 6 7 // 如果想直接得到<html>标签的元素节点对象HTMLHtmlElement,可以直接使用documentElement即可; 8 document.documentElement; // HTMLHtmlElement; 9 10 // 很多时候需要得到<body>标签,之前常用的是:document.getElementsByTagName('body')[0]; 11 document.body; // HTMLBodyElement; 12 13 // 在<html>之前还有一个文档声明:<!DOCTYPE>会作为浏览器的第一个节点来处理; 14 document.doctype; // DocumentType; 15 16 // 在Document中有一些遗留的属性和对象集合,可以快速的帮助我们精确的处理任务; 17 // 属性 18 document.title; // 获取和设置<title>标签的值; 19 document.URL; // 获取URL路径; 20 document.domain; // 获取域名;
// 当页面中包含来自其他子域的框架或内嵌框架时,能够设置document.domain就非常方便了;
// 由于跨域安全限制,来自不同子域的页面无法通过JavaScript通信;
// 而通过将每个页面的document.domain设置为相同的值,这些页面就可以相互访问对方的JavaScript对象了;
21 document.referrer; // 保存着链接到当前页面的那个页面的URL; 22 // 对象集合 23 document.anchors; // 获取文档中带name属性的<a>元素集合; 24 document.links; // 获取文档中带href属性的<a>元素集合; 25 document.forms; // 获取文档中<form>元素集合; 26 document.images; // 获取文档中<img>元素集合;
3.Element类型
1 // Element类型用于表现HTML中的元素节点.在上一章中,介绍了对元素节点进行查找/创建等操作; 2 // 元素节点的nodeType为1;nodeName为元素的标签名; 3 // 元素节点对象在非IE浏览器可以返回它具体元素节点的对象类型; 4 元素名 类型 5 HTML HTMLHtmlElement; 6 DIV HTMLDivElement; 7 BODY HTMLBodyElement; 8 P HTMLParamElement;
4.Text类型
1 // Text类型用于表现文本节点类型,文本不包含HTML,或包含转以后的HTML;文本节点的nodeType为3; 2 // 在同时创建两个同一级别的文本节点的时候,会产生分离的两个节点; 3 var box = document.createElement('div'); 4 var text1 = Document.createTextNode('Mr'); 5 var text2 = Document.createTextNode('Lee!'); 6 box.appendChild(text1); 7 box.appendChild(text2); 8 document.body.appendChild(box); 9 alert(box.childNodes.length); // =>2;两个文本节点; 10 11 // 把两个同邻的文本节点合并在一起,使用normalize()即可; 12 box.normalize(); // 合并成一个节点; 13 14 // 将一个节点实现分离; 15 box.firstChild.splitText(3); // 分离一个节点; 16 17 // Text还提供一些别的DOM操作的方法 18 var box = document.getElementById('box'); 19 box.firstChild.deleteData(0,2); // 删除从0位置开始的2个字符; 20 box.firstChild.insertData(0,'Hello'); // 从0位置开始添加指定字符; 21 box.firstChild.replaceData(0,2,'Miss'); // 从0位置替换掉2个指定字符; 22 box.firstChild.substringData(0,2); // 从0位置获取2个字符,直接输出; 23 alert(box.firstChild.nodeValue); // 输出操作后的结果;
5.Comment类型
1 // Comment类型表示文档中的注释,nodeType是8,nodeName是#comment,nodeValue是注释的内容; 2 var box = document.getElementById('box'); 3 alert(box.firstChild); // Comment;
6.Attr类型
1 // Attr类型表示文档元素中的属性;nodeType为11;nodeName为属性名,nodeValue为属性值;详细内容在上一章;
二 DOM扩展
1.呈现模式
1 // 从IE6开始区分标准模式和混杂模式(怪异模式),主要看文档的声明; 2 // IE为document对象添加了一个名为compatMode属性,这个属性可以识别IE浏览器的文档处于什么模式; 3 // 如果是标准模式,则返回CSS1Compat;如果是混杂模式则返回BackCompat; 4 if(document.compatMode == 'CSS1Compat'){ 5 alert(document.documentElement.clientWidth); 6 }else{ 7 alert(document.body.clientWidth); 8 }
2.滚动
1 // DOM提供了一些滚动页面的方法 2 document.getElementById('box').scrollIntoView(); // 设置指定可见;
3.children属性
1 // 由于子节点空白问题,IE和其他浏览器解释不一致;如果只想得到有效子节点,可以使用children属性;这个属性是非标准的; 2 var box = docuemnt.getElementById('box'); 3 alert(box.children.length); // 得到有效子节点数目;
4.contains()方法
1 // 判断一个节点是不是另一个节点的后代,可以使用contains()方法; 2 var box = document.getElementById('box'); 3 alert(box.contains(box.firstChild)); // =>true;
三 DOM操作内容
1.innerText属性
1 document.getElementById('box').innerText; // 获取文本内容(如有html直接过滤掉); 2 document.getElementById('box').innerText = 'Mr.Lee'; // 设置文本(如有html转义); 3 // PS:除了Firefox之外,其他浏览器均支持这个方法;Firefox的DOM3级提供了另外一个类似的属性:textContent; 4 // 兼容方法 5 function getInnerText(element){ 6 return (typeof element.textContent == 'string')?element.textContent:element.innerText; 7 } 8 function setInnerText(element,text){ 9 if(typeof element.textContent == 'string'){ 10 element.textContent = text; 11 }else{ 12 element.innerText = text; 13 } 14 }
2.innerHTML属性
1 // innerHTML属性可以解析HTML; 2 document.getElementById('box').innerHTML; // 获取文本(不过滤HTML); 3 document.getElementById('box').innerHTML = '<b>123</b>'; // 加粗的123; 4 // 虽然innerHTML可以插入HTML,但本身还是有一定的限制,也就是所谓的作用域元素,离开这个作用域就无效了; 5 box.innerHTML = "<script>alert('Lee');</script>"; // <script>元素不能被执行; 6 box.innerHTML = "<style>background:red;</style>"; // <style>元素不能被执行;
3.outerText
1 // outerText在取值的时候和innerText一样,同时Firefox不支持; 2 // 而且赋值方法相当危险,它不单替换文本内容,还将元素直接抹去; 3 var box = document.getElementById('box'); 4 box.outerText = '<b>123</b>'; 5 alert(document.getElementById('box')); // =>null; 不建议使用;
4.outerHTML
1 // outerHTML属性在取值和innerHTML一致,但和outerText一样,赋值之后将元素抹去; 2 var box = document.getElementById('box'); 3 box.outerHTML = '123'; 4 alert(document.getElementById('box')); // null; 5 6 // PS:关于最常用的innerHTML属性和节点操作方法的比较;在插入大量HTML标记时,使用innerHTML的效率明显要高很多; 7 // 因为在设置innerHTML时,会创建一个HTML解析器,这个解析器是浏览器级别的;因此执行JavaScript会快得多; 8 // 但是,创建和销毁HTML解析器也会带来性能损失,最好控制在最合理的范围内; 9 for(var i=0; i<10; i++){ 10 ul.innerHTML = '<i>item</i>'; // 避免频繁; 11 } 12 // 完善 13 for(var i=0; i<10; i++){ 14 a = '<li>item</i>'; // 临时保存; 15 } 16 ul.innerHTML = a;
四 小结
1 // DOM是语言中立的API,用于访问和操作HTML和XML文档; 2 // DOM1级将HTML和XML文档形象地看作一个层次化的节点树,可以使用JavaScript来操作这个节点树,进而改变底层文档的外观和结构; 3 // DOM由各种节点构成,简要总结如下: 4 // 1.最基本的节点类型是Node,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自Node; 5 // 2.Document类型表示整个文档,是一组分层节点的根节点;在JavaScript中,document对象是Document的一个实例; 6 // 使用document对象,有很多种方式可以查询和获取节点; 7 // 3.Element节点表示文档中的所有HTML或XML元素,可以用来操作这些元素的内容和属性; 8 // 4.另外还有一些节点类型,分别表示文本内容/注释/文档类型/CDATA区域和文档片段;