DOM对象

XMLDOM

1、创建XML 解析器: （解析XML文件、解析XML字符串）

      xmlDoc=new ActiveXObject("Microsoft.XMLDOM");　　　　　　　　   //Internet Explorer
　　xmlDoc=document.implementation.createDocument("","",null);　　//Firefox, Mozilla, Opera, etc.
　　xmlDoc.async=false;
　　xmlDoc.load("/example/xdom/books.xml");
　　document.write("xmlDoc is loaded, ready for use");

  //Internet Explorer
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text);
  //Firefox, Mozilla, Opera, etc.
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(text,"text/xml");
   

 　　注：关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本。loadXML() 方法用于加载字符串（文本），而 load() 用于加载文件。

　　假如在自己的网页上使用上面的例子，则必须把 XML 文件放到自己的服务器上。否则，xmlDoc.load() 将产生错误 "Access is denied"。

2、DOM 属性、方法

　　1)属性：x.nodeName - x 的名称；x.nodeValue - x 的值；x.parentNode - x 的父节点；x.childNodes - x 的子节点；x.attributes - x 的属性节点；XML 文档的 documentElement 属性是根节点；节点的 nodeName 属性是节点的名称；节点的 nodeType 属性是节点的类型，如果节点类型是 "1"，则是元素节点（元素 1、属性 2、文本 3、注释 8、文档 9）。

　　　　注：nodeName 是只读的，元素节点的 nodeName 与标签名相同，属性节点的 nodeName 是属性的名称，文本节点的 nodeName 永远是 #text，文档节点的 nodeName 永远是 #document。

　　　　元素节点的 nodeValue 是 undefined；文本节点的 nodeValue 是文本自身；属性节点的 nodeValue 是属性的值。

　　　　parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling。

　　　　ProcessingInstruction:表示处理指令；EntityReference:实体引用元素；CDATASection:文档中的 CDATA 区段（文本不会被解析器解析）；Entity：实体；Notation：在 DTD 中声明的符号。

　　　　ProcessingInstruction：target-->节点的内容;Comment：#comment-->注释文本;Text：#text-->节点内容;CDATASection：#cdata-section-->节点内容;

　　　　NodeType --> Named Constant
　　　　1 --> ELEMENT_NODE
　　　　2 --> ATTRIBUTE_NODE
　　　　3 --> TEXT_NODE
　　　　4 --> CDATA_SECTION_NODE
　　　　5 --> ENTITY_REFERENCE_NODE
　　　　6 --> ENTITY_NODE
　　　　7 --> PROCESSING_INSTRUCTION_NODE
　　　　8 --> COMMENT_NODE
　　　　9 --> DOCUMENT_NODE
　　　　10 --> DOCUMENT_TYPE_NODE
　　　　11 --> DOCUMENT_FRAGMENT_NODE
　　　　12 --> NOTATION_NODE

　　　　ownerDocument 返回属性所属的根元素（document对象）;ownerElement 返回属性所附属的元素节点。

　　　　CDATA 区段包含了不会被解析器解析的文本。CDATA 区段中的标签不会被视为标记，同时实体也不会被展开。主要的目的是为了包含诸如 XML 片段之类的材料，而无需转义所有的分隔符。

在一个 CDATA 中唯一被识别的分隔符是 "]]>"，它可标示 CDATA 区段的结束。CDATA 区段不能进行嵌套。

　　3)XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法：在不重新加载页面的情况下更新网页，在页面已加载后从服务器请求数据，在页面已加载后从服务器接收数据，在后台向服务器发送数据。　　2)方法：x.getElementsByTagName(name) - 获取带有指定标签名称的所有元素；x.appendChild(node) - 向 x 插入子节点；x.removeChild(node) - 从 x 删除子节点;获取属性的值：getAttribute() ；getAttributeNode() 方法返回属性节点；setAttribute() 方法设置已有属性的值，或创建新属性；删除元素节点：removeChild() ；根据名称删除属性 removeAttribute() ；根据对象删除属性 removeAttributeNode()；replaceChild() 方法用于替换节点；createElement()、createTextNode()、replaceData() 方法用于替换文本节点中的数据：offset - 在何处开始替换字符，Offset 值以 0 开始；length - 要替换多少字符；string - 要插入的字符串；createCDATASection() 方法创建一个新的 CDATA section 节点。insertBefore() 方法用于在指定的子节点之前插入节点，如果 insertBefore() 的第二个参数是 null，新节点将添加到最后一个已有的子节点之后。insertData() 方法将数据插入已有的文本节点中，有两个参数：offset - 在何处开始插入字符（以 0 开始）、string - 要插入的字符串。cloneNode() 来复制一个节点，并把它追加到 XML 文档的根节点，有一个参数（true 或 false）。

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

