Javascript之DOM

1.访问节点:
访问html元素:var oHtml=document.documentElement;
获取head元素:var oHead=oHtml.firstChild;
获取body元素:var oBody=oHtml.lastChild; 或者 var oBody=document.body;

也可以通过childNodes来做同样的工作:
var oHead=oHtml.childNodes[0] 或者 oHtml.childNodes.item(0);
var oBody=oHtml.childNodes[1] 或者 oHtml.childNodes.item(1);

判断节点间关系:

alert(oHead.parentNode==oHtml);  
alert(oBody.previousSibling==oHead);
alert(oHead.nextSibling==oBody);
alert(oHead.ownerDocument==document);

2.检测节点类型:
通过节点的nodeType属性来检验节点类型:

alert(document.nodeType);  //输出9

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)创建新节点
createAttribute(name)
createComment(text)
createElement(tagName)
createTextNode(text)

<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>

(3)removeChild(),replaceChild()和insertBefore()
从方法名称就知道是干什么的:删除节点,替换节点,插入节点。需要注意的是replaceChild和insertBefore两个参数都是新节点在前,旧节点在后。

(4)createDocumentFragment()
此方法主要是为了解决大量添加节点时,速度过慢。通过创建一个文档碎片节点,将要添加的新节点附加在此碎片节点上,然后再将文档碎片节点append到body上面,替代多次append到body节点。

<html>
    <head>
        <title>insertBefore() Example</title>
        <script type="text/javascript">
            function addMessages() {
                var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];
 
                var oFragment = document.createDocumentFragment();
 
                for (var i=0; i < arrText.length; i++) {
                    var oP = document.createElement("p");
                    var oText = document.createTextNode(arrText[i]);
                    oP.appendChild(oText);
                    oFragment.appendChild(oP);
                }
 
                document.body.appendChild(oFragment);
 
            }
        </script>
    </script></head>
    <body onload="addMessages()">
 
    </body>
</html>
2 days ago, this page was being read.


    Order by : Newer | Older

  1. 杨晋一 2012-11-13
    @16:54 Reply

    一个从菜鸟级别的程序猿编程技术牛人,最让人振奋的,是一次次走向成功的过程。。。我喜欢享受这种感觉,不为物质,很舒服。。。

Subscribe to Comments