javascript之DOM技术(一)

全文链接


None.gifTEXT_NODE                                         3
None.gifCDATA_SECTION_NODE                 4
None.gifENTITY_REFERENCE_NODE            5
None.gifENTITY_NODE                                     6
None.gifPROCESSING_INSTRCTION_NODE       7
None.gifCOMMENT_NODE                              8
None.gifDOCUMENT_NODE                            9
None.gifDOCUMENT_TYPE_NODE               10
None.gifDOCUMENT_FRAGMENT_NODE   11
None.gifNOTATION_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的创建新节点方法支持的对照表:
None.gif方法                                                               IE                               FF
None.gifcreateAttribute(name)                                 Y                                Y
None.gifcreateCDATASection(text)                        N                                Y
None.gifcreateComment(text)                                    Y                                Y
None.gifcreateDocumentFragment()                        Y                                Y
None.gifcreateElement(tagName)                             Y                                 Y
None.gifcreateEntityReference(name)                     N                                 Y
None.gifcreateProcessingInstruction(
None.giftarget,data)                                                   N                                  Y
None.gifcreateTextNode(text)                                  Y                                   Y


下面介绍常用的几个方法

(2)createElement(),createTextNode(),appendChild()
例子:
None.gif<html>
None.gif    <head>
None.gif        <title>createElement() Example</title>
None.gif        <script type="text/javascript">
ExpandedBlockStart.gif             function createMessage()  {
InBlock.gif                var oP = document.createElement("p");
InBlock.gif                var oText = document.createTextNode("Hello World!");
InBlock.gif                oP.appendChild(oText);
InBlock.gif                document.body.appendChild(oP);
ExpandedBlockEnd.gif            }

None.gif        </script>
None.gif    </head>
None.gif    <body οnlοad="createMessage()">
None.gif    </body>
None.gif</html>
None.gif

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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页