　　注：open() 的第三个参数中使用了 "true"。该参数规定请求是否异步处理。True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。

　　onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。

　　通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数。

　　xmlhttp.getAllResponseHeaders();　　xmlhttp.statusText;　　xmlhttp.responseText;　　xmlhttp.status

　　给div设置值：document.getElementById('T1').innerHTML=xmlhttp.responseText;

　　通过 XML HTTP 把一个 textfile 载入一个 div 元素中：xmlhttp.responseText;

　　通过 XML HTTP 进行指定的 HEAD 请求：xmlhttp.getAllResponseHeaders();

　　通过 XML HTTP 进行指定的 HEAD 请求：xmlhttp.getResponseHeader('Last-Modified'); 　　

　　通过 XML HTTP 列出 XML 文件中的数据：xmlhttp.responseXML.documentElement.getElementsByTagName("CD");

 　　4)把 XML 文档打开并发送到服务器上的 ASP 页面，分析此请求，然后传回结果。

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  {// code for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;

  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
</script>
</body>
</html>

　　ASP 页面，由 VBScript 编写：

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)

for each x in xmldoc.documentElement.childNodes
   if x.NodeName = "to" then name=x.text
next
response.write(name)
%>

　　通过使用 response.write 属性把结果传回客户端。

HTML DOM

1、元素类型的NodeType如下：元素 1，属性 2，文本 3，注释 8，文档 9。

2、getElementById() 方法返回带有指定 ID 的元素；getElementsByTagName() 返回带有指定标签名的所有元素；getElementsByClassName()查找带有相同类名的所有 HTML 元素。

3、改变元素内容的最简答的方法是使用 innerHTML 属性，Style样式，

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

　　document.body.style.backgroundColor="lavender";

　　如需删除 HTML 元素，您必须清楚该元素的父元素：child.parentNode.removeChild(child);　　　　parent.replaceChild(para,child);//替换

　　<h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1>　　　　<h1 onclick="changetext(this)">请点击这段文本!</h1>

　　当用户进入或离开页面时，会触发 onload 和 onunload 事件。onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。onload 和 onunload 事件可用于处理 cookies。

　　//navigator.cookieEnabled==true  ;　　

　　onchange 事件常用于输入字段的验证。//x.value.toUpperCase();

　　onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。

　　parentNode、firstChild 以及 lastChild ，在文档结构中进行导航

　　文档的 URL:document.URL;referrer 属性返回加载本文档的文档的 URL:document.referrer；文档的域名：document.domain；

　　打开一个新的文档，添加一些文本，然后关闭它：

function createNewDoc()
  {
  var newDoc=document.open("text/html","replace");
  var txt="<html><body>学习 DOM 非常有趣！</body></html>";
  newDoc.write(txt);
  newDoc.close();
  }

　　文档中锚的数目：document.anchors.length;　　//document.forms.length

　　<body onmousedown="whichButton(event)"><p></p></body>　　

　　//function whichButton(event){var btnNum = event.button;} 　　//0:左键，1中键，2右键；event.clientX；event.keyCode；event.screenX；event.shiftKey==1；event.type

　　<input type="checkBox" onclick="if (this.checked) {convertToUcase()}">

　　把窗口滚动到指定的位置:window.scrollTo(100,500);   滚动文档：window.scrollBy(100,100);　　调整窗口大小:window.resizeTo(500,300)||top.resizeTo(500,300),top.resizeBy(-100,-100)

　　跳出框架：if (window.top!=window.self) {window.top.location="/example/hdom/tryjs_breakout.htm"}; 　　打印：window.print();　　重新加载：window.location.reload();

　　引导到新地址：window.location="/index.html";　　打开新地址并控制外观：window.open("http://www.w3school.com.cn","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")}

　　获取输入值：var name=prompt("请输入您的名字","Bill Gates")；confirm("Press a button!");　　//true|false ；alert("d");