资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/高程3总结#第10章DOM

高程3总结#第10章DOM

ARGUS / 1366人阅读

摘要：类型对象是的一个实例，表示整个页面，而且，对象是对象的一个属性，因此可以将其作为全局对象来访问。删除指定位置的行。创建创建创建第一行创建第二行将表格添加到文档主体中

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特性的元素

document.applets，包含文档中所有的元素，因为不再推荐使用元素，所以这个集合不再使用

document.forms，包含文档中所有的

元素

document.images，包含文档中所有的元素

document.links，包含文档中所有带href特性的元素

文档写入功能，write()、writeln()、open()和close()


  
    document.write() Example
  
  
    
The current date and time is:

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页面中的元素有两个，其中元素用于包含来自外部的文件，而