javaScript DOM特性/方法

http://www.javaeye.com/topic/187246

 

❑ DOM的核心: Node
由于DOM是树形结构,所以一个节点被抽象为对象Node,这是DOM的核心对象:
Node的种类一共有12种,通过Node.nodeType的取值来确定(为1-12),分为:

Js代码 
  1. Node.ELEMENT_NODE (1)  
  2. Node.ATTRIBUTE_NODE (2)  
  3. Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本,它没有子节点  
  4. Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode  
  5. Node.ENTITY_REFERENCE_NODE (5)   
  6. Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>,无子节点  
  7. Node.PROCESSING_INSTRUCTION_NODE (7) //PI,无子节点  
  8. Node.COMMENT_NODE (8)  
  9. Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点  
  10. Node.DOCUMENT_TYPE_NODE (10) //DTD,<!DOCTYPE………..>  
  11. Node.DOCUMENT_FRAGMENT_NODE (11)  
  12. Node.NOTATION_NODE (12) //DTD中的Nation定义   

❑ Node接口包含的特性/方法
节点的属性
nodeName 属性将返回一个字符串,其内容是给定节点的名字。如果节点是元素节点,返回这个元素的名称;如果是属性节点,返回这个属性的名称;如果是文本节点,返回一个内容为#text 的字符串;

nodeType 属性将返回一个整数,这个数值代表给定节点的类型
nodeValue 属性将返回给定节点的当前值.如果节点是元素节点,返回null;如果是属性节点,返回这个属性的名称;如果是文本节点,返回文本节点的内容;

ownerDocument 指向这个节点所属的文档
attributes 包哈勒代表一个元素的特性的Attr对象;仅用于Element节点

childNodes 所有子节点的列表
firstChild 指向在childNodes列表中的第一个节点
lastChild 指向在childNodes列表中的最后一个节点
nextSibling 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为null
previousSibling 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null
parentNode 返回一个给定节点的父节点

❑ hasChildNodes() 当childNodes包含一个或多个节点时,返回真
❑ appendChild(node) 将node添加到childNodes的末尾
❑ removeChild(node) 将node从childNodes中删除

❑ insertBefore(newnode refnode) 在childNodes中的refnode之前插入newnode

Js代码 
  1. var container = document.getElementById("content");  
  2. var message = document.getElementById("fineprint");  
  3. var para = document.createElement("p");  
  4. container.insertBefore(para,message);  

  ❑ replaceChild(newnode,oldnode)将childNodes中的oldnode替换成newnode

Js代码 
  1. var container = document.getElementById("content");  
  2. var message = document.getElementById("fineprint");  
  3. var para = document.createElement("p");  
  4. container.replaceChild(para,message);  

 ❑ 获得Node:

Js代码 
  1. /* 通过document对象 */  
  2. var oHtml = document.documentElement;  
  3.   
  4.   
  5. /* 得到<head />和<body /> */  
  6. var oHead = oHtml.firstChild;  
  7. var oBody = oHtml.lastChild;  
  8. /* 可以用这种方式 */  
  9. var oHead = oHtml.childNodes[0];  
  10. var oBody = oHtml.childNodes[1];  
  11. /* 也可以使用方法获取数组的索引值 */  
  12. var oHead = oHtml.childNodes.item(0);  
  13. var oBody = oHtml.childNodes.item(1);  
  14. /* 使用document.body来得到<body /> */  
  15. var oBody = document.body;  

❑ createElement(element)
创建一个指定标签名创建一个新的元素节点,返回值为指向新建元素节点的引用指针。
eg) var para = document.createElement("p");
document.body.appendChild(para);

❑ createTextNode()
创建一个包含着给定文本的新文本节点,返回一个指向新建文本节点的引用指针:
reference = document.createTextNode()
参数为新建文本节点所包含的文本字符串

Js代码 
  1. var message = document.createTextNode("hello world");  
  2. var container = document.createElement("p");  
  3. container.appendChild(message);  
  4. document.body.appendChild(container);  

 ❑ cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本,参数为 true 或者 false,true 表示同时复制该节点的子节点,false 则不复制任何子节点。

Js代码 
  1. var para = document.createElement("p");  
  2. var message = document.createTextNode("hello world");  
  3. para.appendChild(message);  
  4. document.body.appendChild(para);  
  5. var newpara = para.cloneNode(true);  
  6. document.body.appendChild(newpara);  


❑ 检测节点类型
通过使用nodeType特性检验节点类型:
alert(document.nodeType); //outputs "9"
alert(document.documentElement.nodeType); //outputs "1"
这个例子中,document.nodeType返回9,等于Node.DOCUMENT_NODE;同时document. documentElement.nodeType返回1,等于Node.ELEMENT_NODE。

也可以用Node常量来匹配这些值:
alert(document.nodeType == Node.DOCUMENT_NODE); //true
alert(document.documentElement.nodeType == Node.ELEMENT_NODE); //true

这段代码可以在Mozilla 1.0+、Opera 7.0+和Safari 1.0+上正常运行。但是IE不支持这些常量,所以这些代码在IE上会产生错误。


❑ 处理特性
即便Node接口已具有attributes方法,且已被所有类型的节点继承,然而,只有Element节点才能有特性。
Element节点的attributes属性其实是NamedNodeMap,它提供一些用于访问和处理其内容的方法:
getNamedItem(name) 返回nodeName属性值等于name的节点;
removeNamedItem(name) 删除nodeName属性值等于name的节点;
setNamedItem(node) 将node添加到列表中,按其nodeName属性进行索引;
item(pos)  像NodeList一样,返回在位置pos的节点;

请记住这些方法都是返回一个Attr节点,而非特性值。
NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。

当NamedNodeMap用于表示特性时,其中每个节点都是Attr节点,它的nodeName属性被设置为特性名称,而nodeValue属性被设置为特性的值。
例如,假设有这样一个元素:
<p id="p1" style="color:red">hello world!</p>

假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值:
var sId = oP.attributes.getNamedItem("id").nodeValue; //p1
或者
var sId = oP.attributes.item(0).nodeValue;

还可以通过给nodeValue属性赋新值来改变id特性:
oP.attributes.getNamedItem("id").nodeValue = "newId";

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)

要获取前面用的<p/>的id特性,只需这样做:
var sId = oP.getAttribute("id");
更改ID:
oP.setAttribute("id", "newId");


❑ setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性

❑ getAttribute
attributeValue = element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。

❑ getElementById()
element = document.getElementById(ID)
寻找一个有着给定 id 属性值的元素,返回一个元素节点

❑ getElementsByName()
用来获取所有name特性等于指定值的元素:
elements = document.getElementsByName(tagName)
返回一个节点集合。

❑ getElementsByTagName()
用于寻找有着给定标签名的所有元素:
elements = document.getElementsByTagName(tagName)
返回一个节点集合。

❑ 生成与操作Node 
createAttribute(name) :创建一个名为name的属性节点。
createCDATASection(text) :创建一个子节点为text的CDATA区。
createComment(text) :创建一个注释内容为text的注释节点。
createDocumentFragment() :创建一个文档片断(fragment)节点。
createElement(tagName) :创建一个名为tagName的元素节点。
createEntityReference(name) :Creates an entity reference node with the given name。
createProcessingInstruction(target, data) :Creates a PI node with the given target and data。 
createTextNode(text) :创建一个包含text的文本节点。 
其中最重要的方法是createElement(),createDocumentFragment(), create TextNode()。

Js代码 
  1. /*使用createElement(),createTextNode(),appendChild()动态添加节点*/  
  2. function createMessage(){  
  3.  var op = document.createElement("p");  
  4.  var oText = document.createTextNode("hello world!");  
  5.  op.appendChild(oText);  
  6.  document.body.appendChild(op);  
  7. }  

❑ 使用createDocumentFragment()

Js代码 
  1. //通常做法  
  2. var arrText = ['first''second''third'];  
  3. for(var i=0; i<arrText.length; i++){  
  4.     var op = document.createElement('p');  
  5.     var oText = document.createTextNode(arrText[i]);  
  6.     op.appendChild(oText);  
  7.     document.body.appendChild(op);  
  8. }  
  9.   
  10. //使用documentFragment  
  11. var arrText = ['first''second''third'];  
  12. var oFragment = document.createDocumentFragment();  
  13. for(var i=0; i<arrText.length; i++){  
  14.     var op = document.createElement('p');  
  15.     var oText = document.createTextNode(arrText[i]);  
  16.     op.appendChild(oText);  
  17.     oFragment.appendChild(op);  
  18. }  
  19. document.body.appendChild(oFragment);  

  通过DocumentFragment的方式效率更高。

❑ HTML DOM:
使用DOM的核心方法是针对所有XML的,针对HTML DOM有特殊的方法,如
使用DOM core:oImg.setAttribute("src", "picture.gif");
使用HTML DOM:oImg.src = "picture.jpg";

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值