0 Comments

JavaScript DOM特性与应用详解(3)

发布于:2013-12-09  |   作者:广州网站建设  |   已聚集:人围观

检测节点类型

通过使用nodeType特性检验节点类型:


  1. alert(document.nodeType); //outputs "9"  
  2. alert(document.documentElement.nodeType); //outputs "1" 

这个例子中,document.nodeType返回9,等于Node.DOCUMENT_NODE;同时document. documentElement.nodeType返回1,等于Node.ELEMENT_NODE。也可以用Node常量来匹配这些值:


  1. alert(document.nodeType == Node.DOCUMENT_NODE); //true  
  2. 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属性被设置为特性的值。 例如,假设有这样一个元素:


  1. <p id="p1" style="color:red">hello world!</p> 

假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值:


  1. var sId = oP.attributes.getNamedItem("id").nodeValue; //p1 

或者:


  1. var sId = oP.attributes.item(0).nodeValue; 

还可以通过给nodeValue属性赋新值来改变id特性:


  1. oP.attributes.getNamedItem("id").nodeValue = "newId"

Attr节点也有一个完全等同于(同时也完全同步于)nodeValue属性的value属性,并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。因为这个方法有些累赘,DOM又定义了三个元素方法来帮助访问特性:
广州网站建设,网站建设,广州网页设计,广州网站设计


  1. getAttribute(name)   
  2. 等于  
  3. attributes.getNamedItem(name).value;  
  4.  
  5. setAttribute(name, newvalue)  
  6. 等于  
  7. attribute.getNamedItem(name).value = newvalue;  
  8.  
  9. removeAttribute(name)  
  10. 等于  
  11. attributes.removeNamedItem(name)  

要获取前面用的<p/>的id特性,只需这样做:


  1. var sId = oP.getAttribute("id"); 

更改ID:


  1. oP.setAttribute("id", "newId");  
  2. setAttribute()  
  3. element.setAttribute(attributeName,attributeValue); 

为给定元素节点添加一个新的属性值或是改变它的现有属性

getAttribute()


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

getElementById()


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

getElementsByName()


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

getElementsByTagName()


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