DOM学习笔记(一)

DOM即Document Object Model（文档对象模型），将HTML文档表示成一棵对象树，文档里面的嵌套标签则表示成对象树上面对象的继承关系。对象树上面的任何对象都表示HTML的一个节点Node.

在DOM中常用的Node类型有4种element nodes (HTML tags)、attribute nodes 、 text nodes、document node 。element nodes即基本的HTML标签，attribute node即标签中的属性，例如align属性，text node即文本如this is a text node 中的this is a text node。document node就是DOM中的根节点，即当前的document。下面就介绍几个例子，看看是否知道HTML中的元素如何在DOM中表现。

1、This is a paragraph

上面那句话表示：你创建了两个节点，一个element node P和一个text node ，其中text node的内容为"This is a paragraph"。text node 又被嵌套在中，所以text node又是element node 的子节点，反过来element node 是他的父节点。形象点表示就是：

<-- element node

This is a paragraph <-- text node

2、This is a paragraph

element node P有两个子节点，其中的element node B 又有自己的子节点。

3、This is a paragraph

经过测试，好像IE中没有把attribute nodes 作为节点。测试代码：var a = document.getElementsByTagName('p')[0];alert(a.childNodes.length);

经过这几个例子大概就能了解DOM和HTML的关系了，接下来就是操作DOM了，如何进行查找节点、改变节点、添加节点、改变节点的属性。

在DOM树中，只需要了解5个属性、2个数组就行了。他们就是：firstChild、lastChild、nextSibling、parentNode、previousSibling、childNodes[]、children[]

他们分别的意思是：得到第一个子节点、得到最后一个节点、得到之后的一个兄弟节点（和当前节点属于同一个父节点）、父节点、得到之前的一个兄弟节点、当前节点的所有子节点（包括text node、以及其他的如comment node）、当前节点的所有子节点（仅仅包含element node）

知道这些你就能进行基本的定位了。下面就来做做这个例子：

<html>
<head>
<title>just be the title</title>
</head>
<body>
<p align="right">This is a <font color="red">paragraph</font></p>
<input type="button" value="click me" id="button1" onclick="fun()">ssss</input>
</body>
</html>

问题：如何得到P标签、如何得到font节点

答案是：document.body.firstChild document.body.firstChild.nextSibling

如果你不相信的话，你可以这样：alert(document.body.firstChild.getAttribute('align'));这样的话如果弹出框是right得话就证明是对的了。

通过上面的5个属性、2个数组你能得到想要的，但是你会发现好慢。如何快速的定位到一个节点，这就需要用到另外的方法了。getElementById()、getElementsByTagName()、getElementByName()。其中getElementById()返回的是某一个id为特定值的节点，而后面两个返回的都是节点数组。再介绍下操作节点的几个方法appendChild()、removeChild()、replaceChild()。下面来完成一道题目：Form表单里面有一组单选按钮，怎么实现删除最后一单选按钮？

<form action="radioServlet" method="post" name="danxuan">
          请输入题目：
               <input type="text" name="title" style="overflow-x:visible;width:60;"/><br/>

               <input type="button" id="del" value="减少选项" onclick="delChoice()"/>
            A<input type="text" name="choices" value="aaa"/>
            B<input type="text" name="choices" value="aaa"/>
            C<input type="text" name="choices" value="aaa"/>
            D<input type="text" name="choices" value="aaa"/>
            <input type="text" name="answer"><br/>
            <input type="submit" value="提交"><br/>
       </form>

参考答案：

function delChoice(){
   var ipts = document.getElementsByName("choices");
   if(ipts.length>0){
       ipts[ipts.length-1].parentNode.removeChild(ipts[ipts.length-1].previousSibling);
       ipts[ipts.length-1].parentNode.removeChild(ipts[ipts.length-1]);
    }
}

当然方法很多的，关键是你要知道如何定位节点，至于这些方法，一般来说用两遍就会了。

快下班了，就写到这了。下次继续。

参考：http://www.quirksmode.org/dom/w3c_core.html#nodeinformation

posted on 2011-10-27 11:57 sp2012 阅读(219) 评论(0) 编辑收藏举报