本节讲的是全面认识Node对象的属性,注意这里的属性指的是能在IE浏览器中显示的属性。
movie.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="html.xsl"?>
<!DOCTYPE MOVIES [
<!ELEMENT MOVIES (MOVIE)*>
<!ELEMENT MOVIE (POSTER,NAME,DIRECTOR)>
<!ATTLIST MOVIE id CDATA "my movie">
<!ELEMENT POSTER (#PCDATA)>
<!ELEMENT NAME (#PCDATA)>
<!ELEMENT DIRECTOR (#PCDATA)>
<!ENTITY picture "./images/小萝莉的猴神大叔.jpg">
]>
<MOVIES>
<!--一部电影的信息-->
<MOVIE id="1">
<!--海报-->
<POSTER>&picture;</POSTER>
<!--影片名-->
<NAME >小萝莉的猴神大叔</NAME>
<!--导演-->
<DIRECTOR>卡比尔·汗</DIRECTOR>
</MOVIE>
<MOVIE id="2">
<POSTER>./images/红海行动.jpg</POSTER>
<NAME>红海行动</NAME>
<DIRECTOR>林超贤</DIRECTOR>
</MOVIE>
</MOVIES>
全面认识Node对象的属性.html
<!-- File Name: GetElements.htm -->
<HTML>
<HEAD>
<TITLE>全面认识Node对象的属性</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="./css/me.css" type="text/css"/>
<script type="text/javascript" src="./js/me.js"></script>
</HEAD>
<BODY onload="ShowElements(),showFirstChild(),showLastChild(),showXml(),showtext(),showNextSibling(),showParentNode(),showOwnerDocument(),showPreviousSibling()">
<XML ID="dsoXML" SRC="movie.xml"></XML>
<!--<XML ID="moviesXML" SRC="movies.xml"></XML>-->
<H1 class="head">全面认识XML DOM之Node 对象的属性</H1>
<h3 class="movie">movie.xml文件</h3>
<p class="underline">利用Node 对象的属性xml,显示movie.xml的内容</p>
<div id="movie" class="movie">
</div>
<p class="underline">利用Node 对象的属性text,显示movie.xml的文本</p>
<div id="text">
</div>
<br/>
<div id="childNodes">
</div>
<div id="firstChild">
</div>
<div id="lastChild">
</div>
<div id="parentNode">
</div>
<div id="ownerDocument">
</div>
<div id="nextSibling">
</div>
<div id="previousSibling">
</div>
</BODY>
</HTML>
me.js
var type = ["", "ELEMENT_NODE", "ATTRIBUTE_NODE",
"TEXT_NODE", "CDATA_SECTION_NODE", "ENTITY_REFERENCE_NODE", "ENTITY_NODE",
"PROCESSING_INSTRUCTION_NODE", "COMMENT_NODE", "DOCUMENT_NODE", "DOCUMENT_TYPE_NODE",
"DOCUMENT_FRAGMENT_NODE", "NOTATION_NODE"
];
var childNodesHtml;
var firstChildHtml;
var nextSiblingHtml;
function showPreviousSibling () {
Document = dsoXML.XMLDocument;
console.log("showPreviousSibling------------------------------------------------");
var movies=Document.getElementsByTagName("MOVIES")[0];
var movie=Document.getElementsByTagName("MOVIE")[0];
var poster=Document.getElementsByTagName("POSTER")[0];
var name=Document.getElementsByTagName("NAME")[0];
var director=Document.getElementsByTagName("DIRECTOR")[0];
previousSiblingHtml = "<table border=\"3\"><caption>Node 对象的属性previousSibling </caption>" +
"<caption>previousSibling 属性可返回某节点之前紧跟的节点(处于同一树层级)<br/>如果无此节点,则属性返回 null。</caption>" +
"<tr><th>当前节点名称 nodeName</th><th>当前节点的值 nodeValue</th><th>前面紧跟着的节点的名称 previousSibling.nodeName</th><th>前面紧跟着的节点的值 previousSibling.nodeValue</th></tr>" +
"<tr><td>"+ director.nodeName +"</td>" + "<td>"+ director.nodeValue +"</td>"+ "<td>"+ director.previousSibling.nodeName +"</td><td>"+ director.previousSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ name.nextSibling.nodeName +"</td>" +"<td>"+ name.nextSibling.nodeValue +"</td>"+ "<td>"+ name.nextSibling.previousSibling.nodeName +"</td><td>"+ name.nextSibling.previousSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ name.nodeName +"</td>" + "<td>"+ name.nodeValue +"</td>"+"<td>"+ name.previousSibling.nodeName +"</td><td>"+ name.previousSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.nextSibling.nodeName +"</td>" + "<td>"+ poster.nextSibling.nodeValue +"</td>"+"<td>"+ poster.nextSibling.previousSibling.nodeName +"</td><td>"+ poster.nextSibling.previousSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.nodeName +"</td>" + "<td>"+ poster.nodeValue +"</td>"+"<td>"+ poster.previousSibling.nodeName +"</td><td>"+ poster.previousSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ movie.firstChild.nodeName +"</td>" + "<td>"+ movie.firstChild.nodeValue +"</td>"+ "<td>"+ movie.firstChild.previousSibling +"</td><td>"+ movie.firstChild.previousSibling +"</td></tr>" +
"<tr><td>"+ movie.nodeName +"</td>" + "<td>"+ movie.nodeValue +"</td>"+"<td>"+ movie.previousSibling.nodeName +"</td><td>"+ movie.previousSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ movies.firstChild.nodeName +"</td>" + "<td>"+ movies.firstChild.nodeValue +"</td>"+ "<td>"+ movies.firstChild.previousSibling +"</td><td>"+ movies.firstChild.previousSibling +"</td></tr>" +
"<tr><td>"+ movies.nodeName +"</td>" + "<td>"+ movies.nodeValue +"</td>"+ "<td>"+ movies.previousSibling.nodeName +"</td><td>"+ movies.previousSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ movies.previousSibling.nodeName +"</td>" + "<td>"+ movies.previousSibling.nodeValue +"</td>"+ "<td>"+ movies.previousSibling.previousSibling.nodeName +"</td><td>"+ movies.previousSibling.previousSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ Document.firstChild.nextSibling.nodeName +"</td>" + "<td>"+ Document.firstChild.nextSibling.nodeValue +"</td>"+ "<td>"+ Document.firstChild.nextSibling.previousSibling.nodeName +"</td><td>"+ Document.firstChild.nextSibling.previousSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ Document.firstChild.nodeName +"</td>" + "<td>"+ Document.firstChild.nodeValue +"</td>"+ "<td>"+ Document.firstChild.previousSibling +"</td><td>"+ Document.firstChild.previousSibling +"</td></tr>" +
"<tr><td>"+ Document.nodeName +"</td>" + "<td>"+ Document.nodeValue +"</td>"+ "<td>"+ Document.previousSibling +"</td><td>"+ Document.previousSibling +"</td></tr>";
document.getElementById("previousSibling").innerHTML = previousSiblingHtml;
console.log("showPreviousSibling------------------------------------------------");
}
function showNextSibling() {
Document = dsoXML.XMLDocument;
console.log("showNextSibling------------------------------------------------");
var movies=Document.getElementsByTagName("MOVIES")[0];
var movie=Document.getElementsByTagName("MOVIE")[0];
var poster=Document.getElementsByTagName("POSTER")[0];
var name=Document.getElementsByTagName("NAME")[0];
var director=Document.getElementsByTagName("DIRECTOR")[0];
nextSiblingHtml = "<table border=\"3\"><caption>Node 对象的属性nextSibling </caption>" +
"<caption>nextSibling 属性可返回某个元素之后紧跟的元素(处于同一树层级中)。<br/>如果无此节点,则属性返回 null。</caption>" +
"<tr><th>当前节点名称 nodeName</th><th>当前节点的值 nodeValue</th><th>后面紧跟着的节点的名称 nextSibling.nodeName</th><th>后面紧跟着的节点的值 nextSibling.nodeValue</th></tr>" +
"<tr><td>"+ Document.nodeName +"</td>" + "<td>"+ Document.nodeValue +"</td>"+ "<td>"+ Document.nextSibling +"</td><td>"+ Document.nextSibling +"</td></tr>" +
"<tr><td>"+ Document.firstChild.nodeName +"</td>" + "<td>"+ Document.firstChild.nodeValue +"</td>"+ "<td>"+ Document.firstChild.nextSibling.nodeName +"</td><td>"+ Document.firstChild.nextSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ Document.firstChild.nextSibling.nodeName +"</td>" + "<td>"+ Document.firstChild.nextSibling.nodeValue +"</td>"+ "<td>"+ Document.firstChild.nextSibling.nextSibling.nodeName +"</td><td>"+ Document.firstChild.nextSibling.nextSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ movies.previousSibling.nodeName +"</td>" + "<td>"+ movies.previousSibling.nodeValue +"</td>"+ "<td>"+ movies.previousSibling.nextSibling.nodeName +"</td><td>"+ movies.previousSibling.nextSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ movies.nodeName +"</td>" + "<td>"+ movies.nodeValue +"</td>"+ "<td>"+ movies.nextSibling +"</td><td>"+ movies.nextSibling +"</td></tr>" +
"<tr><td>"+ movies.firstChild.nodeName +"</td>" + "<td>"+ movies.firstChild.nodeValue +"</td>"+ "<td>"+ movies.firstChild.nextSibling.nodeName +"</td><td>"+ movies.firstChild.nextSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ movie.nodeName +"</td>" + "<td>"+ movie.nodeValue +"</td>"+"<td>"+ movie.nextSibling.nodeName +"</td><td>"+ movie.nextSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ movie.firstChild.nodeName +"</td>" + "<td>"+ movie.firstChild.nodeValue +"</td>"+ "<td>"+ movie.firstChild.nextSibling.nodeName +"</td><td>"+ movie.firstChild.nextSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.nodeName +"</td>" + "<td>"+ poster.nodeValue +"</td>"+"<td>"+ poster.nextSibling.nodeName +"</td><td>"+ poster.nextSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.nextSibling.nodeName +"</td>" + "<td>"+ poster.nextSibling.nodeValue +"</td>"+"<td>"+ poster.nextSibling.nextSibling.nodeName +"</td><td>"+ poster.nextSibling.nextSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ name.nodeName +"</td>" + "<td>"+ name.nodeValue +"</td>"+"<td>"+ name.nextSibling.nodeName +"</td><td>"+ name.nextSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ name.nextSibling.nodeName +"</td>" +"<td>"+ name.nextSibling.nodeValue +"</td>"+ "<td>"+ name.nextSibling.nextSibling.nodeName +"</td><td>"+ name.nextSibling.nextSibling.nodeValue +"</td></tr>" +
"<tr><td>"+ director.nodeName +"</td>" + "<td>"+ director.nodeValue +"</td>"+ "<td>"+ director.nextSibling +"</td><td>"+ director.nextSibling +"</td></tr>" ;
document.getElementById("nextSibling").innerHTML = nextSiblingHtml;
console.log("showNextSibling------------------------------------------------");
}
function showXml() {
Document = dsoXML.XMLDocument;
console.log("showXml------------------------------------------------");
document.getElementById("movie").innerHTML = "<xmp>" + Document.xml + "</xmp>";
console.log("showXml------------------------------------------------");
}
function showtext() {
Document = dsoXML.XMLDocument;
console.log("showtext------------------------------------------------");
document.getElementById("text").innerHTML = Document.text ;
console.log("showtext------------------------------------------------");
}
function ShowElements() {
//加载xml文件
Document = dsoXML.XMLDocument;
//childNodes 属性
childNodesHtml = "<table border=\"3\"><caption>Node 对象的属性childNodes</caption><caption>childNodes 属性可返回指定节点的子节点的节点列表。<br/></caption><tr><tr><th>节点名称nodeName</th><th>节点类型nodeType</th></tr>";
printChild(Document);
console.log(childNodesHtml)
document.getElementById("childNodes").innerHTML = childNodesHtml;
}
function showFirstChild() {
Document = dsoXML.XMLDocument;
var movies=Document.getElementsByTagName("MOVIES")[0];
var movie=Document.getElementsByTagName("MOVIE")[0];
var poster=Document.getElementsByTagName("POSTER")[0];
var name=Document.getElementsByTagName("NAME")[0];
var director=Document.getElementsByTagName("DIRECTOR")[0];
console.log("firstChild------------------------------------------------");
console.log(movies.firstChild.nodeName)
console.log(movies.firstChild.nodeValue)
console.log(Document.nodeName);
console.log(Document.firstChild.nodeName);
console.log(Document.firstChild.nodeValue);
console.log("firstChild------------------------------------------------");
firstChildHtml = "<table border=\"3\"><caption>Node 对象的属性firstChild </caption>" +
"<caption>firstChild 属性可返回指定节点的首个子节点。</caption>" +
"<tr><th>指定节点名称 nodeName</th><th>首个子节点的名称 firstChild.nodeName</th><th>首个子节点的值 firstChild.nodeValue</th></tr>" +
"<tr><td>"+ Document.nodeName +"</td>" + "<td>"+ Document.firstChild.nodeName +"</td><td>"+ Document.firstChild.nodeValue +"</td></tr>" +
"<tr><td>"+ movies.nodeName +"</td>" + "<td>"+ movies.firstChild.nodeName +"</td><td>"+ movies.firstChild.nodeValue +"</td></tr>" +
"<tr><td>"+ movie.nodeName +"</td>" + "<td>"+ movie.firstChild.nodeName +"</td><td>"+ movie.firstChild.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.nodeName +"</td>" + "<td>"+ poster.firstChild.nodeName +"</td><td>"+ poster.firstChild.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.firstChild.nodeName +"</td>" + "<td>"+ poster.firstChild.firstChild.nodeName +"</td><td>"+ poster.firstChild.firstChild.nodeValue +"</td></tr>" +
"<tr><td>"+ name.nodeName +"</td>" + "<td>"+ name.firstChild.nodeName +"</td><td>"+ name.firstChild.nodeValue +"</td></tr>" +
"<tr><td>"+ director.nodeName +"</td>" + "<td>"+ director.firstChild.nodeName +"</td><td>"+ director.firstChild.nodeValue +"</td></tr>";
document.getElementById("firstChild").innerHTML = firstChildHtml;
}
function showLastChild() {
Document = dsoXML.XMLDocument;
var movies=Document.getElementsByTagName("MOVIES")[0];
var movie=Document.getElementsByTagName("MOVIE")[0];
var poster=Document.getElementsByTagName("POSTER")[0];
var name=Document.getElementsByTagName("NAME")[0];
var director=Document.getElementsByTagName("DIRECTOR")[0];
console.log("lastChild------------------------------------------------");
console.log(movies.lastChild.nodeName)
console.log(movies.lastChild.nodeValue)
console.log(Document.nodeName);
console.log(Document.lastChild.nodeName);
console.log(Document.lastChild.nodeValue);
console.log("lastChild------------------------------------------------");
lastChildHtml = "<table border=\"3\"><caption>Node 对象的属性lastChild </caption>" +
"<caption>lastChild 属性可返回指定节点的最后一个子节点。</caption>" +
"<tr><th>指定节点名称 nodeName</th><th>最后一个子节点的名称 lastChild.nodeName</th><th>最后一个子节点的值 lastChild.nodeValue</th></tr>" +
"<tr><td>"+ Document.nodeName +"</td>" + "<td>"+ Document.lastChild.nodeName +"</td><td>"+ Document.lastChild.nodeValue +"</td></tr>" +
"<tr><td>"+ movies.nodeName +"</td>" + "<td>"+ movies.lastChild.nodeName +"</td><td>"+ movies.lastChild.nodeValue +"</td></tr>" +
"<tr><td>"+ movie.nodeName +"</td>" + "<td>"+ movie.lastChild.nodeName +"</td><td>"+ movie.lastChild.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.nodeName +"</td>" + "<td>"+ poster.lastChild.nodeName +"</td><td>"+ poster.lastChild.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.lastChild.nodeName +"</td>" + "<td>"+ poster.lastChild.lastChild.nodeName +"</td><td>"+ poster.lastChild.lastChild.nodeValue +"</td></tr>" +
"<tr><td>"+ name.nodeName +"</td>" + "<td>"+ name.lastChild.nodeName +"</td><td>"+ name.lastChild.nodeValue +"</td></tr>" +
"<tr><td>"+ director.nodeName +"</td>" + "<td>"+ director.lastChild.nodeName +"</td><td>"+ director.lastChild.nodeValue +"</td></tr>";
document.getElementById("lastChild").innerHTML = lastChildHtml;
}
function showParentNode() {
console.log("showParentNode------------------------------------------------");
Document = dsoXML.XMLDocument;
var movies=Document.getElementsByTagName("MOVIES")[0];
var movie=Document.getElementsByTagName("MOVIE")[0];
var poster=Document.getElementsByTagName("POSTER")[0];
var name=Document.getElementsByTagName("NAME")[0];
var director=Document.getElementsByTagName("DIRECTOR")[0];
parentNodeHtml = "<table border=\"3\"><caption>Node 对象的属性parentNode </caption>" +
"<caption>parentNode 属性可返回某节点的父节点。</caption>" +
"<tr><th>指定节点名称 nodeName</th><th>指定节点的值 nodeValue</th><th>该节点的父节点的名称 parentNode.nodeName</th><th>该节点的父节点的值 parentNode.nodeValue</th></tr>" +
"<tr><td>"+ director.lastChild.nodeName +"</td>"+"<td>"+ director.lastChild.nodeValue +"</td>" + "<td>"+ director.lastChild.parentNode.nodeName +"</td><td>"+ director.lastChild.parentNode.nodeValue +"</td></tr>" +
"<tr><td>"+ director.nodeName +"</td>" +"<td>"+ director.nodeValue +"</td>" + "<td>"+ director.parentNode.nodeName +"</td><td>"+ director.parentNode.nodeValue +"</td></tr>" +
"<tr><td>"+ name.nextSibling.nodeName +"</td>" +"<td>"+ name.nextSibling.nodeValue +"</td>" + "<td>"+ name.nextSibling.parentNode.nodeName +"</td><td>"+ name.nextSibling.parentNode.nodeValue +"</td></tr>" +
"<tr><td>"+ name.lastChild.nodeName +"</td>" +"<td>"+ name.lastChild.nodeValue +"</td>" + "<td>"+ name.lastChild.parentNode.nodeName +"</td><td>"+ name.lastChild.parentNode.nodeValue +"</td></tr>" +
"<tr><td>"+ name.nodeName +"</td>" +"<td>"+ name.nodeValue +"</td>" + "<td>"+ name.parentNode.nodeName +"</td><td>"+ name.parentNode.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.nextSibling.nodeName +"</td>"+"<td>"+ poster.nextSibling.nodeValue +"</td>" + "<td>"+ poster.nextSibling.parentNode.nodeName +"</td><td>"+ poster.nextSibling.parentNode.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.lastChild.lastChild.nodeName +"</td>" +"<td>"+ poster.lastChild.lastChild.nodeValue +"</td>" + "<td>"+ poster.lastChild.lastChild.parentNode.nodeName +"</td><td>"+ poster.lastChild.lastChild.parentNode.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.lastChild.nodeName +"</td>" +"<td>"+ poster.lastChild.nodeValue +"</td>" + "<td>"+ poster.lastChild.parentNode.nodeName +"</td><td>"+ poster.lastChild.parentNode.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.nodeName +"</td>" +"<td>"+ poster.nodeValue +"</td>" + "<td>"+ poster.parentNode.nodeName +"</td><td>"+ poster.parentNode.nodeValue +"</td></tr>" +
"<tr><td>"+ movie.firstChild.nodeName +"</td>" +"<td>"+ movie.firstChild.nodeValue +"</td>" + "<td>"+ movie.firstChild.parentNode.nodeName +"</td><td>"+ movie.firstChild.parentNode.nodeValue +"</td></tr>" +
"<tr><td>"+ movie.nodeName +"</td>" +"<td>"+ movie.nodeValue +"</td>" + "<td>"+ movie.parentNode.nodeName +"</td><td>"+ movie.parentNode.nodeValue +"</td></tr>" +
"<tr><td>"+ movies.nodeName +"</td>" +"<td>"+ movies.nodeValue +"</td>" + "<td>"+ movies.parentNode.nodeName +"</td><td>"+ movies.parentNode.nodeValue +"</td></tr>" +
"<tr><td>"+ Document.firstChild.nodeName +"</td>" +"<td>"+ Document.firstChild.nodeValue +"</td>" + "<td>"+ Document.firstChild.parentNode.nodeName +"</td><td>"+ Document.firstChild.parentNode.nodeValue +"</td></tr>"
document.getElementById("parentNode").innerHTML = parentNodeHtml;
console.log("showParentNode------------------------------------------------");
}
function showOwnerDocument() {
console.log("showOwnerDocument------------------------------------------------");
Document = dsoXML.XMLDocument;
var movies=Document.getElementsByTagName("MOVIES")[0];
var movie=Document.getElementsByTagName("MOVIE")[0];
var poster=Document.getElementsByTagName("POSTER")[0];
var name=Document.getElementsByTagName("NAME")[0];
var director=Document.getElementsByTagName("DIRECTOR")[0];
parentNodeHtml = "<table border=\"3\"><caption>Node 对象的属性ownerDocument </caption>" +
"<caption>ownerDocument 可返回某节点的根节点。</caption>" +
"<tr><th>指定节点名称 nodeName</th><th>指定节点的值 nodeValue</th><th>该节点的根节点的名称 ownerDocument.nodeName</th><th>该节点的根节点的值 ownerDocument.nodeValue</th></tr>" +
"<tr><td>"+ Document.firstChild.nodeName +"</td>" +"<td>"+ Document.firstChild.nodeValue +"</td>" + "<td>"+ Document.firstChild.ownerDocument.nodeName +"</td><td>"+ Document.firstChild.ownerDocument.nodeValue +"</td></tr>"+
"<tr><td>"+ movies.nodeName +"</td>" +"<td>"+ movies.nodeValue +"</td>" + "<td>"+ movies.ownerDocument.nodeName +"</td><td>"+ movies.ownerDocument.nodeValue +"</td></tr>" +
"<tr><td>"+ movie.nodeName +"</td>" +"<td>"+ movie.nodeValue +"</td>" + "<td>"+ movie.ownerDocument.nodeName +"</td><td>"+ movie.ownerDocument.nodeValue +"</td></tr>" +
"<tr><td>"+ movie.firstChild.nodeName +"</td>" +"<td>"+ movie.firstChild.nodeValue +"</td>" +"<td>"+ movie.firstChild.ownerDocument.nodeName +"</td><td>"+ movie.firstChild.ownerDocument.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.nodeName +"</td>" +"<td>"+ poster.nodeValue +"</td>" + "<td>"+ poster.ownerDocument.nodeName +"</td><td>"+ poster.ownerDocument.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.lastChild.nodeName +"</td>" +"<td>"+ poster.lastChild.nodeValue +"</td>" + "<td>"+ poster.lastChild.ownerDocument.nodeName +"</td><td>"+ poster.lastChild.ownerDocument.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.lastChild.lastChild.nodeName +"</td>" +"<td>"+ poster.lastChild.lastChild.nodeValue +"</td>" + "<td>"+ poster.lastChild.lastChild.ownerDocument.nodeName +"</td><td>"+ poster.lastChild.lastChild.ownerDocument.nodeValue +"</td></tr>" +
"<tr><td>"+ poster.nextSibling.nodeName +"</td>" +"<td>"+ poster.nextSibling.nodeValue +"</td>" + "<td>"+ poster.nextSibling.ownerDocument.nodeName +"</td><td>"+ poster.nextSibling.ownerDocument.nodeValue +"</td></tr>" +
"<tr><td>"+ name.nodeName +"</td>" +"<td>"+ name.nodeValue +"</td>" + "<td>"+ name.ownerDocument.nodeName +"</td><td>"+ name.ownerDocument.nodeValue +"</td></tr>" +
"<tr><td>"+ name.lastChild.nodeName +"</td>" +"<td>"+ name.lastChild.nodeValue +"</td>" + "<td>"+ name.lastChild.ownerDocument.nodeName +"</td><td>"+ name.lastChild.ownerDocument.nodeValue +"</td></tr>" +
"<tr><td>"+ name.nextSibling.nodeName +"</td>" +"<td>"+ name.nextSibling.nodeValue +"</td>" + "<td>"+ name.nextSibling.ownerDocument.nodeName +"</td><td>"+ name.nextSibling.ownerDocument.nodeValue +"</td></tr>" +
"<tr><td>"+ director.nodeName +"</td>" +"<td>"+ director.nodeValue +"</td>" + "<td>"+ director.ownerDocument.nodeName +"</td><td>"+ director.ownerDocument.nodeValue +"</td></tr>" +
"<tr><td>"+ director.lastChild.nodeName +"</td>" +"<td>"+ director.lastChild.nodeValue +"</td>" + "<td>"+ director.lastChild.ownerDocument.nodeName +"</td><td>"+ director.lastChild.ownerDocument.nodeValue +"</td></tr>" ;
document.getElementById("ownerDocument").innerHTML = parentNodeHtml;
console.log("showOwnerDocument------------------------------------------------");
}
function printChild(root) {
if(root.hasChildNodes()) {
var childnodes = root.childNodes;
for(var i = 0; i < childnodes.length; i++) {
console.log("Nodename: " + childnodes[i].nodeName);
console.log("nodetype: " + type[childnodes[i].nodeType] + ")<br />");
childNodesHtml += "<tr><td>"+ childnodes[i].nodeName +"</td>" + "<td>"+ type[childnodes[i].nodeType] +"</td></tr>";
printChild(childnodes[i]);
}
}
}
me.css
caption {
color: red;
margin-left: 30%;
}
.underline{
color: red;
margin-left: 38%;
}
.head{
margin-left: 24%;
}
.movie{
width: 700px;
margin-left: 29%;
padding-left: 50px;
}
#text{
width: 800px;
margin-left: 23%;
margin-bottom: 2%;
}
#childNodes{
width: 800px;
margin-left: 32%;
margin-bottom: 3%;
}
#firstChild{
width: 700px;
margin-left: 22%;
margin-bottom: 3%;
}
#lastChild{
width: 800px;
margin-left: 18%;
margin-bottom: 3%;
}
#parentNode{
width: 900px;
margin-left: 14%;
margin-bottom: 3%;
}
#ownerDocument{
width: 900px;
margin-left: 14%;
margin-bottom: 3%;
}
#nextSibling{
width: 900px;
margin-left: 14%;
margin-bottom: 3%;
}
#previousSibling{
width: 900px;
margin-left: 14%;
margin-bottom: 3%;
}
准备好所有的文件后,打开IE浏览器,点击允许阻止的内容。然后,