JavaScript--XML DOM 总结

XML DOM

2018-09-04

XML简介

1.什么是XML

• XML 指可扩展标记语言（EXtensible Markup Language）

• XML 是一种标记语言，很类似 HTML

• XML 的设计宗旨是传输数据，而非显示数据

• XML 标签没有被预定义。您需要自行定义标签。

• XML 被设计为具有自我描述性。

• XML 是 W3C 的推荐标准

2.XML用途

• XML 把数据从 HTML 分离

• XML 简化数据共享和传输

• XML 简化平台的变更

  扫描二维码关注公众号，回复： 3103372 查看本文章

• XML 使您的数据更有用

3.XML 树结构

父节点 子节点 同辈节点 后代节点 先辈节点

1. 什么是节点

​ 根据 DOM，XML 文档中的每个成分都是一个节点。

1. 整个文档是一个文档节点

2. 每个 XML 标签是一个元素节点

3. 包含在 XML 元素中的文本是文本节点

4. 每一个 XML 属性是一个属性节点

   5. 注释属于注释节点

2.节点类型

1.节点类型

节点类型	描述	子元素
Document	表示整个文档（DOM 树的根节点）	Element (max. one) ProcessingInstruction Comment DocumentType
DocumentFragment	表示轻量级的 Document 对象，其中容纳了一部分文档。	ProcessingInstruction Comment Text CDATASection EntityReference
DocumentType	向为文档定义的实体提供接口。	None
ProcessingInstruction	表示处理指令。	None
EntityReference	表示实体引用元素。	ProcessingInstruction Comment Text CDATASection EntityReference
Element	表示 element（元素）元素	Text Comment ProcessingInstruction CDATASection EntityReference
Attr	表示属性。	Text EntityReference
Text	表示元素或属性中的文本内容。	None
CDATASection	表示文档中的 CDATA 区段（文本不会被解析器解析）	None
Comment	表示注释。	None
Entity	表示实体。	ProcessingInstruction Comment Text CDATASection EntityReference
Notation	表示在 DTD 中声明的符号。	None

2.节点返回值

节点类型	nodeName	nodeValue	NodeType	Named
Document	#document	null	9	DOCUMENT_NODE
DocumentFragment	#document fragment	null	11	DOCUMENT_F...
DocumentType	doctype 名称	null	10	DOCUMENT_TYPE..
EntityReference	实体引用名称	null	5	ENTITY_REFERENCE
Element	element name	null	1	ELEMENT_NODE
Attr	属性名称	属性值	2	ATTRIBUTE_NODE
ProcessingInstruction	target	节点的内容	7	PROCESSING_G...
Comment	#comment	注释文本	8	COMMENT_NODE
Text	#text	节点内容	3	TEXT_NODE

3. 节点访问

1.得到节点

节点	访问
document	document
element	getById/ByTagName/ByClassName....
attr	element.getAttributeNode('attrname');
text	子节点
comment	子节点

2.获取节点

节点	功能
childNodes	获取子节点
children	获取子元素节点
firstChild	获取第一个子节点
lastChild	获取最后一个子节点
parentNode	获取父节点
parentElement	获取父元素节点
previousSibling	获取前一个节点
nextSibling	获取最后一个节点

3.节点属性

三个重要的 XML DOM 节点属性是：

• nodeName

• nodeValue

• nodeType

节点	nodeName	nodeValue	nodeType
document	#document	null	9
element	标签名	null	1
attr	属性名称	属性值	2
text	#text	文本内容	3
comment	#comment	注释内容	8

4.节点操作

1.获取节点值

节点	方法
element	通过Id/tagName,通过子节点/父节点/同辈..
attr	getAttributeNode('attrname'); 返回属性节点<br />getAttribute('attrname'); 返回属性节点值<br />element.attr HTML DOM

2.改变节点值

节点	方法
element	无意义
attr	setAttribute(attrname, attrvalue); 设置已有属性的值，或创建新属性<br />setAttributeNode(attrname)<br />element.attr = value;

3.删除节点

节点	方法
attr	把值 赋值为null 或 removeAttribute('attrname');
element	removeChild(node) 需要找到父节点

4.替换节点

节点	方法
attr	setAttribute(attrname, attrvalue);<br />setAttribute('attrname'); 返回属性节点值<br />element.attr
element	replaceChild(new_node, old_node) 需要找到父节点

5.插入节点

节点	方法
attr	setAttribute(attrname, attrvalue);<br />setAttribute('attrname'); 返回属性节点值<br />element.attr
element	appendChild(node) 追加插入<br />insertBefore(new_node, old_node) 指定位置插入

6.创建节点

节点	方法
attr	document.createAttribute(attrname);
element	document.createElement('tagName');

7.克隆节点

节点	方法
cloneNode(true)	默认值false 表示值复制自己,true表示复制所有后代元素

5.XML对象

1.Document对象

Document 对象的属性

