Javascript开发之七DOM对象的操作

操作Dom对象

 var a=document.body.getElemensByTagName("*')  ;  得到body中的所有元素．

getElementById();

getElementsByTagName();// Array

getElementsByName();// Arrary;

getAttribute("") 得到属性名       setAttribute("","");设置属性名

alert(document.nodeType)=9  ; 文档节点类形    元素节点nodeType=1  　 文档节点类形nodeType=3　如下：

• Node.ELEMENT_NODE (1)　　 元素节点
• Node.ATTRIBUTE_NODE (2)　属性节点
• Node.TEXT_NODE (3)　　　文档节点
• Node.CDATA_SECTION_NODE (4)
• Node.ENTITY_REFERENCE_NODE (5)
• Node.ENTITY_NODE (6)
• Node.PROCESSING_INSTRUCTION_NODE (7)
• Node.COMMENT_NODE (8)
• Node.DOCUMENT_NODE (9)
• Node.DOCUMENT_TYPE_NODE (10)
• Node.DOCUMENT_FRAGMENT_NODE (11)
• Node.NOTATION_NODE (12)

 

特性/方法	类型/返回类型	说 明
nodeName	String	节点的名字；根据节点的类型而定义,元素节点返回tagName，文本节点返回#text,属性节点返回属性名
nodeValue	String	节点的值；根据节点的类型而定义.元素节点此属性为空，文本节点些属性即为节点中的字符串，属性节点返回属性值
nodeType	Number	节点的类型常量值之一
ownerDocument	Document	指向这个节点所属的文档
firstChild	Node	指向在childNodes列表中的第一个节点
lastChild	Node	指向在childNodes列表中的最后一个节点
childNodes	NodeList	所有子节点的列表
previousSibling	Node	指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null
nextSibling	Node	指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null
hasChildNodes()	Boolean	当childNodes包含一个或多个节点时，返回真
attributes	NamedNodeMap	包含了代表一个元素的特性的Attr对象；仅用于Element节点
appendChild(node)	Node	将node添加到childNodes的末尾
removeChild(node)	Node	从childNodes中删除node
replaceChild (newnode,oldnode)	Node	将childNodes中的oldnode替换成newnode
insertBefore (newnode,refnode)	Node	在childNodes中的refnode之前插入newnode

 

 

 

除节点外，DOM还定义了一些助手对象，它们可以和节点一起使用，但不是DOM文档必有的部分。

• NodeList——节点数组，按照数值进行索引；用来表示一个元素的子节点。比如childNodes。NodeList有个length属性表示节点数量
• NamedNodeMap——同时用数值和名字进行索引的节点表；用于表示元素特性。比如元素的attributes。NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。

这些助手对象为处理DOM文档提供附加的访问和遍历方法。

属性节点

正如前面提到的，即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有Element节点才能有特性。Element节点的attributes属性其实是NamedNodeMap，它提供一些用于访问和处理其内容的方法：

• getNamedItem(name)——返回nodeName属性值等于name的节点；
• removeNamedItem(name)——删除nodeName属性值等于name的节点；
• setNamedItem(node)——将node添加到列表中，按其nodeName属性进行索引；
• item(pos)——像NodeList一样，返回在位置pos的节点；

请记住这些方法都是返回一个Attr节点，而非特性值。

当NamedNodeMap用于表示特性时，其中每个节点都是Attr节点，它的nodeName属性被设置为特性名称，而nodeValue属性被设置为特性的值。示例：

	<p id="p1" style="background-color:red;" title="P!!!">Some Text!</p>
	var p1 = document.getElementById("p1");
	//访问ID属性
	alert(p1.attributes.getNamedItem("id")).nodeValue;
	//也可以用数值来访问ID属性
	alert(p1.attributes.item(0)).nodeValue;
	//也可以改变它的值
	p1.attributes.getNamedItem("id").nodeValue = "newP1";

Attr节点也有一个完全等同于（同时也完全同步于）nodeValue属性的value属性，并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。但这些方法都比较复杂，所以DOM又定义了三个元素方法来帮助访问特性：

• getAttribute(name)——等于attributes.getNamedItem(name).value
• setAttribute(name, newValue)——等于attribute.getNamedItem(name).value = newValue
• removeAttribute(name)——等于attributes.removeNamedItem(name)

NodeList

事实上我们早接触过NodeList了

	var allTags = document.getElementsByTagName("*");
	alert(allTags.item(1).tagName);//访问了第二个元素
	alert(allTags[0]);//在JavaScript可以这样访问第一个元素，但这只能是JavaScript里正常运行

　getElementsByTagName与getElementsByName都返回NodeList，可以使用item(index)方法访问其中的内容，在JavaScript中还可使用数组形式的下标访问！

　　

动态创建一个段落示例

	var p = document.createElement("p");//创建一个元素节点，传入标签名
	var txt = document.createTextNode("创建文本节点,传参数即是文本内容");
	p.appendChild(txt);//将txt所引用的文本节点插入p到p的最后面(在这里p是空的)
	//直到现在，页面不会出现任何内容，必须将创建的节点插入到文档中
	document.body.appendChild(p);//p将出现在最后
	

移动，删除节点方法及注意事项——appendChild,removeChild,replaceChild,insertBefore

	var p1 = document.getElementById("p1");
	document.body.appendChild(p1);//p1将会被作为body的最后一个子节点，然而页面上仍只有一个p
	p1.parentNode.removeChild(p1);//removeChild必须是要删除的节点的父节点调用
	//p1将会从页面上消失，然而它并没有完全消失，我们还可以再将其插入文档
	document.body.appendChild(p1);//因为变量p1包含了节点的引用
	var p2 = document.getElementById("p2");
	p2.parentNode.replaceChild(p1,p2);//p2将会被替换成p1，p2将消失
	//而p1将从原来的位置移到p2的位置

克隆节点——cloneNode

基于上面的原因，DOM为我们提供了一个克隆节点的方法用于生成一个节点的副本

	var p1 = document.getElementById("p1");
	var p2 = p1.cloneNode();
	document.body.appendChild(p2);//页面上将会多出一个段落,不过段落中什么都没有
	p2 = p1.cloneNode(true);//使用参数true表示克隆节点时包含子节点
	document.body.appendChild(p2);