JavaEE学习笔记--JavaScript之xmldom常见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];