论坛首页 Web前端技术论坛

关于Dom的childNodes怎么理解

浏览 14311 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2006-08-17  
今天在搞一个解析dom的小程序遇到了一个问题
用js解析一个很简单的XML
<?xml version="1.0" encoding="UTF-8"?>
<a>
	<b>false</b>	
	<c>reason</c>
</a>

我用这样的代码
<html>
<head>
<script language="javascript" src="selectNodes.js"></script>
<script language="javascript" type="text/javascript">
var xmlHttp;

function createXMLHttpRequest(); 
{

  if (window.ActiveXObject); 
  {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");;
  }


  else if (window.XMLHttpRequest); 
  {
    xmlHttp = new XMLHttpRequest();;
  }
}

function startRequest(); 
{
  
  createXMLHttpRequest();;

  xmlHttp.onreadystatechange = handleStateChange;

  xmlHttp.open("GET", "data.xml", true);;

  xmlHttp.send(null);;
}

function handleStateChange(); 
{

  if(xmlHttp.readyState == 4); 
  {

    if(xmlHttp.status == 200); 
    {
      //alert("The server replied with: " + xmlHttp.responseText);;
      var xd = xmlHttp.responseXML;
      var xn = xd.documentElement;
      
      var ndList = xn.childNodes;
      for(i = 0; i<ndList.length; i++);
      {
      	alert(ndList[i].nodeType+""+ndList[i].tagName);;
      }
      
      alert(xn.childNodes[1].childNodes[0].data);;
      
      alert(xn.childNodes[3].childNodes[0].data);;
      
      
      
      
      //alert(xn.firstChild.getAttribute(););;
    }
  }
}
startRequest();
</script>
</head>
<body>
  <input type="button" value="click" onclick="startRequest();">
</body>
</html>

我的Dom根元素为什么有5个childNodes,我认为是2个呀
而且得到的5个childNode的类型不一样
0-textNode
1-elementNode
2-textNode
3-elementNode
4-textNode
为什么对于tag b的index是1
对于tag c的index是3呢?
对dom的内部结构不是很了解,望执教!

注:引用的selectNodes.js是从dlee老大哪里下载的!用于补充FF上没有selectSingleNode()的。
   发表时间:2006-08-17  
<?xml version="1.0" encoding="UTF-8"?>
<a>
	THIS IS
	<b>false</b>
         B
	<c>reason</c>
	THAT IS
</a>

如果这样写这个XML给能够解释了,并且完全可以得到值
但是这个XML怎么会是正确的呢?
难道两个<>之间一定有一个Text域吗?
0 请登录后投票
   发表时间:2006-08-18  
因为中间有空格和换行。
0 请登录后投票
   发表时间:2006-08-18  
的确是这样子,把xml改成
<?xml version="1.0" encoding="UTF-8"?>
<a><b>false</b><c>reason</c></a>

就只有childNodes.length就为2了
但是我平时写xml配置文件都是像这样
<?xml version="1.0" encoding="UTF-8"?>
<a>
	<b>false</b>
	<c>reason</c>
</a>

well form的呀,那程序中解析xml文件难道还要depends on 我写的xml文件是什么格式吗?
还是不用childNodes来访问节点呢?
0 请登录后投票
   发表时间:2006-08-18  
可以用getElementsByTagName()

或者在取到xml后,手动清除其中不必要的换行和空格,就像Prototype里面的Element.cleanWhitespace(element)。不过这个只是对一层子节点的去除空格,你可以自己修改一下变成对全文档的。
0 请登录后投票
   发表时间:2006-08-18  
我把后台构建好的Document对象采用如下方式传给客户端
Document doc = someGetDocumentMethod();
DOMSource doms = new DOMSource (doc);;
StreamResult sr = new StreamResult (out);;
		
try{
	TransformerFactory tf=TransformerFactory.newInstance();;	
			Transformer t=tf.newTransformer ();;
			t.transform(doms,sr);;
}catch (TransformerConfigurationException tce);
{			
	tce.printStackTrace();;		
}
	catch (TransformerException te); 
{					
	te.printStackTrace ();;		
}

但是jsp中得到的xml内容是正确的,但是前面无缘无故多了好多空格,不知道怎么才能把它们去掉呢?代码中的out是jsp中的out对象
0 请登录后投票
   发表时间:2006-08-18  
为什么会出现那些空格呢?
0 请登录后投票
   发表时间:2006-08-21  
试试在输出前transformer.setOutputProperty(OutputKeys.INDENT,"no");呢?
0 请登录后投票
   发表时间:2006-08-21  
之所以有空格问题,个人观点是因为你使用的浏览器在实现DOM的时候产生的,建议你看看WEB重构或庄表伟的AJAX新手快车道,就知道了....
0 请登录后投票
   发表时间:2006-08-22  
自然是5个子节点,DOM的节点分为Element,Text,Attr,Comment,CDATASection等等类型。
比如:
&lt;x&gt;Hello, w&lt;/x&gt;其中x这个节点的类型是Element,它有一个子节点,类型是Text,子节点的值是"Hello, w"。由于任何空白也是文本,也算作文本节点,所以回车和\t,空格这些空白字符也是节点了。
你有两个办法解决这个问题:
一、filter你的childNodes,根据childNodes[i].nodeType == ELEMENT来过滤。
二、你可以不使用childNodes,而使用getElementsByTagName('*')来获取子元素节点。这个直接就是两个元素类型的节点了。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics