客户端网页编程-第五章-文档对象模型DOM

DOM：可以通过JavaScript，以编程方式控制网页上的所有元素及属性。

1.理解DOM。

创建一个文档节点对象（document），然后从文档中出现的第一个标记开始，按照XHTML的结构层次，一个一个地加载。每加载一个标记、注释、或者属性，就将其当作节点（node）。

DOM的主要思想是HTML上每个元素分别对应DOM中的一个节点。

*文档节点Document--最顶层的节点，它代表整个 XHTML文档。每个Web文档都有一个文档节点。

*文档类型节点DocumentType--不能包含子节点。

*元素节点Element--表示起始标记和结束标记之间的内容，唯一可以同时包含属性和子节点的节点类型。

*文本节点Text--代表XHTML文档中元素的起始标记和结束标记之间，或者CDataSection内包含的普通文本。此节点类型不能包含子节点。

*属性节点--Attr--代表元素节点开始标记内指定的属性。此节点类型不能包含子节点。

节点的属性和方法：

nodeName nodeValue nodeType firstChild lastChild childNodes
ownerDocument

previousSibling nextSibling hasChildNodes() attributes
appendChild() removeChild()

replaceChild(newnode,oldnode) insetBefore(newnode,oldnode)

NodeList---节点数组。

2.使用DOM

1>.

var ohead = document.documentElement;

HTML DOM 页定义了document.body作为指向<body/>元素的指针。

var oBody =
document.body;

2>.

处理元素属性。DOM定义了三个元素方法来帮助访问特性。

getAttribute(name) setAttribute(name,newvalue)
removeAttribute(name)

这些方法可以直接处理特性值，完全的隐藏Attr节点。例如,获取某个元素的id属性：

var sid = op.getAttribute("id");

如要更改id：

op.setAttribute("id","newid");

3>.

访问指定节点。

* getElementsByTagName() 方法 ?

var oImgs = document.getElementsByTagName("img") ;

* getElementsById() 方法

var vDiv = document.getElementsById("div1");

4>.

创建和操作节点。

createAttribute(name) createComment(text) createDocumentFragment() createElement(Tagname)
createTextNode(text)

5>.

innerHTML。

可以通过innerHTML属性将HTML字符串赋值给一个元素。 ?

虽然innerHTML并不是DOM标准的一部分，但是innerHTML几乎被所有的浏览器支持。但Table和Select不支持。