属性	描述
childNodes	返回属于文档的子节点的节点列表。
doctype	返回与文档相关的文档类型声明 (DTD)。
documentElement	返回文档的根节点
firstChild	返回文档的首个子节点

Document 对象的方法

方法	描述
createAttribute(name)	创建拥有指定名称的属性节点，并返回新的 Attr 对象。
createElement()	创建元素节点。
createEvent()	创建新的 Event 对象。
renameNode()	重命名元素或者属性节点。

2.Attr对象

Attr 对象的属性

属性	描述
ownerDocument	返回属性所属的根元素（document对象）。
textContent	设置或返回属性的文本内容。
text	返回属性的文本。IE-only
value	设置或返回属性的值。

3.Element对象

Element 对象的属性

属性	描述
attributes	返回元素的属性的 NamedNodeMap
childNodes	返回元素的子节点的 NodeList
firstChild	返回元素的首个子节点
lastChild	返回元素的最后一个子节点
localName	返回元素名称的本地部分
nextSibling	返回元素之后紧跟的节点
previousSibling	返回元素之前紧随的节点
parentNode	返回元素的父节点

Element 对象的方法

方法	描述
appendChild()	向节点的子节点列表末尾添加新的子节点。
cloneNode()	克隆节点。
compareDocumentPosition()	比较两节点的文档位置。
dispatchEvent()	给节点分派一个合成事件。
getAttribute()	返回属性的值。
getAttributeNode()	以 Attribute 对象返回属性节点。
getElementsByTagName()	找到具有指定标签名的子孙元素。
hasAttribute()	返回元素是否拥有指定的属性。
hasAttributes()	返回元素是否拥有属性。
hasChildNodes()	返回元素是否拥有子节点。
insertBefore()	在已有的子节点之前插入一个新的子节点。
removeAttribute()	删除指定的属性。
removeAttributeNode()	删除指定的属性节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
setAttribute()	添加新属性。
setAttributeNode()	添加新的属性节点。

4.HTMLElement

HTMLElement 对象的属性

属性	描述
className	规定元素的 class 属性。 <br />类型：String。<br />状态：可写。
innerHTML	innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。 <br />类型：String。<br />状态：可写。
innerText	只获取文本内容
outerHTML	返回调用它的元素及所有子节点的 HTML 标签。
innerHeight,innerWidth	浏览器窗口的内部高度 ,宽度<br />( 获取去除工具条与滚动条的窗口高度与宽度。 )
outerHeight , outerWidth	设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。
innerText	通过 innerText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。
offsetHeight,offsetWidth	返回元素的高度和宽度，以像素为单位。 <br /> offsetHeight=clientHeight+滚动条+边框.(整个网页来说)  <br />offsetWidth=元素的width+padding+border <br />类型：int。<br />状态：只读。
offsetLeft	返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。<br /> 类型：int。<br />状态：只读。
offsetTop	返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。 <br />类型：int。<br />状态：只读。
scrollTop,scrollLeft	设置或返回已经滚动到元素的左边界或上边界的像素数。<br />类型：int。<br />状态：可写。
scrollHeight,scrollWidth	返回元素的完整的高度和宽度，以像素为单位。<br />类型：int。<br />状态：只读。
clientWidth,clientHeight	可见内容的宽度和高度,元素的宽,高加内边距
offsetParent	返回对最近的动态定位的包含元素的引用，所有的偏移量都根据该元素来决定。如果元素的 style.display 设置为 none，则该属性返回 null。<br /> 类型：Node。<br />状态：只读。

 

对象方法

方法	描述
scrollIntoView()	滚动文档。使该元素出现在窗口的顶部或底部。

5.Text对象

Text 对象属性

属性	描述
data	设置或返回元素或属性的文本
isElementContentWhitespace	判断文本节点是否包含空白字符内容。
length	返回元素或属性的文本长度
wholeText	以文档中的顺序向此节点返回相邻文本节点的所有文本

Text 对象方法

方法	描述
appendData()	向节点追加数据
deleteData()	从节点删除数据
insertData()	向节点中插入数据
replaceData()	替换节点中的数据
replaceWholeText()	使用指定文本来替换此节点以及所有相邻的文本节点
splitText()	把一个 Text 节点分割成两个。
substringData()	从节点提取数据

6.Comment对象

Comment 对象属性

属性	描述
data	可设置或返回此节点的文本。
length	可返回此节点的文本的长度

Commentt 对象方法

方法	描述
appendData()	向节点追加数据
deleteData()	从节点删除数据
insertData()	向节点中插入数据
replaceData()	替换节点中的数据
substringData()	从节点提取数据

视口高度

​ document.documentElement.clientHeight

文档高度

​ document.documentElement.scrollHeight

Mozilla 开发者社区(MDN):https://developer.mozilla.org/zh-CN/JavaScript MDN文档https://developer.mozilla.org/zh-CN/docs/Web/JavaScript