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 简化平台的变更
XML 使您的数据更有用
3.XML 树结构
父节点 子节点 同辈节点 后代节点 先辈节点
1. 什么是节点
根据 DOM,XML 文档中的每个成分都是一个节点。
整个文档是一个文档节点
每个 XML 标签是一个元素节点
包含在 XML 元素中的文本是文本节点
每一个 XML 属性是一个属性节点
注释属于注释节点
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
JavaScript--XML DOM 总结的更多相关文章
- JavaScript 【 IE中的XML DOM 】
IE中的 XML DOM 在统一的正式规范出来以前,浏览器对于XML的解决方案各不相同.DOM2级提出了动态创建XML DOM规范,DOM3进一步增强了XML DOM.所以,在不同的浏览器实现XML的 ...
- Javascript 解析字符串生成 XML DOM 对象。
Javascript 接收字符串生成 XML DOM 对象.实测对 Firefox .IE6 有效.可用于解析 ajax 的服务器响应结果,也可用于解析自定义字符串.1. [代码]函数 ppt模 ...
- JavaScript和DOM的产生与发展
首先本篇文章摘自:http://itbilu.com/javascript/js/Vyxodm_1g.html 非常感谢本篇文章的作者,他理清了我映像中混乱的DOM Level级别.让我知道了DOM0 ...
- javascript与DOM的渊源
1. JavaScript的起源 1.1 JavaScript的诞生与发展 JavaScript最初由Netscape的Brendan Eich设计, Netscape在最初将其脚本语言命名为Live ...
- JavaScript XML 兼容处理,序列化和反序列化以及回调事件
浏览器中XML DOM的支持 IE中通过ActiveXObject实现了XML的支持,存在一下几个版本:Microsoft.XmlDom,MSXML2.DOMDocument,MSXML2.DOMDo ...
- 自学XML DOM的几个例子
XML DOM定义了如何获取.修改.添加和删除XML文件中结点的接口,极大方便了开发者对XML文件的使用.XML DOM教程和手册请转:http://www.w3school.com.cn/xmldo ...
- JavaScript & XML
原文:JavaScript & XML 检测浏览器能力特性 //检测浏览器是否支持DOM2级XML var hasXmlDom = document.implementation.hasFea ...
- 第一百一十六节,JavaScript,DOM操作样式
JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- Python javascript操作DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- Javascript的DOM总结
Javascript的DOM总结 DOM DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的 ...
随机推荐
- (转)60s快速分析Linux性能
之前在地铁上看到过一篇快速分析Linux系统性能的文章,觉得以后有用,今天就找了一下,转载过来. 原文出处:http://techblog.netflix.com/2015/11/linux-perf ...
- ImageView android:scaleType="centerCrop"
转载地址:http://www.cnblogs.com/yejiurui/archive/2013/02/25/2931767.html 在网上查了好多资料,大致都雷同,大家都是互相抄袭的,看着很费劲 ...
- 笨鸟先飞之ASP.NET MVC系列之过滤器(04认证过滤器)
概念介绍 认证过滤器是MVC5的新特性,它有一个相对复杂的生命周期,它在其他所有过滤器之前运行,我们可以在认证过滤器中创建一个我们定义的认证方法,也可以结合授权过滤器做一个复杂的认证方法,这个方法可以 ...
- 循环神经网络RNN的基本介绍
本博客适合那些BP网络很熟悉的读者 一 基本结构和前向传播 符号解释: 1. $c_{t}^{l}$:t时刻第l层的神经元的集合,因为$c_{t}^{l}$表示的是一层隐藏层,所以图中一个圆圈表示多个 ...
- IIR数字滤波器的实现(C语言)
经典滤波器和数字滤波器 一般滤波器可以分为经典滤波器和数字滤波器. 经典滤波器:假定输入信号中的有用成分和希望去除的成分各自占有不同的频带.如果信号和噪声的频谱相互重迭,经典滤波器无能为力.比如 FI ...
- Codeforces Hello 2019
Hello 2019 手速场qwq 反正EGH太神仙了啊.jpg 考试的时候不会啊.jpg A 暴力.jpg #include <cstdio> #include <algorith ...
- Luogu P1966 火柴排队
这还是一道比较简单的题目,稍微想一下就可以解决.终于有NOIP难度的题目了 首先我们看那个∑(ai-bi)^2的式子,发现这个的最小值就是排序不等式 所以我们只需要改变第一组火柴的顺序,使它和第二组火 ...
- BodeAbp服务端介绍
BodeAbp服务端只提供api,绝大部分api通过abp的动态WebApi机制提供,原理可以参考这篇文章:http://www.cnblogs.com/1zhk/p/5418694.html 与业务 ...
- 正则&highlight高亮实现(干货)
写完正则表达式以后在浏览器上检测实在是不方便,于是就写了一个JS正则小工具,大大地提高了学习效率.学习之余用正则实现了一个highlight高亮demo,欢迎交流. 什么是正则表达式? 简单的说:正则 ...
- Python-集合-17
''' 集合:可变的数据类型,他里面的元素必须是不可变的数据类型,无序,不重复. {} ''' set1 = set({1,2,3}) # set2 = {1,2,3,[2,3],{'name':'a ...