javascript之DOM技术(一)

时间 2019-12-28

原文原文链接

TEXT_NODE                                         3
CDATA_SECTION_NODE                 4
ENTITY_REFERENCE_NODE            5
ENTITY_NODE                                     6
PROCESSING_INSTRCTION_NODE       7
COMMENT_NODE                             8
DOCUMENT_NODE                            9
DOCUMENT_TYPE_NODE               10
DOCUMENT_FRAGMENT_NODE   11
NOTATION_NODE                              12html

IE6不支持，不过你能够自定义一个JS对象Node。

3.处理特性
处理特性能够使用标准的NameNodeMap中的方法：
getNamedItem(name) removeNamedItem(name) setNamedItem(node)    item(pos)

好比:<p id="test">测试</p>
假设变量oP是上面的p节点的引用，咱们要访问oP的id属性:
var sId=oP.attributes.getNamedItem("id").nodeValue;

这些方法用起来很累赘,因此DOM又定义了三个方法来简化:
getAttribute(name)         ——返回名称为name的属性的值
setAttribute(name,value) ——顾名思义
removeAttribute(name)    ——顾名思义

上面的例子能够改写为：
var sId=oP.getAttribute("name");

4.访问指定节点：
熟知的getElementByTagName(name),getElementByName(name),getElementById(id)三个方法，再也不展开。

5.建立和操做节点：
（1）建立新节点，一张IE(6.0)和FF对DOM Level1的建立新节点方法支持的对照表：
java

方法                                                               IE                               FF
createAttribute(name)                                 Y                                Y
createCDATASection(text)                       N                                Y
createComment(text)                                    Y                                Y
createDocumentFragment()                        Y                                Y
createElement(tagName)                            Y                                 Y
createEntityReference(name)                    N                                 Y
createProcessingInstruction(
target,data)                                                 N                                  Y
createTextNode(text)                               Y                                   Ynode

下面介绍经常使用的几个方法

（2）createElement(),createTextNode(),appendChild()
例子：
app

<html>
    <head>
        <title>createElement() Example</title>
        <script type="text/javascript">
            function createMessage() {
                var oP = document.createElement("p");
                var oText = document.createTextNode("Hello World!");
                oP.appendChild(oText);
                document.body.appendChild(oP);
            }
        </script>
    </head>
    <body onload="createMessage()">
    </body>
</html>
ide

在页面载入后，建立节点oP，并建立一个文本节点oText,oText经过appendChild方法附加在oP节点上，为了实际显示出来，将oP节点经过appendChild方法附加在body节点上。此例子将显示Hello World!测试