julfers/xmlview.html

## xmlview.html
<!DOCTYPE html>
<html><head>

<meta charset="utf-8">

<style>
ol { padding-left: 0; }
details > summary ~ * { margin: 0 0 0 1em; }
p { margin: 0; }
p.xml-comment { color: #8c8; }
/* dt, dd look like xml attributes */
dt {
  float: left;
  color: #44f;
}
dt:after {
  display: inline-block;
  content: "=";
  color: #ccc;
}
dd { margin-left: 1ex; }
</style>

</head><body>

<script>
'use strict'

function elementTree(xml) {
  var container = document.createElement('details'),
      tag = document.createElement('summary'),
      attrs = document.createElement('dl'),
      children = document.createElement('ol')

  tag.textContent = xml.nodeName
  container.appendChild(tag)

  appendXmlAttrs(attrs, xml)
  container.appendChild(attrs)

  appendXmlChildren(children, xml)
  container.appendChild(children)

  return container
}

function commentNode(xml) {
  var cn = document.createElement('p')
  cn.className = 'xml-comment'
  cn.textContent = xml.textContent
  return cn
}

function textNode(xml) {
  var tn = document.createElement('p')
  tn.textContent = xml.textContent
  return tn
}

function xmlTree(xml) {
  return xml.nodeType == Node.TEXT_NODE ? textNode(xml)
       : xml.nodeType == Node.COMMENT_NODE ? commentNode(xml)
       : elementTree(xml)
}

function parse(load) {
  var p = new DOMParser(),
      d = p.parseFromString(load.target.result, "application/xml")
  appendXmlChildren(document.body, d)
}

function readErr(err) {
  console.error(err)
}

function loadFile(files) {
  var r = new FileReader()
  r.onload = parse
  r.onerror = readErr
  r.readAsText(files[0])
}

function appendXmlChildren(container, xml) {
  var cs = xml.childNodes
  for (var i = 0; i < cs.length; i++) {
    container.appendChild(xmlTree(cs[i]))
  }
}
function appendXmlAttrs(container, xml) {
  for (var i = 0; i < xml.attributes.length; i++) {
    var a = xml.attributes[i],
        dt = document.createElement('dt'),
        dd = document.createElement('dd')
    container.appendChild(dt)
    container.appendChild(dd)
    dt.textContent = a.name
    dd.textContent = a.value
  }
}
</script>

<input type=file onchange="loadFile(this.files)">

</body></html>
	<!DOCTYPE html>
	<html><head>

	<meta charset="utf-8">

	<style>
	ol { padding-left: 0; }
	details > summary ~ * { margin: 0 0 0 1em; }
	p { margin: 0; }
	p.xml-comment { color: #8c8; }
	/* dt, dd look like xml attributes */
	dt {
	float: left;
	color: #44f;
	}
	dt:after {
	display: inline-block;
	content: "=";
	color: #ccc;
	}
	dd { margin-left: 1ex; }
	</style>

	</head><body>

	<script>
	'use strict'

	function elementTree(xml) {
	var container = document.createElement('details'),
	tag = document.createElement('summary'),
	attrs = document.createElement('dl'),
	children = document.createElement('ol')

	tag.textContent = xml.nodeName
	container.appendChild(tag)

	appendXmlAttrs(attrs, xml)
	container.appendChild(attrs)

	appendXmlChildren(children, xml)
	container.appendChild(children)

	return container
	}

	function commentNode(xml) {
	var cn = document.createElement('p')
	cn.className = 'xml-comment'
	cn.textContent = xml.textContent
	return cn
	}

	function textNode(xml) {
	var tn = document.createElement('p')
	tn.textContent = xml.textContent
	return tn
	}

	function xmlTree(xml) {
	return xml.nodeType == Node.TEXT_NODE ? textNode(xml)
	: xml.nodeType == Node.COMMENT_NODE ? commentNode(xml)
	: elementTree(xml)
	}

	function parse(load) {
	var p = new DOMParser(),
	d = p.parseFromString(load.target.result, "application/xml")
	appendXmlChildren(document.body, d)
	}

	function readErr(err) {
	console.error(err)
	}

	function loadFile(files) {
	var r = new FileReader()
	r.onload = parse
	r.onerror = readErr
	r.readAsText(files[0])
	}

	function appendXmlChildren(container, xml) {
	var cs = xml.childNodes
	for (var i = 0; i < cs.length; i++) {
	container.appendChild(xmlTree(cs[i]))
	}
	}
	function appendXmlAttrs(container, xml) {
	for (var i = 0; i < xml.attributes.length; i++) {
	var a = xml.attributes[i],
	dt = document.createElement('dt'),
	dd = document.createElement('dd')
	container.appendChild(dt)
	container.appendChild(dd)
	dt.textContent = a.name
	dd.textContent = a.value
	}
	}
	</script>

	<input type=file onchange="loadFile(this.files)">

	</body></html>