javascript学习笔记之DOM与表单

DOM(文档对象模型)，猫叔了一个层次化的节点树

 

一、DOM NODE相关公共属性与方法

DOM中所有节点都实现了NODE接口，该接口的公共属性和方法如下：

1.节点基本属性

1）NodeType 节点类型，利用12个数值来表示。1代表Element，2代表attribute，3代表Text...

2) NodeName与NodeValue 这两个属性的值完全取决于特定的节点类型

2.节点关系相关属性

I.childNodes属性，返回一个NodeList对象，这是一个有生命，会呼吸的对象，能够实时，动态的反映节点结构。具有length属性，也可以利用方括号或者item()访问其中的节点。

与之类似的是children属性，该属性只包含元素中同样还是元素的子节点。这主要是为了解决IE9之前的版本在处理文本节点中的空白符的差异。

II，parentNode属性，previousSibling属性，nextSibling属性，firstChild属性，lastChild属性。 

IV，ownerDocument属性，该属性指向整个文档的文档节点Document.

3.操作节点相关方法

hasChildNodes()方法

1）appendChild()放回新增的节点

2）insertBefore()

3)replaceChild()

4)removeChild()

5)cloneNode()

6)normalize()，其 作用在于处理文档树中相邻的文本节点

4，查找节点的相关方法

1)getElementById() 返回元素，如果调用者是document，那么就在全文档范围内查找，如果是父元素，那么就在其后辈元素中查找

2)getElementsByTagsName() 返回NodeList,其他同上

5，补充

虽然DOM为操作节点提供了丰富的方法，但是在需要给文档插入大量新html标记的情况下，通过DOM仍然非常麻烦，因为不仅要创建一系列的DOM节点，还要小心地按照正确的顺序插入。因此DOM扩展中定义了一下属性：

1.innerHTML属性  在读模式下，innerHTML返回与调用元素的所有子节点对应的html标记。在写模式下，innerHTML会根据制定的值创建新的DOM树，然后用这个DOM树替换掉原来元素的所有子节点。

2）outerHTML属性  在读模式下，innerHTML返回与调用元素的所有子节点对应的html标记。在写模式下，innerHTML会根据制定的值创建新的DOM树，然后用这个DOM树完全替换掉原来元素。

注意的是，为了提高内存和性能，在使用innerHTML，outterHTML属性时候，最好手工删除要被替换元素的所有事件处理程序和JavaScript对象属性。

 

 

 

二、document节点类型

其nodeType为9，nodeName为document，nodeValue为null

1.特有属性

1)docType属性，指向DocumentType子节点

2）documentElement属性，指向html元素

3）body属性，指向body元素

4）title属性，指向文档标题

5）url,domain,referer属性，和http头部的对象字段取值相同

2,特有方法

1）getElementsByName()在获取单元框选中值的时候很有用

2）write(),writeln()用于页面的输出流；

3）open()，close()用于打开和关闭输出流，如果是在页面加载期间使用write(),writeln(),则不需要用到上述两个方法

4）createElement()方法 创建element类型的节点

5)createTextNode()方法，创建Text类型的节点，接受一个参数，为要插入节点中的文本，需要注意的是，作为参数的文本将按照html或者xml的格式进行编码

6)createAttributeNode()方法，创建特性节点

 

三、Elemment类型

nodeType值为1，nodeName为标签名，nodeValue为null

1，特有属性

1)tagName属性 和 nodeName的返回值相同

2)id属性

3）title属性

4)className属性

5）attributes 除非要遍历元素的所有attribute，否则这个属性用的不多

6）style属性，如style.backGround 等，注意的是，这只能获取html代码中内嵌的样式，对于<style>标签中设置的样式，以及外联样式表中的样式，是没有办法获取的。

2，特有方法

1）getAttribute(),setAttribute()和removeAttribute()

 

四、Text类型

NodeType为3，NodeName为#text,nodeValue为节点所包含的文本

1，特有属性

1)data属性，和nodeValue的返回值相同。可以通过appendData(),deleteData(),insertData(offset,text),replaceData(offset,count,text),substringData(offset,count)等方法进行操作

2）length属性，返回文本中字符数目

备注：要访问Element元素中的文本，利用

div.firstChild.data来访问。或者div.childNodes[0].nodeValue来访问

 

五、attr类型

nodeType为1，nodeName为特性名称,nodeValue为特性的值。尽管他们也是节点，但特性并不被认为是dom文档树的一部分。通常使用getAttribute(),setAttribute(),removeAttribute()进行操作

 

最后：

需要注意的是，上述是基本的dom方法，随着前端技术的发展，目前dom也在不断改进，如继承了目前只有类库才提供的选择符方法，html5的data数据操作等。

 

六、表单相关元素

