传智播客 javascipt增强之元素操作总结

 

    学完struts后，接下里的课程是AJAX，学习AJAX的前提是要有JavaScript基础，接着学习jquery。使用jquery更容易编写AJAX应用。先对DOM进行回顾，即Document Object Model(文本对象模型)，它是针对xml(html)的基于树的API。DOM把一个文档表示为一棵家谱树（父，子，兄弟)，它定义了Node的接口以及许多种节点类型来表示XML节点的多个方面。课程中详细讲解和演示了对DOM的操作。
    为了操作文档中的对象，一般在开始就要查找元素节点，常用的方法有两个： getElementById() 和getElementsByTagName()。前者寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null。该方法只能用于 document 对象。getElementsByTagName()寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理，这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。该方法的作用范围不同于getElementById()  ，它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
    有的时候需要查看某个节点是否存在子节点，用的是hasChildNodes方法，该方法用来检查一个元素是否有子节点，返回值是 true 或 false。使用这个方法需要注意的是，文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false。如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串，这最后一点很容易理解的。
    接着是DOM中每个节点都有的三个属性：nodeName、nodeType和nodeValue。其中nodeName是一个字符串，其内容是给定节点的名字，是一个只读属性。如果给定节点是一个元素节点或属性节点，nodeName 属性将返回这个元素的名字。如果给定节点是一个文本节点，nodeName 属性将返回内容为 #text 的字符串。nodeType 也是一个只读属性，返回一个整数，这个数值代表着给定节点的类型。nodeValue和前两者不同，是一个 读/写 属性，但不能对元素节点的该属性设置值，但可以为文本节点的该属性设置一个值。读取该属性值时，返回给定节点的当前值（字符串），如果给定节点是一个属性节点，返回值是这个属性的值。如果给定节点是一个文本节点，返回值是这个文本节点的内容。但是如果给定节点是一个元素节点，则返回值是 null。
    了解了以上内容后，接下来就该了解一些对节点操作，这样才能在浏览器中动态的显示内容。替换节点的方法是replaceChild()，它把一个给定父元素里的一个子节点替换为另外一个子节点，返回值是一个指向已被替换的那个子节点的引用指针。如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中。创建新元素节点createElement()，按照给定的标签名创建一个新的元素节点。方法的返回值：是一个指向新建节点的引用指针。另外一个就是创建新文本节点createTextNode()，创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。
方法的返回值：是一个指向新建节点的引用指针。为给定元素增加一个子节点的方法是appendChild()
，该方法通常与 createElement() createTextNode() 配合使用。类似的方法还有insertBefore()
把一个给定节点插入到一个给定元素节点的给定子节点的前面，removeChild()从一个给定元素里删除一个子节点。这些都是添加删除和修改节点需要用到的方法。
    最后是遍历节点。有一个属性叫ChildNodes，它也是一个只读属性。反问该属性时返回一个数组，这个数组由给定元素节点的子节点构成。文本节点和属性节点都不可能再包含任何子节点，所以它们的 ChildNodes 属性永远会返回一个空数组。如果想知道某个元素有没有子节点，可以用 hasChildNodes 方法。如果想知道某个元素有多少个子节点，可以用 childNodes 数组的 length 属性。访问节点还有如下的方法：
      lastChild：对应 firstChild 的一个属性。
      nextSibling: 返回一个给定节点的下一个子节点。
      parentNode：返回一个给定节点的父节点。
      parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
      document 节点的没有父节点。
      previousSibling：返回一个给定节点的上一个子节点。