DOM简介
    全称Document Object Model,即文档对象模型。DOM描绘了一个层次化的树,允许开发人员添加、删除、修改页面的某一部分。
    浏览器在解析HTML页面标记的时候,其实不是按照一行一行读取并解析的,而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树,组建好之后,按照树的结构将页面显示在浏览器的窗口中。


节点层次
    HTML网页是可以看做是一个树状的结构,如下:
 

  html
     |-- head
     |     |-- title
     |     |-- meta
     |     ...
     |-- body
     |     |-- div
     |     |-- form
     |     |     |-- input
     |     |     |-- textarea
     ...   ...   ...

    这是一颗树,是由多个节点(Node)组成的,节点的类型有很多种。
    节点最多有一个父节点,可以有多个子节点。

HTML DOM 定义了访问和操作HTML文档的标准方法。


document  : 代表当前页面的整个文档树。
访问属性
   

        all
        forms
        images
        links
        body


 


获取节点对象案例

    document.getElementById("html元素的id")
    document.getElementsByTagName("标签名")
    document.getElementsByName("html元素的name")     

 


通过节点关系查找节点
    从一个节点出发开始查找:

     parentNode    获取当前元素的父节点。
    childNodes    获取当前元素的所有下一级子元素。
    firstChild    获取当前节点的第一个子节点。
    lastChild    获取当前节点的最后一个子节点。
    nextSibling        获取当前节点的下一个节点。(兄节点)
    previousSibling    获取当前节点的上一个节点。(弟节点)
    示例1:
        firstChild属性最普遍的用法是访问某个元素的文本:
        var text=x.firstChild.nodeValue;
        
    示例2:    
        parentNode 属性常被用来改变文档的结构。
        假设您希望从文档中删除带有 id 为 "maindiv" 的节点:
        var x=document.getElementById("maindiv");
        x.parentNode.removeChild(x); 


 


获取节点对象的信息
    每个节点都包含的信息的,这些属性是:
    nodeType    节点类型
    nodeName    节点名称
    nodeValue    节点值

    nodeType
    nodeType 属性可返回节点的类型。    
        ---------------------------------
        元素类型 节点类型
        ------------------
          元素        1        就是标签元素,例<div>..</div>
          文本        3        标签元素中的文本
          注释        8       表示为注释

    nodeName
        nodeName 属性含有某个节点的名称。
        --------------------------------
        元素节点的 nodeName 是标签名称
        属性节点的 nodeName 是属性名称
        文本节点的 nodeName 永远是 #text
        文档节点的 nodeName 永远是 #document

    nodeValue
        对于文本节点,nodeValue 属性是所包含的文本。
        对于属性节点,nodeValue 属性是属性值。
        对于注释节点,nodeValue 属性注释内容。
        nodeValue 属性对于文档节点和元素节点是不可用的。

 


节点操作
 创建新节点

    document.createElement("标签名")        创建新元素节点
    elt.setAttribute("属性名", "属性值")    设置属性
    elt.appendChild(e)                        添加元素到elt中最后的位置
    elt.insertBefore(new, child);            添加到elt中,child之前。
                                               // 参数1:要插入的节点  参数

 


插入目标元素的位置    

    elt.removeChild(eChild)                    删除指定的子节点

创建节点

document.createElement("标签名")        创建新元素节点
elt.setAttribute("属性名", "属性值")    设置属性
添加节点到文档树上:
elt.appendChild(e)                        添加元素到elt中最后的位置  把元素添加最后一个子节点的后面。
elt.insertBefore(new, child);            添加到elt中,child之前。// 参数1:要插入的节点  参数2:插入目标元素的位置      

正则表达式

位置:
        ^        开头
        $        结尾
次数:
        *        0或多个
        +        1或多个
        ?        0或1个
        {n}        就是n个
        {n,}    至少n个
        {n,m}    最少n个,最多m个
通配符:
        \d        任意数字
        \D        任意非数字
        \s        任意空白
        \S        任意非空白
        .        任意字符(除'\n'外)
组合:
        [a-z]
        [0-9]
        等
组:
        (正则)        匹配括号中正则表达式对应的结果,并暂存这个结果。
        (?:正则)    匹配括号中正则表达式对应的结果,但不暂存这个结果。
        \数字        使用第n个组匹配的结果
使用正则的工具(RegExp类与相关方法)
创建:
        // 方式一
        var regex = new RegExp("正则表达式", "标志");
        // 方式二
        var regex = /正则表达式/标志
参数说明:
正则表达式:
    参见上面的规则
标志:
    g (全文查找出现的所有 pattern)
    i (忽略大小写)
    m (多行查找)
方法:
        Regexp.test( str )
        String.replace( regex, str )