表单元素除了可以运用上述所有DOM相关操作外，为了简化，还有一系列自己的属性和方法。在此一并列出：

获得form的引用，可以利用DOM的getElementXXX相关方法，也可以利用document.forms[数值或者name索引]

 

1.form元素

1）独有的属性：

action:等同于html中的aciton特性

length：表单中控件的个数

method：等同于html中的method

name：等价于html中的name

elements:表单中所有控件的集合。通常利用数值索引或者控件的name作为索引来得到控件的引用，如elements[0]或者elements['username']。这比通常的dom方法要方便得多。

2）独有方法：

a.表单提交

当用户单击提交按钮或者图像按钮的时候，就会提表单，包括

<input type='submit' value='xxx'>

<button type='submit'>提交</button>

<input type-='image' src='xxx'>

用这种方式提交表单，在请求发送之前会触发表单的submit事件，阻止这个事件就可以取消表单提交。

此外，js中利用编程方式调用submit()也会提交表单而无需包含任何提交按钮，不过使用这种方法提交的时候，不会触发submit事件，因此要记得调用此方法之前先验证表单数据。

b.表单重置

同样，重置也有两种方法

用户点击重置按钮，表单会被重置

<input type='reset' value='xxx'>

<button type='reset'>reset</button>

js中调用表单的reset()方法也可以重置表单，和submit（）不同的是，这种方法会像点击重置按钮一样触发reset事件。

 

2.表单字段

表单中的元素字段可以利用dom方法访问，也可以利用form的elements属性，利用数值或者name属性获得具体的引用。这些表单元素的属性和方法如下：

1）共用属性

disabled:代表当前字段是否被禁用。备注：在web开发中，为了避免表单的重复提交，最常见的解决方案是，监听表单的submit事件，在该事件发生时候，设置提交按钮的disable=true.

readOnly：代表是否制度

tabIndex:当前字段的切换(tab)序号

form:指向当前字段所属表单的引用。

name:当前字段的名称、

type:字段类型，如text，radio，checkbox，select one,select multiple等

value:当前字段将被提交至服务器端的值。对于表单字段来说，建议使用value进行属性的读取和设置，而非典型的DOM方法。

　　对于<input type='text'>,<textarea></textarea>来说，用户输入的内容保存在value中。

　　对于select元素，value的值由当前的选中项决定。如果没有选中项，那么为空字符串，如果有多个，则由第一个决定。

2）表单字段的公用方法

blur()

focus()

3)表单字段的共用事件

blur:当前字段失去焦点时候触发

focus：当前字段获得焦点时出发

change：对于<input>,<textarea>等元素，在它们失去焦点并且value值改变的时候触发，对于<select>元素，在选项改变时就会触发。

 

6.1文本框字段

1）文本选择

2）过滤输入，利用keypress事件

3）剪贴板操作

上述事件的具体操作方法暂略，具体可以参见教材

 

6.2选择框select字段

1）特有属性

multiple:boolen值，是否允许多选

options:所有<option>元素的HTMLCollection

selectedIndex：选中项的索引，如果没有则为-1.对于多选，只保存第一项。

选择框下的option也有一些自己特有的属性：

index:当前选项的索引

text：选项的文本

value:选项的值

selected:布尔值，可以利用这个属性设置选项的选择状态，也可以通过遍历该属性，获得多选选择框的所有选项。

2)特有方法

add（newOption,relOption):向控件插入新的option，在relOption之前

remove(index).删除索引为index的option

 

6.3Radio与checkbox

1）特有属性

checked:布尔值，代表是否选中

 

6.4表单序列化

随着ajax的出现，表单序列化已经成为了一种常见需求，在javascript中，可以利用表单字段的type属性，连同name和value属性一起实现对表单的序列化，下面是一段可以借鉴的代码

 

//表单序列化的实现
function serialize(form){
    var parts=[],
    field=null,
    i,
    len,
    j,
    optLen,
    option,
    optValue;

    for(i=0;len=form.elements.length,i<len;i++){
        field=form.elements[i];
        switch(field.type){
            case "select-one":
            case "select-multiple":
                for(j=0;j<field.options.length;j++){
                    option=field.options[j];
                    if(option.selected){
                        optValue="";
                        if(option.hasAttribute){
                            optValue=(option.hasAttribute("value")?:option.value:option.text);
                        }else{
                            opValue=(option.attribute["value"].specified?option.value:option.text);
                        }
                        parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue));
                    }
                }
                break;
            case undefined:
            case "file":
            case "submit":
            case "button":
                break;
            case "radio":
            case "checkbox":
                if(!field.checked){
                    break;
                }
            default:
                if(field.name.length){
                    parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value));
                }
        }    
    }
    return parts.join("&");
}