JavaEE学习笔记--JavaScript之xml dom常见API总结

JavaScript中的dom

Dom  document object model 即文档对象模型

dom是html和xml的应用程序接口(API),dom将整个页面规划为由节点组成的文档 。我们可以通过dom提供的api来操作页面上的所有节点.

节点分类：
文档:document
元素节点  Element
文本节点  Text
属性节点  Attribute 

dom组成

核心DOM---针对于结构化文档的标准模型。
XML DOM 针对于xml文档操作
HTML DOM 针对于html文档操作

Html它也是一个xml，也就是说，可以通过xml dom来操作html.

Html dom它是对xml dom的扩展。通过xml dom来操作html它语法比较复杂，但是它不存在浏览器兼容问题。通过html dom来操作html，它语法比较简单，但是会存在浏览器兼容问题。

Javascript中dom常用的API

Dom操作中常用三个属性

 nodeName
 nodeValue
 nodeType

nodeName

元素节点的nodeName与标签名相同
属性节点的nodeName是属性的 
文本节点的nodeName永远是#text

nodeValue

元素节点的nodeValue是undefined
文本节点的nodeValue是文本本身
属性节点的nodeValue是属性的值

nodeType

元素类型  节点类型  
元素        1  
属性        2
文本        3
注释        8
文档        9

关于节点与节点之间的关系

parentNode 获取父节点
childNodes 获取所有的子节点，返回的是一个节点数组
firstChild 获取第一个子节点
lastChild 获取最后一个子节点
nextSibling 获取下一个兄弟节点
previousSibling 获取上一个兄弟节点。

XML DOM获取节点

元素节点:getElementByTagName() 返回的是一个数组
属性节点: getAttribute()
文本节点:nodeValue

Xml Dom改变节点

元素节点: 没有
属性节点:setAttribute() 
文本节点: nodeValue

Xml Dom删除节点

元素节点: removeChild() 注意，必须通过父元素来删除子元素
属性节点:removeAttribute()
文本节点: removeChild()

Xml Dom替换节点

元素节点: replaceChild(新节点，旧节点)
属性节点:没有
文本节点: nodeValue

Xml Dom创建节点

    元素节点:createElement()
属性节点:setAttribute()
文本节点: createTextNode() 也可以直接指定它的文本值 innerHTML

Xml Dom添加节点

    元素节点:appendChild()  insertBefore()
属性节点:setAttribute()
文本节点:innerHTML 

Xml Dom克隆节点

cloneNode() 方法创建指定节点的副本。
cloneNode() 方法有一个参数（true 或 false）。该参数指示被复制的节点是否包括原节点的所有属性和子节点。

Html dom操作

在xml dom中获取元素
    document.getElementsByTagName() 它返回的是数组 根据标签名称来获取
    document.getElementById() 它返回的就是一个元素 根据元素的id值来获取
在html dom中获取元素
    document.getElementByName()它返回的也是一个数组 根据元素的name属性获取

注意：在html dom中也可以使用xml dom.
在html的dom中还有一个特殊的属性innerHTML 它是用于获取标签中文本。

在html dom中关于select属性

1.  selectedIndex 它是获取选中项的索引值。
2.  对于option元素，它的value属性是用于设置或接收option的value值
3.  对于option元素，它的text属性是用于设置或接收文本信息
4.  如果要获取选中的option就可以直接写在 options[selectedIndex];