javascript之DOM技术(一)

最新推荐文章于 2024-09-18 08:30:33 发布

chunli9900

最新推荐文章于 2024-09-18 08:30:33 发布

阅读量98

点赞数

原文链接：https://my.oschina.net/u/3462387/blog/917045

版权

全文链接

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

方法                                                               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                                   Y

下面介绍常用的几个方法

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

<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 οnlοad="createMessage()">
    </body>
</html>