Java乔晓松-JavaScript加强1

l      DOM

l      DOM： DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言.

l      D：文档– html 文档 或 xml 文档

l      O：对象– document 对象的属性和方法

l      M：模型

l      DOM 是针对xml(html)的基于树的API。

l      DOM树:节点（node）的层次。

l      DOM 把一个文档表示为一棵家谱树（父，子，兄弟）

l      DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

 

l      节点

l      根据 DOM，HTML 文档中的每个成分都是一个节点。DOM 是这样规定的：

l      整个文档是一个文档节点

l      每个 HTML 标签是一个元素节点

l      包含在 HTML 元素中的文本是文本节点

l      每一个 HTML 属性是一个属性节点

l      注释属于注释节点

 

l      Node 层次

l      节点彼此都有等级关系。

l      HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

 

l      节点及其类型

l       节点

  *  由结构图中我们可以看到，整个文档就是一个文档节点。

  *  而每一个HMTL标签都是一个元素节点。

  *  标签中的文字则是文本节点。

  *  标签的属性是属性节点。

  *  一切都是节点……

 

l       节点树

    节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……

特性/方法	类型/返回类型	说    明
nodeName	String	节点的名字；根据节点的类型而定义
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

l      查找并访问节点

l      你可通过若干种方法来查找您希望操作的元素：

l      通过使用 getElementById() 和 getElementsByTagName() 方法

l      通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性

 

l      查找元素节点

l       getElementById()

      寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.

var oElement = document.getElementById (sID )

     该方法只能用于 document 对象

l       function test(){

l          varusernameElement=document.getElementById(“tid");

l          //获取元素的值

l          alert("usernameElement.value:"+usernameElement.value)

l          //获取元素的类型

l          alert("usernameElement.type:"+usernameElement.type)

l      }

l      getElementsByName()

l      寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的length 属性等于当前文档里有着给定name属性的所有元素的总个数。

l              

l              

l              

l              

 

 

l      function test(){

l           vartnameArray=document.getElementsByName("tname");

l           alert(tnameArray.length);

l           for(vari=0;i

l                   window.alert(tnameArray[i].value);

l            }

l        }

l      

l        

l        

l              

l          

l           //该方法返回是数组类型

l        var usernameElements=document.getElementsByName("username");

l        for (var i = 0; i

l              //获取元素的类型

l              //alert(usernameElements[i].type)

l              //获取元素value的值

l              //alert(usernameElements[i].value);

l              //采用函数直接量的方法

l             usernameElements[i].onchange = function(){

l                 alert(this.value);

l             }

l      }

l        

l       getElementsByTagName()

•        寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的length 属性等于当前文档里有着给定标签名的所有元素的总个数。

  var elements = document.getElementsByTagName(tagName);

   varelements = element.getElementsByTagName(tagName);

•        该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。

  var container =  document.getElementById(“sid”);

  var elements = container.getElementsByTagName(“p”);

  alert(elements .length);

l      parentNode、firstChild以及lastChild

l      这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。

l      请看下面这个 HTML 片段：

    

       

       

      

    

 

John

Doe

Alaska

 

l      在上面的HTML代码中，第一个 是 元素的首个子元素（firstChild），而最后一个 是 元素的最后一个子元素（lastChild）。

l      此外， 是每个 元 素的父节点（parentNode）。

 

 

l      查看是否存在子节点

l      hasChildNodes()      

•        该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

  varbooleanValue = element.hasChildNodes();

•        文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.

•        如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild将是空数组和空字符串。

•        hasChildNodes()

varselectElements=document.getElementsByTagName("select");

 alert(selectElements[0].hasChildNodes())

 

varinputElements=document.getElementsByTagName("input");

for(vari=0;i

    alert(inputElements[i].hasChildNodes());

}

l      根节点

l      有两种特殊的文档属性可用来访问根节点：

l       document.documentElement

l       document.body

l       第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

l       第二个属性是对 HTML 页面的特殊扩展，提供了对 标签的直接访问。

 

l      DOM节点信息

l      每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

l      nodeName（节点名称）

l      nodeValue（节点值）

l      nodeType（节点类型）

l      DOM属性---nodeName

l      nodeName 属性含有某个节点的名称。

l       var name = node.nodeName;

l      元素节点的 nodeName 是标签名称

l      属性节点的 nodeName 是属性名称

l      文本节点的 nodeName 永远是 #text

l      文档节点的 nodeName 永远是 #document

l      注释：nodeName 所包含的 html 元素的标签名称永远是大写的

 

l      DOM 属性 -- nodeValue

l      nodeValue：返回给定节点的当前值（字符串）

l       如果给定节点是一个属性节点，返回值是这个属性的值。

l        如果给定节点是一个文本节点，返回值是这个文本节点的内容。

l        如果给定节点是一个元素节点，返回值是 null

l       nodeValue 是一个读/写 属性，但不能对元素节点的 nodeValue 属性设置值，

    但可以为文本节点的 nodeValue 属性设置一个值。

   varli = document.getElementById(“li”);

  if(li.firstChild.nodeType == 3)

     li.firstChild.nodeValue = “国庆60年”;

l      DOM 属性 -- nodeType

l      nodeType：返回一个整数，这个数值代表着给定节点的类型。

l      nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：

l      Node.ELEMENT_NODE    ---1   -- 元素节点

l      Node.ATTRIBUTE_NODE  ---2   -- 属性节点

l      Node.TEXT_NODE       ---3   -- 文本节点

l      nodeType 是个只读属性