JavaScript对XML的一些DOM操作
程序员文章站
2022-04-25 09:15:10
...
JavaScript写了个内部文件的解析小工具 写几点TIPS：
背景
有个内部格式的图形文件，每次用专用软件载入挺麻烦的，写个轻量小工具，方便读取。图新文件实质是XML文件。手头没有说明文档解释节点含义，靠猜测与测试得出来的。
过程
最初用的是读取XML文件的操作，参考了下面这个blog的写法。
https://zhuanlan.zhihu.com/p/23903588
function loadXML(){
var xmlDoc;
try{ //IE
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch(e){ //firefox,opera
xmlDoc = document.implementation.createDocument("","",null);
}
try{
xmlDoc.asyc = false; //是否异步调用
xmlDoc.load("xxx.xml"); //文件路径
}catch(e){ //chrome
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET","xxx.xml",false); //创建一个新的http请求，并指定此请求的方法、URL以及验证信息
xmlDoc = xmlhttp.responseXML;
}
return xmlDoc;
}
- xmlDoc.load一开始在火狐上都可以用 给了个warning 说是方法过期了，当时也没管它 结果过了个周末 再开火狐，火狐自动升级了 .load(xml)这个方法不再被支持，W3C标准上已经移除了这个方法，一开始还没整明白，以为是啥东西改错了，弄了半天才弄清楚。后面直接改用XMLHttpRequest()这个方法就可以了。
重点：如果是读取本地xml，chrome默认是禁止访问本地文件，需要增加启动参数 --allow-file-access-from-files。 火狐的话也是要在about：config里面设置一下。 IE不想碰~~没有测试。 - 读取本地文件的时候 无论是一开始的.load() 或者是xmlhttp.open(“GET”,“xxx.xml”,false) 都是可以跨域的。文件路径是可以改变的，父项 子项 兄弟项都ok。最开始想法是手选一个文件 获得路径 然后处理成相对路径 然后用方法读取这个xml文件，后来想了下 改了思路 FileReader（）这个方法，将XML读取成文本，然后再转化为DOM结构。其实应该都可以。
- 老调重提的callback,JavaScript的特点 非阻塞式异步处理（nodejs误入）, 所以上载程序的时候 onload()完成，在用callback来回调它。
- DOM的一些操作 getElementsByTagName ， getAttribute 以及最后的时候弄个多维的对象数组。
记录备查。
源码和样例附上：
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<input type="file" id="files" style="display: none" onchange="fileImport();">
<input type="button" id="fileImport" value="导入">
</div>
<canvas id="table"> </canvas>
<script src="jquery-3.4.1.js"></script>
<script>
$("#fileImport").click(function () {
$("#files").click();
})
function fileImport() {
var loadMNO = function (cb) {
var selectedFile = document.getElementById('files').files[0];
var reader = new FileReader();//这是核心,读取操作就是由它完成.
reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
reader.onload = function () {
//当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
var myxml = this.result
cb(this.result)
}
}
loadMNO(function (cb1) {
var parser = new DOMParser();
var xmlDoc2 = parser.parseFromString(cb1, 'text/xml')
var parts = xmlDoc2.getElementsByTagName("PROFILO")
var bordX = 2440
var bordY = 1220
var canvas = document.getElementById('table')
var width = canvas.width = 0.8*window.innerWidth;
var height = canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d')
ctx.fillStyle = 'rgb(197, 197, 197)';
ctx.fillRect(0, 0, width,0.5* width)
//绘制幕布
for (var j = 0; j < parts.length; j++) {
var size = parts[j].getElementsByTagName("VARIABILE")
for (var i = 0; i < size.length; i++) {
// console.log(size[i].attributes)
if (size[i].getAttribute('NAME') == "LPX"||size[i].getAttribute('name') == "LPX") {
var xsize = []
xsize[j] = size[i].childNodes[0].nodeValue
// console.log(j, xsize[j])
}
if (size[i].getAttribute('NAME') == "LPY"||size[i].getAttribute('name') == "LPY") {
var ysize = []
ysize[j] = size[i].childNodes[0].nodeValue
// console.log(j, ysize[j])
}
if (size[i].getAttribute('NAME') == "LPZ"||size[i].getAttribute('name') == "LPZ") {
var zsize = []
zsize[j] = size[i].childNodes[0].nodeValue
// console.log(j, zsize[j])
}
}
var pos = parts[j].getElementsByTagName("POS")
var arr = []
var ARRAY = []
var obj = new Object
for (var k = 0; k < pos.length; k++) {
var xpos = pos[k].getElementsByTagName("X")
var ypos = pos[k].getElementsByTagName("Y")
var deg =pos[k].getElementsByTagName("DEG")
obj = { x: xpos[0].childNodes[0].nodeValue, y: ypos[0].childNodes[0].nodeValue }
arr[k] = obj
ARRAY[j] = new Array()
ARRAY[j][k] = arr[k]
// console.log("hey" + "x:" + ARRAY[j][k].x + "y:" + ARRAY[j][k].y)
ctx.fillStyle = 'rgb(231, 143, 43)';
// ctx.fillRect(150,150,250,10)
if (deg[0].childNodes[0].nodeValue==0)
ctx.fillRect(parseFloat(ARRAY[j][k].x) / bordX * width, 0.5 * width * (1 - parseFloat(ARRAY[j][k].y) / bordY), (parseFloat(xsize[j])) / bordX * width, 0.5 * width * ( - parseFloat(ysize[j]))/bordY);
if (deg[0].childNodes[0].nodeValue==-90)
ctx.fillRect(parseFloat(ARRAY[j][k].x) / bordX * width, 0.5 * width * (1 - parseFloat(ARRAY[j][k].y) / bordY), (parseFloat(ysize[j])) / bordX * width, 0.5 * width * ( parseFloat(xsize[j]))/bordY);
}
// bankId = list2[j].getAttribute("bankId");
}
});
}
</script>
</body>
</html>
XML
<NESTING_RESULT CARDINALITA_PEZZI="0" MAXDIAMETER="10" CUTTER_DIA="0.1" RESOLUTION="0.1" CLEARANCE="0.01" ORDINE="0" INTERNI="0" RETT="0" NOMI_UNIVOCI="0" GEOM="0">
<COMMESSA>
<DESCR>RYAN_LABL123_20 ; 03/03/2020 09:07:16 ; LABL123_20</DESCR>
</COMMESSA>
<FOGLIO PATH="RYAN_LABL123_20_0001(1).bSolid" OffsetPart="0" QTY="1" NAME="LBL1234.xml" ID="1" PACK="1" RepRecognitionId="1">
<SheetInfo Name="LBL1234" DX="2440" DY="1220" DZ="20" GrainDirection="N" Materiale="LABL123" Resto="0">
<INFO>
<CUSTOM_INFO name="Waste.Thickness" value="20" />
<CUSTOM_INFO name="Waste.ProjectName" value="RYAN" />
<CUSTOM_INFO name="Sheet.Code" value="LBL1234" />
<CUSTOM_INFO name="Sheet.Description" value="" />
<CUSTOM_INFO name="Sheet.IsGrained" value="0" />
<CUSTOM_INFO name="Material.Code" value="LABL123" />
<CUSTOM_INFO name="Material.Description" value="" />
</INFO>
</SheetInfo>
<StatisticInfo PartUsedArea="1150000" />
<NOME>LABEL.bSolid<PROFILO>LABEL.bnt<PartName Value="LBL123654" /><UserCustomId Value="000000000008" /><UserCustomName Value="LBL123654" /><ComputationInfo><RequestInfo Min="5" Max="5" /><OffsetInfo External="0" Holes="0" /><RotationalInfo RotationalStep="270" GrainDirection="None" /></ComputationInfo><VARIABILE NAME="LPX">500</VARIABILE><VARIABILE NAME="LPY">400</VARIABILE><VARIABILE NAME="LPZ">20</VARIABILE><INFO><CUSTOM_INFO name="ORDER_ID" value="" /><CUSTOM_INFO name="CLIENT" value="" /><CUSTOM_INFO name="CUSTOM_DESCR_1" value="RYAN" /><CUSTOM_INFO name="CUSTOM_DESCR_2" value="LBL123654" /><CUSTOM_INFO name="CUSTOM_DESCR_3" value="LABL123" /></INFO><DRW><GeometryContainer Consider="Now"><Original minX="0" maxX="500" minY="0" maxY="400"><POINT x="0" y="400" th="0" /><LINE xs="0" ys="400" xe="0" ye="0" th="0" /><LINE xs="0" ys="0" xe="500" ye="0" th="0" /><LINE xs="500" ys="0" xe="500" ye="400" th="0" /><LINE xs="500" ys="400" xe="0" ye="400" th="0" /></Original><Computed passThrough="1" minX="-10" maxX="510" minY="-10" maxY="410"><POINT x="0" y="400" th="20" /><LINE xs="0" ys="400" xe="0" ye="0" th="20" /><LINE xs="0" ys="0" xe="500" ye="0" th="20" /><LINE xs="500" ys="0" xe="500" ye="400" th="20" /><LINE xs="500" ys="400" xe="0" ye="400" th="20" /></Computed></GeometryContainer></DRW><POS PackLayer="1" ID="1" LabelApplicationMode="2"><X>-0.0399999999999103</X><Y>499.96</Y><DEG>-90</DEG><Production MinRequested="5" MaxRequested="5" MinInstanceNum="1" MaxInstanceNum="1" /><LABEL data="RYAN_LABL123_20;1;1;1" labelName="TEST" labelrot="-90" X="199.96" Y="249.96" Intersect="false" /></POS><POS PackLayer="1" ID="1" LabelApplicationMode="2"><X>-0.0399999999999423</X><Y>1020.04</Y><DEG>-90</DEG><Production MinRequested="5" MaxRequested="5" MinInstanceNum="2" MaxInstanceNum="2" /><LABEL data="RYAN_LABL123_20;2;1;1" labelName="TEST" labelrot="-90" X="199.96" Y="770.04" Intersect="false" /></POS><POS PackLayer="1" ID="1" LabelApplicationMode="2"><X>420.04</X><Y>499.96</Y><DEG>-90</DEG><Production MinRequested="5" MaxRequested="5" MinInstanceNum="3" MaxInstanceNum="3" /><LABEL data="RYAN_LABL123_20;3;1;1" labelName="TEST" labelrot="-90" X="620.04" Y="249.96" Intersect="false" /></POS><POS PackLayer="1" ID="1" LabelApplicationMode="2"><X>420.04</X><Y>1020.04</Y><DEG>-90</DEG><Production MinRequested="5" MaxRequested="5" MinInstanceNum="4" MaxInstanceNum="4" /><LABEL data="RYAN_LABL123_20;4;1;1" labelName="TEST" labelrot="-90" X="620.04" Y="770.04" Intersect="false" /></POS><POS PackLayer="1" ID="1" LabelApplicationMode="2"><X>840.12</X><Y>499.96</Y><DEG>-90</DEG><Production MinRequested="5" MaxRequested="5" MinInstanceNum="5" MaxInstanceNum="5" /><LABEL data="RYAN_LABL123_20;5;1;1" labelName="TEST" labelrot="-90" X="1040.12" Y="249.96" Intersect="false" /></POS></PROFILO></NOME>
<NOME>s.bSolid<PROFILO>s.bnt<PartName Value="sv143" /><UserCustomId Value="000000000011" /><UserCustomName Value="sv143" /><ComputationInfo><RequestInfo Min="5" Max="5" /><OffsetInfo External="0" Holes="0" /><RotationalInfo RotationalStep="0" GrainDirection="None" /></ComputationInfo><VARIABILE NAME="LPX">200</VARIABILE><VARIABILE NAME="LPY">150</VARIABILE><VARIABILE NAME="LPZ">20</VARIABILE><INFO><CUSTOM_INFO name="ORDER_ID" value="" /><CUSTOM_INFO name="CLIENT" value="" /><CUSTOM_INFO name="CUSTOM_DESCR_1" value="RYAN" /><CUSTOM_INFO name="CUSTOM_DESCR_2" value="sv143" /><CUSTOM_INFO name="CUSTOM_DESCR_3" value="LABL123" /></INFO><DRW><GeometryContainer Consider="Now"><Original minX="0" maxX="200" minY="0" maxY="150"><POINT x="0" y="150" th="0" /><LINE xs="0" ys="150" xe="0" ye="0" th="0" /><LINE xs="0" ys="0" xe="200" ye="0" th="0" /><LINE xs="200" ys="0" xe="200" ye="150" th="0" /><LINE xs="200" ys="150" xe="0" ye="150" th="0" /></Original><Computed minX="-10" maxX="210" minY="-10" maxY="160"><POINT x="0" y="150" th="20" /><LINE xs="0" ys="150" xe="0" ye="0" th="20" /><LINE xs="0" ys="0" xe="200" ye="0" th="20" /><LINE xs="200" ys="0" xe="200" ye="150" th="20" /><LINE xs="200" ys="150" xe="0" ye="150" th="20" /></Computed></GeometryContainer></DRW><POS PackLayer="1" ID="1" LabelApplicationMode="2"><X>-0.0400000000000666</X><Y>1040.12</Y><DEG>0</DEG><Production MinRequested="5" MaxRequested="5" MinInstanceNum="1" MaxInstanceNum="1" /><LABEL data="RYAN_LABL123_20;1;2;1" labelName="TEST" labelrot="0" X="99.9599999999999" Y="1115.12" Intersect="false" /></POS><POS PackLayer="1" ID="1" LabelApplicationMode="2"><X>220.04</X><Y>1040.12</Y><DEG>0</DEG><Production MinRequested="5" MaxRequested="5" MinInstanceNum="2" MaxInstanceNum="2" /><LABEL data="RYAN_LABL123_20;2;2;1" labelName="TEST" labelrot="0" X="320.04" Y="1115.12" Intersect="false" /></POS><POS PackLayer="1" ID="1" LabelApplicationMode="2"><X>440.12</X><Y>1040.12</Y><DEG>0</DEG><Production MinRequested="5" MaxRequested="5" MinInstanceNum="3" MaxInstanceNum="3" /><LABEL data="RYAN_LABL123_20;3;2;1" labelName="TEST" labelrot="0" X="540.12" Y="1115.12" Intersect="false" /></POS><POS PackLayer="1" ID="1" LabelApplicationMode="2"><X>660.2</X><Y>1040.12</Y><DEG>0</DEG><Production MinRequested="5" MaxRequested="5" MinInstanceNum="4" MaxInstanceNum="4" /><LABEL data="RYAN_LABL123_20;4;2;1" labelName="TEST" labelrot="0" X="760.2" Y="1115.12" Intersect="false" /></POS><POS PackLayer="1" ID="1" LabelApplicationMode="2"><X>840.12</X><Y>520.04</Y><DEG>0</DEG><Production MinRequested="5" MaxRequested="5" MinInstanceNum="5" MaxInstanceNum="5" /><LABEL data="RYAN_LABL123_20;5;2;1" labelName="TEST" labelrot="0" X="940.12" Y="595.04" Intersect="false" /></POS></PROFILO></NOME>
<FOGLIO.PartsLabelInfo>
<DRW>
<GeometryContainer Consider="Now">
<Original minX="-51" maxX="51" minY="-32" maxY="32">
<LINE xs="-51" ys="-32" xe="-51" ye="32" th="0" />
<LINE xs="-51" ys="32" xe="51" ye="32" th="0" />
<LINE xs="51" ys="32" xe="51" ye="-32" th="0" />
<LINE xs="51" ys="-32" xe="-51" ye="-32" th="0" />
</Original>
</GeometryContainer>
</DRW>
</FOGLIO.PartsLabelInfo>
<EditingModes ByCad="True" />
<FOGLIO.Programs>
<PanelDefinitionProgram>
<Program Name="PanelDefinition">
<Program.Statements>
<Statement Name="PanelData">
<Statement.Assignments>
<Assignment Name="LPX" Value="2440" />
<Assignment Name="LPY" Value="1220" />
<Assignment Name="LPZ" Value="20" />
<Assignment Name="OriginList" Value="1" />
<Assignment Name="UniqueOrigin" Value="True" />
<Assignment Name="SubprogramMerge" Value="1" />
</Statement.Assignments>
</Statement>
</Program.Statements>
</Program>
</PanelDefinitionProgram>
</FOGLIO.Programs>
</FOGLIO>
</NESTING_RESULT>
上一篇： 分页查看分类下的商品信息
下一篇： 资源冲突导致光驱丢失