DOM
节点层次
Node类型
- DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现
-
节点类型由在Node类型中定义的12个数值常量来表示，任何节点类型必居其一
- Node.ELEMENT_NODE();
- Node.ATTRIBUTE_NODE();
- Node.TEXT_NODE();
- Node.CDATA_SECTION_NODE();
- Node.ENTITY_REFERENCE_NODE();
- Node.ENTITY_NODE();
- Node.PROCESSING_INSTRUCTION_NODE();
- Node.COMMENT_NODE();
- Node.DOCUMENT_NODE();
- Node.DOCUMENT_TYPE_NODE();
- Node.DOCUMENT_FRAGMENT_NODE();
- Node.NOTATION_NODE();
- 使用nodeName和nodeValue检测节点类型
-
节点关系，保存NodeList对象，是一种数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
-
childNodes
var firstChild=someNode.childNodes(); var secondChild=someNode.childNodes.item(); var count=someNode.childNodes.length(); - parentNode，每个节点都有parentNode属性，属性指向文档树的节点，包含在childNodes列表中的所有节点都具有相同的父节点，因此它们的parentNode属性都指向同一个节点。此外包含在childNodes列表中的每个节点相互之间都是同胞节点。
- 通过使用列表中每个节点的previousSibling和nextSibling属性可以访问同一列表中的其他节点。列表中第一个节点的previousSibling属性值为null，而列表中最后一个节点nextSibling属性的值同样也为null
- 父节点的firstChild和lastChild属性分别指向childNodes列表中的第一个和最后一个节点。
-
-
操作节点
-
appendChild()，向childNodes列表的末尾添加一个节点。添加节点之后，childNodes的新曾节点、父节点以及以前的最后一个子节点的关系都会相应地得到更新
//someNode 有多个子节点 var returnedNode = someNode.appendChild(someNode.firstChild); alert(returnedNode == someNode.firstChild); //false alert(returnedNode == someNode.lastChild); //true -
insertBefore()，把节点放在childNodes列表中某个特定的位置上。接收两个参数，要插入的点和作为参照的节点
//插入后成为最后一个子节点 returnedNode = someNode.insertBefore(newNode, null); alert(newNode == someNode.lastChild); //true //插入后成为第一个子节点 var returnedNode = someNode.insertBefore(newNode, someNode.firstChild); alert(returnedNode == newNode); //true alert(newNode == someNode.firstChild); //true //插入到最后一个子节点前面 returnedNode = someNode.insertBefore(newNode, someNode.lastChild); alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true -
replaceChild()，替换节点。接收两个参数，要插入的节点和要替换的节点，要替换的节点将由这个方法返回并从文档树中移除，同时由要插入的节点占据其位置
//替换第一个子节点 var returnedNode = someNode.replaceChild(newNode, someNode.firstChild); //替换最后一个子节点 returnedNode = someNode.replaceChild(newNode, someNode.lastChild); -
removeChild()，移除节点，接收一个参数，即要移除的节点。
//移除第一个子节点 var formerFirstChild = someNode.removeChild(someNode.firstChild); //移除最后一个子节点 var formerLastChild = someNode.removeChild(someNode.lastChild); - cloneNode()，接收一个布尔值参数，表示是否执行深复制，在参数为true的情况下，执行深复制，也就是复制节点及其整个子节点树，在参数为false的情况下，执行浅复制，即只复制节点本身。
-
Document类型
-
document对象是HTMLDocument的一个实例，表示整个HTML页面，而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。
- nodeType值为9
- nodeName值为"#document"
- nodeValue值为null
- parentNode值为null
- ownerDocument值为null
-
document对象有一些标准的Document对象所没有的属性，这些属性提供了document对象所表现的网页的一些信息
//取得文档标题 var originalTitle = document.title; //设置文档标题 document.title = "New page title"; //取得完整的 URL var url = document.URL; //取得域名 var domain = document.domain; //取得来源页面的 URL var referrer = document.referrer; - 查找元素，getElementById()、getElementByTagName()和getElementByName()
-
特殊集合
- document.anchors，包含文档中所有带name特性的<a>元素
- document.applets，包含文档中所有的<applet>元素，因为不再推荐使用<applet>元素，所以这个集合不再使用
- document.forms，包含文档中所有的<form>元素
- document.images，包含文档中所有的<img>元素
- document.links，包含文档中所有带href特性的<a>元素
-
文档写入功能，write()、writeln()、open()和close()
<html> <head> <title>document.write() Example</title> </head> <body> <p>The current date and time is: <script type="text/javascript"> document.write("<strong>" + (new Date()).toString() + "</strong>"); </script> </p> </body> </html>
Element类型
-
用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问
- nodeType值为1
- nodeName值为元素的标签名
- nodeValue值为null
- parentNode可能是Document或Element
-
HTML元素存在一些标准特性
- id，元素在文档中唯一的标识符
- title，有关元素的附加说明信息，一般通过工具提示条显示出来
- lang，元素内容的语言代码，很少使用
- dir，语言的方向
- className，与元素的class特性对应
-
取得特性，设置属性，移除属性。getAttribute()、setAttribute()和removeAttribute()
var div = document.getElementById("myDiv"); alert(div.getAttribute("id")); //"myDiv" alert(div.getAttribute("class")); //"bd" alert(div.getAttribute("title")); //"Body text" alert(div.getAttribute("lang")); //"en" alert(div.getAttribute("dir")); //"ltr" div.setAttribute("id", "someOtherId"); div.setAttribute("class", "ft"); div.setAttribute("title", "Some other text"); div.setAttribute("lang","fr"); div.setAttribute("dir", "rtl"); div.removeAttribute("class"); -
attribute属性
var id = element.attributes.getNamedItem("id").nodeValue; var id = element.attributes["id"].nodeValue; element.attributes["id"].nodeValue = "someOtherId"; var oldAttr = element.attributes.removeNamedItem("id"); element.attributes.setNamedItem(newAttr); - 创建元素，createElement()，标签名在HTML文档中不区分大小写，在XML文档中，区分大小写。
Text类型
-
包含的是照字面解释的纯文本的内容
- nodeType值为3
- nodeName值为"#text"
- nodeValue值为节点所包含的文本
- parentNode是一个Element
- 不支持子节点
-
操作方法
- 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为止处的字符串
-
创建文本节点document.createTextNode()
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element); -
规范化文本节点normalize()
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); var anotherTextNode = document.createTextNode("Yippee!"); element.appendChild(anotherTextNode); document.body.appendChild(element); alert(element.childNodes.length); //2 element.normalize(); alert(element.childNodes.length); //1 alert(element.firstChild.nodeValue); // "Hello world!Yippee!" -
分割文本节点splitText()
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element); var newNode = element.firstChild.splitText(5); alert(element.firstChild.nodeValue); //"Hello" alert(newNode.nodeValue); //" world!" alert(element.childNodes.length); //2
Comment类型
-
注释在DOM中通过Comment类型来表示
- nodeType值为8
- nodeName值为"#comment"
- nodeValue值是注释的内容
- parentNode可能是Document或Element
- 不支持子节点
- COmment类型与Text类型继承自相同的基类，因此它拥有splitText()之外的所有字符串操作方法。与Text类型相似，也可以通过nodeValue或data属性类取得注释的内容。
-
使用document.createCommet()并为其传递注释文本也可以创建注释节点
var comment=document.createComment("A comment")
CDATASection类型
-
与Comment类似，继承自Text类型，拥有除splitText()之外的所有字符串操作方法
- nodeType值为4
- nodeName值为"#cdata-section"
- nodeValue值为CDATA区域中的内容
- parentNode可能是Document或Element
DocumentType类型
-
包含着与文档的doctype有关的所有信息
- nodeType值为10
- nodeName值为doctype的名称
- nodeValue值为null
- parentNode是Document
- 不支持子节点
DocumentFragment类型
-
轻量级文档，可以包含和控制节点，不会像完整的文档那样占用额外的资源
- nodeType值为11
- nodeName值为"#document-fragement"
- nodeValue值为null
- parentNode值为null
Attr类型
-
特性是存在于元素的attribute属性中的节点
- nodeType值为2
- nodeName值是特性的名称
- nodeValue值为特性的值
- parentNode值为null
- 在HTML中不支持子节点
- 在XML中子节点可以是Text或EntityReference
DOM操作技术
动态脚本
- 页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本。两种方式创建：插入外部文件和直接插入JavaScript代码
动态样式
- 能够把CSS样式包含到HTML页面中的元素有两个，其中<ling>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式
操作表格
-
属性和方法
- caption ：保存着对 <caption> 元素（如果有）的指针。
- tBodies ：是一个 <tbody> 元素的 HTMLCollection 。
- tFoot ：保存着对 <tfoot> 元素（如果有）的指针。
- tHead ：保存着对 <thead> 元素（如果有）的指针。
- rows ：是一个表格中所有行的 HTMLCollection 。
- createTHead() ：创建 <thead> 元素，将其放到表格中，返回引用。
- createTFoot() ：创建 <tfoot> 元素，将其放到表格中，返回引用。
- createCaption() ：创建 <caption> 元素，将其放到表格中，返回引用。
- deleteTHead() ：删除 <thead> 元素。
- deleteTFoot() ：删除 <tfoot> 元素。
- deleteCaption() ：删除 <caption> 元素。
- deleteRow(pos) ：删除指定位置的行。
- insertRow(pos) ：向 rows 集合中的指定位置插入一行。
为 <tbody> 元素添加的属性和方法如下。 - rows ：保存着 <tbody> 元素中行的 HTMLCollection 。
- deleteRow(pos) ：删除指定位置的行。
- insertRow(pos) ：向 rows 集合中的指定位置插入一行，返回对新插入行的引用。
为 <tr> 元素添加的属性和方法如下。
//创建 table var table = document.createElement("table"); table.border = 1; table.width = "100%"; //创建 tbody var tbody = document.createElement("tbody"); table.appendChild(tbody); // 创建第一行 tbody.insertRow(0); tbody.rows[0].insertCell(0); tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1")); tbody.rows[0].insertCell(1); tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1")); // 创建第二行 tbody.insertRow(1); tbody.rows[1].insertCell(0); tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2")); tbody.rows[1].insertCell(1); tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2")); //将表格添加到文档主体中 document.body.appendChild(table);
扫一扫
889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
