javascript之DOM技术(一)

转载

谁算法 2017-06-08 14:06:52

javascript之DOM技术(一)_javascript TEXT_NODE                                         3
CDATA_SECTION_NODE                 4
ENTITY_REFERENCE_NODE            5
ENTITY_NODE                                     6
javascript之DOM技术(一)_javascript PROCESSING_INSTRCTION_NODE       7
COMMENT_NODE                             8
DOCUMENT_NODE                            9
DOCUMENT_TYPE_NODE               10
DOCUMENT_FRAGMENT_NODE   11
javascript之DOM技术(一)_javascript NOTATION_NODE                              12

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的创建新节点方法支持的对照表：

javascript之DOM技术(一)_javascript 方法                                                               IE                               FF
createAttribute(name)                                 Y                                Y
javascript之DOM技术(一)_javascript createCDATASection(text)                       N                                Y
createComment(text)                                    Y                                Y
javascript之DOM技术(一)_javascript createDocumentFragment()                        Y                                Y
createElement(tagName)                            Y                                 Y
javascript之DOM技术(一)_javascript createEntityReference(name)                    N                                 Y
createProcessingInstruction(
target,data)                                                 N                                  Y
javascript之DOM技术(一)_javascript createTextNode(text)                               Y                                   Y

下面介绍常用的几个方法

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

javascript之DOM技术(一)_javascript <html>
    <head>
        <title>createElement() Example</title>
        <script type="text/javascript">
javascript之DOM技术(一)_技术_25             function createMessage() {
javascript之DOM技术(一)_技术_26                 var oP = document.createElement("p");
                var oText = document.createTextNode("Hello World!");
                oP.appendChild(oText);
                document.body.appendChild(oP);
javascript之DOM技术(一)_javascript_30             }
        </script>
    </head>
    <body onload="createMessage()">
    </body>
</html>