全面认识Node对象的属性

最新推荐文章于 2022-12-04 23:34:29 发布
最新推荐文章于 2022-12-04 23:34:29 发布
阅读量1.1k 收藏
点赞数
分类专栏： xml 文章标签： xml node
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37905259/article/details/80724072
版权

本节讲的是全面认识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浏览器，点击允许阻止的内容。然后，
这里写图片描述

效果图

这里写图片描述

可持续化发展
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS node常用属性和方法
boonyaxnn的博客
04-24 849
一、node常用属性 1.nodeName/nodeType *** 描述：nodeName属性返回节点的名称，nodeType属性返回节点的常数值 语法：node.nodeName/node.nodeType 例子： console.log(document.nodeName,document.nodeType); ...
js_fund:JS 的返工
07-02
这里会详细讲述如何创建和使用对象，包括字面量表示法和构造函数，以及对象属性的访问和修改。符号（Symbol）是ES6新增的数据类型，用于创建唯一的标识符，通常用于对象的属性键，以避免命名冲突，提高代码的安全性...
JS之DOM操作--node简介、node属性、node方法
小白小白从不日别的博客
04-13 1051
主要介绍了js中node节点的常用属性和相关方法
前端创建对象和数组的方法
最新发布
weixin_45096939的博客
12-04 1349
json格式的数据，一般都是成对的键值对，json也是一个对象。js学习中的三种对象： 内置对象---js自带的对象[ Math，Date，String，Array ] 自定义对象---自己定义的构造函数创建的对象 浏览器对象---windows、计时器等等对象设置（获取）属性值的写法：对象.属性； 对象["属性"]；判断是否是数组：1.instanceofconsole.log(arr instanceof Array)； //结果是true，说明value是数组2.Array.isArray(val
Node对象与Element对象
weixin_52102646的博客
11-09 2482
Node对象与Element对象Node对象Node对象是什么继承链关系判断节点类型遍历节点获取父节点空白节点问题空白节点空白节点的解决方案获取子节点获取相邻兄弟节点插入节点appendChild()方法insertBefore()方法删除节点替换节点复制节点textContent属性Element对象定位页面元素定位页面元素的方法遍历元素获取子元素获取相邻兄弟元素属性操作innerHTML属性 你好！ 这是我自己编辑的一些知识点。如果你想学习JavaScript的有关知识, 可以仔细阅读这篇文章，了解一下
html node 属性,HTML DOM setAttributeNode()用法及代码示例
weixin_39552204的博客
06-07 233
HTML DOM中的setAttributeNode()方法用于将指定的属性节点添加到元素。如果指定的属性已经存在，则此方法将替换它。用法:element.setAttributeNode(name)参数：只有一个参数是可接受的名称。名称是要添加的属性节点。这是必填字段。返回值：此方法返回一个表示替换后的属性节点的属性对象，否则返回null。例：HTML DOM setAttributeNode ...
js-notes:一些学习的笔记文档
03-26
JavaScript，简称JS，是一种广泛应用于Web开发的轻量级、解释型编程语言，主要负责处理网页的动态内容、用户交互、以及实现复杂的功能...通过阅读和理解"js-notes-main"中的内容，相信你能对JavaScript有更全面的认识。
class_notes:五十一堂课笔记
03-31
9. 数组和对象操作：熟练运用数组的方法（如map, filter, reduce, find, forEach等）和对象的属性访问与操作，以及数组解构和对象解构赋值。 四、DOM与BOM 10. DOM操作：学习如何通过JavaScript操作HTML元素，包括...
Javascript_Dasar：Materi Javascript dasar sampai异步javascript
02-21
- 对象：学习创建和操作JavaScript对象，包括属性和方法。 - 原型和原型链：理解如何通过原型实现继承，以及如何使用__proto__和Object.getPrototypeOf。 - 构造函数与new操作符：探讨构造函数在创建对象时的作用...
kick-off-koa-answers:完整的所有启动Koa练习的答案
05-18
完成这些练习后，你将对 Koa 有一个全面的认识，并能自信地构建自己的 Node.js Web 应用。 总结来说，Koa 是一个强大的 Node.js 框架，它的中间件系统、错误处理机制和异步编程支持使其成为构建现代 Web 应用的理想...
DOM中的node节点属性详解
weixin_44992737的博客
06-28 672
DOM中的node节点属性详解
NODE属性说明
tian361zyc的博客
06-17 1033
HTML DOM NODE
创建对象的方式
qing_yang_的博客
04-07 454
1、字面量创建 注意： 1、直接使用花括号创建 2、属性名与属性值之间使用冒号 3、“对象名.方法名”使用方法 var obj = { uname : 'kongyoo', sex : 'male', age : 29, sayHi : function(){ console.log('Hi~'); } } console.log(obj.age); obj.sayHi();
Node对象的几个属性
cheng198938的博客
03-20 589
parentNode： Node类型，当前节点的那个唯一的直接父节点对象 children：NodeLList类型，当前节点的所有子节点，组成一个类数组对象 firstChild：Node类型，当前结点的一个子节点 lastChild：Node类型，当前结点的最后一个子节点 nextSibling：Node类型，当前结点的下一个兄弟节点 previousSiblings：Node类型，当
node（对象）
m0_73495603的博客
10-14 332
node 对象
JS 之Node节点的 属性、方法 &获取
热门推荐
xiongfeng
10-22 2万+
JS Node节点的常见属性和方法使用 & 如何获取相应节点和值 一、节点的常用属性和方法 （一）通过具体的元素节点调用如下方法和属性 《1》getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点 《2》appendChild(oNode) 方法给标签对象添加子节点。oNode是要添加的子节点。 《3》removeChild(oNode) removeChild方法删除子节
html dom节点类型,JavaScript HTML DOM节点类型之Node类型介绍
weixin_42504058的博客
06-22 381
JavaScript中所有HTML DOM节点类型都继承自Node类型，因此所有类型的节点都有一些相同的属性和方法。Node接口是DOM1级中定义的一个接口，在JavaScript中Node接口被实现为Node类型。1. 返回节点类型nodeTypenode.nodeType每个节点都有nodeType属性，该属性表示节点类型。节点类型由Node类型中定义12个常量表示：常量值常量名1Node.E...
DOM ----Node类型常用的属性和方法
前端小愤青
09-04 1967
版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/82357068 目录 Node类型 属性 nodeType nodeName nodeValue childNodes parentNode fir...
node属性及方法介绍
chinarenzhou
09-01 4749
node 节点 方法 属性 介绍 nodeType nodeName nodeValue attributes firstChild lastChild childNodes parentNode asChildNodes() removeChild() appendChild() replaceChild() insertBefore() cloneNode()
理解XMLDOMNode对象：属性详解
"XMLDOMNode对象的主要属性" XMLDOMNode对象是用于处理XML文档的核心组件之一，它在许多编程语言中，如JavaScript、VBScript或.NET框架中都有体现。这个对象提供了访问和操作XML文档节点的各种属性和方法。以下是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可持续化发展

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值