JavaScript DOM

由于DOM是树形结构,所以一个节点被抽象为对象Node,这是DOM的核心对象。Node的种类一共有12种,通过Node.nodeType的取值来确定。

  • Node.ELEMENT_NODE (1)     
  • Node.ATTRIBUTE_NODE (2)     
  • Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本,它没有子节点     
  • Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode     
  • Node.ENTITY_REFERENCE_NODE (5)      
  • Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>,无子节点     
  • Node.PROCESSING_INSTRUCTION_NODE (7) //PI,无子节点     
  • Node.COMMENT_NODE (8)     
  • Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点     
  • Node.DOCUMENT_TYPE_NODE (10) //DTD,<!DOCTYPE………..>     
  • Node.DOCUMENT_FRAGMENT_NODE (11)     
  • Node.NOTATION_NODE (12) //DTD中的Nation定义     

     

    Node接口包含的属性

    nodeName属性将返回一个字符串,其内容是给定节点的名字。如果节点是元素节点,返回这个元素的名称;如果是属性节点,返回这个属性的名称;如果是文本节点,返回一个内容为#text 的字符串;

    nodeType 属性将返回一个整数,这个数值代表给定节点的类型;

    nodeValue 属性将返回给定节点的当前值.如果节点是元素节点,返回null;如果是属性节点,返回这个属性的名称;如果是文本节点,返回文本节点的内容;

    ownerDocument 指向这个节点所属的文档;

    attributes 包哈勒代表一个元素的特性的Attr对象;仅用于Element节点;

    childNodes 所有子节点的列表;

    firstChild 指向在childNodes列表中的第一个节点;

    lastChild 指向在childNodes列表中的最后一个节点;

    nextSibling 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为null;

    previousSibling 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null;

    parentNode 返回一个给定节点的父节点;

    hasChildNodes() 当childNodes包含一个或多个节点时,返回真;

    appendChild(node) 将node添加到childNodes的末尾;

    removeChild(node) 将node从childNodes中删除;

    insertBefore(newnode refnode) 在childNodes中的refnode之前插入newnode。

     实际应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Dom Example</title>
        <script type="text/javascript">
            var oHtml = document.documentElement; //可以直接访问<html>元素
            document.write("节点名称 :" + oHtml.nodeName + "<br/>");
            document.write("节点类型 :" + oHtml.nodeType + "<br/>");
            document.write(oHtml.ownerDocument + "<br/>");
            document.write(oHtml.nextSibling + "<br/>");
            document.write(oHtml.previousSibling + "<br/>");
            document.write(oHtml.previousSibling.nodeName + "<br/>")
            document.write(oHtml.firstChild.nextSibling + "<br/>");
            document.write(oHtml.firstChild.previousSibling + "<br/>");
            document.write(oHtml.firstChild.nodeValue + "<br/>");
            document.write(oHtml.firstChild.nodeName + "<br/>");
            document.write(oHtml.firstChild.firstChild.nodeName + "<br/>");
            document.write(oHtml.firstChild.lastChild.nodeName + "<br/><br/>");
    
            document.write(oHtml.lastChild + "<br/>");
            document.write(oHtml.lastChild.firstChild + "<br/>");
            document.write(oHtml.lastChild.firstChild.nodeName + "<br/>");
            document.write(oHtml.lastChild.lastChild + "<br/>");
            document.write(oHtml.lastChild.lastChild.nodeName + "<br/><br/>");
    
            document.write(oHtml.childNodes.item(0) + "<br/>");
            document.write(oHtml.childNodes[0] + "<br/>"); //简写,也有同样的结果是HEAD节点  
            document.write(oHtml.childNodes.item(1) + "<br/>");
            document.write(oHtml.childNodes[1] + "<br/>");
    
            var oHead = oHtml.firstChild;
            var oBody = document.body;
            document.write(oHead.parentNode == oHtml );
            document.write(oBody.parentNode == oHtml );
            document.write(oBody.previousSibling == oHead );
            document.write(oHead.nextSibling == oBody );
            document.write(oHead.ownerDocument == document);
        </script>
    </head>
    <body>
        <p>
            Hello World!</p>
        
    </body>
    </html>
    

    输出结果:

    节点名称 :HTML
    节点类型 :1
    [object HTMLDocument]
    null
    [object HTMLCommentElement]
    #comment
    [object HTMLBodyElement]
    null
    null
    HEAD
    TITLE
    SCRIPT

    [object HTMLBodyElement]
    [object Text]
    #text
    [object HTMLBRElement]
    BR

    [object HTMLHeadElement]
    [object HTMLHeadElement]
    [object HTMLBodyElement]
    [object HTMLBodyElement]
    truetruetruetruetrue

    Hello World!


     

  • 你可能感兴趣的:(JavaScript,object,XHTML,null,reference,attributes)