DOM
来源：互联网 发布：淘宝店进货渠道有哪些 编辑：程序博客网 时间：2024/05/17 23:14
下述内容主要讲述了《JavaScript高级程序设计（第3版）》第10章关于“DOM”。
DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次变化的节点树，允许开发人员添加、移除和修改页面的某一部分。
一、节点层次
在HTML页面中，文档元素始终都是<html>元素。
1. Node类型
JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。
（1）nodeType属性：用于表明节点的类型。
需要注意的是，在IE中不支持常量
if(someNode.nodeType === 1){ // 不使用Node.ELEMENT_NODE console.log("node is an element");}（2）nodeName和nodeValue
if(someNode.nodeType === 1){ var name = someNode.nodeName, // 元素的标签名 value = someNode.nodeValue; // null console.log(name, value);}（3）节点关系
文档中所有节点之间都存在着这样或那样的关系。节点间的各种关系可以用传统的家族关系来描述，相对于把文档树比喻成家谱。
说明：
- hasChildNodes()在节点包含一个或多个子节点的情况下返回true
- NodeList对象拥有length属性，但并不是Array实例；其是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反应在NodeList对象中。可以通过方括号，也可以使用item()方法访问NodeList中的节点。
示例：
<div id="content"> <p>李刚</p> <p>ligang</p> <p>http://blog.csdn.net/ligang2585116</p></div>var div = document.getElementById("content");console.log(div.hasChildNodes()); // trueconsole.log(div.ownerDocument); // #documentvar children = div.childNodes;console.log(children[0]); // <p>李刚</p> 注意：这里有可能是#text，格式化回车缩进导致！！console.log(children.item(1)); // <p>ligang</p>var p1 = div.firstChild;console.log(p1.parentNode); // <div id="content">…</div>console.log(p1.previousSibling); // nullconsole.log(p1.nextSibling); // <p>ligang</p>（4）操作节点
因为关系指针是只读的，所以DOM提供了一些操作节点的方法。
注意：并不是所有节点都有子节点，如果在不支持子节点的节点上调用了上述方法，将会导致错误发生。
示例：将blog元素移动到content中
<!-- 执行前 --><div id="content"> <p>李刚</p></div><p id="blog">http://blog.csdn.net/ligang2585116</p>var div = document.getElementById("content"), p = document.getElementById("blog");div.appendChild(p);<!-- 执行后 --><div id="content"> <p>李刚</p> <p id="blog">http://blog.csdn.net/ligang2585116</p></div>说明：如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。
示例：将blog作为content的第一个子元素，将company作为content的最后一个子元素
<!-- 执行前 --><div id="content"> <p>李刚</p></div><p id="blog">http://blog.csdn.net/ligang2585116</p><p id="company">ptmind</p>var content = document.getElementById("content"), blog = document.getElementById("blog"), company = document.getElementById("company");content.insertBefore(blog, content.childNodes.item(0)); // content.firstChildcontent.insertBefore(company, null);<!-- 执行后 --><div id="content"> <p>李刚</p> <p id="blog">http://blog.csdn.net/ligang2585116</p> <p id="company">ptmind</p></div>（5）其他方法
所有节点都有上述方法！
2. Document类型
JavaScript通过Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性。
document.documentElement; // 获取对<html>的引用document.body; // 获取对<body>的引用/* 以本人blog为例 */document.title; // 获取页面title信息："李刚的学习专栏 - 博客频道 - CSDN.NET"document.URL; // 获取页面完整的URL："http://blog.csdn.net/ligang2585116"document.domain; // 获取页面的域名："blog.csdn.net" document.referrer; // 获取链接到当前页面的那个页面的URL：直接访问为空！技巧：由于跨域安全限制，来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript对象了。例如，在www.xxx.com中嵌入了一框架，框架内页面加载自report.xxx.com；两者不能进行访问。可以将两个页面的document.domain值都设置为xxx.com，就可以互相访问了。
需要注意的是，浏览器对domain有一限制，即如果域名开始时松散的(xxx.com)，那么不能将它再设置为紧绷的(www.xxx.com)。
（1）查找元素
var images = document.getElementsByTagName("img");images.item(0);images.namedItem("myImage");上述两种方式都可以通过[]代替。在后台，对数值索引会调用item()，对字符串索引会调用namedItem()。
（2）特殊集合
（3）DOM一致性检测
document.implementation.hasFeature("名称", "版本号");document.implementation.hasFeature("XML", "1.0"); // true存在实现与规范不一致的情况，所以建议除了检测hasFeature()之外，还同时使用能力检测。
（4）文档写入
示例：
<span>my name is:</span>document.write("<strong>ligang</strong>"); // my name is: ligangwindow.onload = function(){ document.write("<strong>ligang</strong>"); // ligang};在文档加载结束后再调用document.write()，输出的内容将会重写整个页面。 write()、writeln()可以动态包含外部资源，需注意不能直接包含"</script>"，因为其会被解释为脚本块的结束。
document.write("<script type=\"text/javascript\" src=\"file.js\"><\/script>"); // ligang3. Element类型
Element类型用于表现XML和HTML元素。可以通过nodeName或tagName属性获取元素的标签名。
注意：在HTML中，标签名都以大写字母表示；在XML中，标签名始终与源代码中的保持一致。
（1）HTML元素的标准特性
示例： <div id="myDiv" title="ligang Demo" lang="zh" dir="ltr"
class="bd bf">http://blog.csdn.net/ligang2585116</div>
（2）特性
获取特性：dom.getAttribute("特性名") 如不存在返回null
注意有两类特殊的特性：
- style，返回CSS文本，通过属性访问则返回一个对象；
- onclick等事件处理程序，返回相应代码的字符串。
示例：
<a href="javscript:;" style="background-color: grey;text-underline: none;" onclick="function(){console.log('la')}">http://blog.csdn.net/ligang2585116</a>var a = document.getElementsByTagName("a")[0];a.getAttribute("style"); // "background-color: grey;text-underline: none;"a.style; // CSSStyleDeclaration {0: "background-color", all: ""…}a.getAttribute("onclick"); // "function(){console.log('la')}"设置特性：dom.setAttribute("特性名","值")
（3）attributes属性
attributes属性中包含一个NamedNodeMap
示例：设置属性
// 方式一：示例：setNamedItemvar target = document.createAttribute("target");target.nodeValue = "_blank";a.attributes.setNamedItem(target);// 方式二：setAttributea.setAttribute("target", "_blank");（5）创建元素
document.createElement("元素名/完整元素");创建新元素的同时，也为新元素设置了ownerDocument属性。
示例：创建元素并添加到文档树
var a = document.createElement("a");a.href = "http://blog.csdn.net/ligang2585116";a.text = "http://blog.csdn.net/ligang2585116";document.body.appendChild(a);（6）元素的子节点
元素可以有任意数量的子节点和后代节点。
示例：为了兼容浏览器差异
for(var i = 0, len = element.childNodes.length; i < len; i++){ if(element.childNodes[i].nodeType === 1){ // 执行某些操作 }}4. Text类型
文本节点由Text类型表示，包含纯文本。纯文本可以包含转义后的HTML字符，但不能包含HTML代码。
（1）创建文本节点：document.createTextNode("文本")
（2）规范化文本节点：在一个包含两个或多个文本节点元素上调用normalize()，则将会所有文本节点合并成一个节点。
（3）分割文本节点：将一个文本节点分成两个文本节点，按指定的位置分割nodeValue值。
示例：规范化文本节点
var div = document.getElementById("content");var textNode = document.createTextNode("Hello"), anotherNode = document.createTextNode("Ligang");div.appendChild(textNode);div.appendChild(anotherNode);console.log(div.childNodes.length); // 2div.normalize();console.log(div.childNodes.length); // 1var newNode = div.firstChild.splitText(5); // "Ligang"console.log(div.childNodes.length); // 25. Comment类型
注释在DOM中是通过Comment类型来表示的。
Comment类型与Text类型继承自相同的基类，因此它拥有除了splitText()之外的所有方法，当然也可通过nodeValue或data属性来取得注释的内容。
6. DocumentFragement类型
DocumentFragement类型中没有对应的标记，DOM规定文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。可以当做“仓库”使用。
示例：
var fragment = document.createDocumentFragment();var li = null;for(var i = 0; i < 5; i++){ li = document.createElement("li"); li.appendChild(document.createTextNode("Item "+ (i+1))); fragment.appendChild(li);}// 文档片段的所有子节点都被删除并转移到<ul>元素中document.getElementById("myUl").appendChild(fragment);7. 其他类型
CDATASection类型、DocumentType类型很少用到，这里不再赘述。
二、DOM操作技术
1. 动态脚本
在元素添加到页面之前，是不会下载外部文件的。（不同于image）
相关内容请查看：事件:事件类型-UI事件
示例：动态加载JavaScript文件
function loadScript(url){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script);}示例：动态加载JavaScript代码
function loadScriptString(code){ var script = document.createElement("script"); script.type = "text/javascript"; try{ script.appendChild(document.createTextNode(code)); }catch (e){ script.text = code; // 兼容IE } document.body.appendChild(script);}2. 动态样式
同动态加载脚本类似，添加到页面之后才会加载资源。
示例：动态加载CSSt文件
function loadStyle(url){ var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = url; document.head.appendChild(link);}示例：动态加载CSS代码
function loadStyleString(code){ var style = document.createElement("style"); style.type = "text/css"; try{ style.appendChild(document.createTextNode(code)); }catch (e){ style.stylesheet.cssText = code; // 兼容IE } document.head.appendChild(style);}3. 操作表格
为了方便构建表格，HTML DOM还为<table>、<tbody> 和 <tr>元素添加了一些属性：
为<teble>元素添加的属性和方法：
<caption>元素的指针 tHead (若有)保存着对<tHead>元素的指针 tFoot (若有)保存着对<tFoot>元素的指针 tBodies 一个所有<tbody>元素的HTMLCollection rows 一个所有行的HTMLCollection createCaption 创建<caption>元素，放到表格中，返回引用 createTHead() 创建<thead>元素，放到表格中，返回引用 createTFoot() 创建<tfoot>元素，放到表格中，返回引用 deleteCaption() 删除<caption>元素 deleteTHead() 删除<thead>元素 deleteTFoot() 删除<tfoot>元素 insertRow(pos) 向rows集合中的指定位置 插入一行 deleteRow(pos) 删除指定位置的一行<tbody>元素添加的属性和方法：
<tbody>元素中行的HTMLCollection insertRow(pos) 向rows集合中指定位置插入一行，返回新行的引用 deleteRow(pos) 删除指定位置的行<tr>元素添加的属性和方法：
<tr>元素中的单元格的HTMLCollection insertCell(pos) 向cells集合中的指定位置插入一个单元格，返回新单元格引用 deleteCell(pos) 删除指定位置的单元格总结：NodeList、NameNodeMap和HTMLColletction三个集合都是动态的。应尽量减少访问NodeList的次数，因为每次访问NodeList都会运行一次基于上下文档的查询。可以考虑将从NodeList中取得的值缓存起来！
- DOM
- DOM
- dom
- dom
- DOM
- dom
- DOM
- DOM
- DOM
- DOM
- DOM
- dom
- dom
- Dom
- dom
- DOM
- ＤＯＭ
- DOM
- 位运算
- 实用！开发者的 Vim 插件（一）
- 粒子群优化算法——java简单实现
- 实现二分查找函数
- HBASE配置项完整版
- DOM
- 解决ScrollView中嵌套Gridview显示不正常的问题
- 快速开发EasyUI Datagrid报表 thinkphp框架 ppt和视频教程
- Java集合类详解
- 名家博客收集
- Scikit-learn：模型评估Model evaluation 之绘图
- 反射机制
- 【Linux4.1.12源码分析】协议栈gro收包之MAC层处理
- 想运营好社交媒体帐号？这11条提醒可别忘了
