javascript之DOM总结

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 )