DOM和表单提操作

一、概念
1、DOM
DOM：Document Object Model 文档对象模型
要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作 htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM 即文档对象模型描 绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于 javascript 的核心地位上。
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚 本中对HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
2、节点
加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这 种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类 型的节点：

节点类型       HTML内容                   例如
文档节点      文档本身                       整个文档document
元素节点       所有的HTML元素         a、div、p
属性节点       HTML元素内的属性     id、href、name、class
文本节点       元素内的文本               hello
注释节点       HTML中的注释           

clipboard1.png

二、元素节点的操作
当 HTML 文档在被解析为一颗 DOM 树以后，里面的每一个节点都可以看做是一个一个的 对象，我们成为 DOM 对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或 者一类节点对象，可以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删 除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合事件使用，就能让我 们的页面在特定时机、特定的事件下执行特定的变换。

1. 获取节点
   在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可 以通过 Document 对象提供的方法，查找、定位某个对象（也就是我们说的节点）。
   注意：操作 dom 必须等节点初始化完毕后，才能执行。处理方式两种:
   （1）把 script 调用标签移到 html 末尾即可；
   （2）使用 onload 事件来处理 JS，等待 html 加载完毕再加载 onload 事件里的 JS。

方法                                        描述 
getElementById()                   根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准 
getElementsByTagName()     根据标签名获取 dom 对象数组 
getElementsByClassName() 根据样式名获取 dom 对象数组 
getElementsByName()           根据 name属性值获取 dom 对象数组，常用于多选获取值 

2. 创建节点和插入节点
   * 创建节点

方法                       描述 
createElement()    创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象 
createTextNode()   创建一个文本节点，可以传入文本内容 innerHTML 
                               也能达到创建节点的效果，直接添加到指定位置了 

    *  插入节点 

方法                         描述 
write()                      将任意的字符串插入到文档中 
appendChild()         向元素中添加新的子节点，作为最后一个子节点 
insertBefore()          向指定的已有的节点之前插入新的节点 
                                    newItem：要插入的节点 
                                    exsitingItem：参考节点    需要参考父节点 

  /**
         * 替换元素
         */
        function replaceNode() {
            // oldNode.parentNode.replaceChild(newNode,oldNode) 
            // 首先通过旧节点定位到父节点，然后用新的节点替换旧节点
            var cxy = document.getElementById("test");
            // 创建新节点
            var span = document.createElement("span");
            span.innerHTML = "攻城狮";
            cxy.parentNode.replaceChild(span,cxy);
        }
        
        /**
         * cloneNode()      复制节点
                var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
                true：深度克隆，可以克隆结构和内容
                false(默认值)：只克隆结构
         */
        function cloneValue() {
            // 得到被克隆的对象
            var cloneValue = document.getElementById("music");
            var newValue = cloneValue.cloneNode(false); // 浅度克隆，只克隆结构
            console.log(newValue);
            var deepValue = cloneValue.cloneNode(true); // 克隆结构及内容
            console.log(deepValue);
            
            // 将克隆好的结果追加到div中
            document.getElementById("mydiv").appendChild(deepValue);
        }
         

3. 间接查找节点

方法|属性        描述 
childNodes ()   返回元素的一个子节点的数组 
firstChild()    返回元素的第一个子节点 
lastChild()     返回元素的最后一个子节点 
nextSibling     返回元素的下一个兄弟节点 
parentNode      返回元素的父节点 
previousSibling 返回元素的上一个兄弟节点 

// 得到div对象
var div1 = document.getElementById("div1");
// childNodes ()        返回元素的一个子节点的数组
console.log(div1.childNodes);
// firstChild()         返回元素的第一个子节点
console.log(div1.firstChild);
// lastChild()      返回元素的最后一个子节点
console.log(div1.lastChild);
// parentNode           返回元素的父节点
console.log(div1.parentNode);
// nextSibling      返回元素的下一个兄弟节点
console.log(div1.nextElementSibling); // 下一个元素节点（元素）
console.log(div1.nextSibling); // 下一个节点（包含文本节点）
//  previousSibling     返回元素的上一个兄弟节点
console.log(div1.previousElementSibling); // 上一个元素节点（元素）
console.log(div1.previousSibling); // 上一个节点（包含文本节点）

4. 替换节点

方法|属性 描述 
replaceChild(newNode,oldNode) 用新的节点替换旧的节点 
    oldNode.parentNode.replaceChild(newNode,oldNode) 
    首先通过旧节点定位到父节点，然后用新的节点替换旧节点

5. 克隆节点

方法|属性 描述 
cloneNode() 复制节点  
var 复制好的节点 = 被复制的节点.cloneNode([true/false]); 
    true：深度克隆，可以克隆结构和内容 
    false(默认值)：只克隆结构 

6. 删除节点
   方法|属性 描述
   removeChild() 从元素中移除子节点
   三、表单操作
   表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之 前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提 高用户的体验度。
   1、获取表单

document.表单名称 
document.getElementById(表单 id);
document.forms[表单名称]
document.forms[索引]; //从 0 开始 
  
    

    
 
    

    
 
 
 

2、获取元素
* 获取 input 的元素

1)、通过 id 获取：document.getElementById(元素 id); 
2)、通过 form.名称形式获取: myform.元素名称;    name 属性值 
3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始 
4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] //从 0 开始 
 
  
    
     
    姓名:
    
   
    密码:
    
      
    个人说明:   
    
    获取元素内容  
    
 
 
 

    *  获取 单选按钮 

前提：将一组单选按钮设置相同的 name 属性值 
(1)获取单选按钮组：   document.getElementsByName("name 属性值");  
(2)遍历每个单选按钮，并查看单选按钮元素的 checked 属性   若
    属性值为 true 表示被选中，否则未被选中  
选中状态设定：  checked=’checked’  或  checked=’true’  或  checked  
未选中状态设定：   没有 checked 属性   或  checked=’false’  
  
     
      1  
      2 
 
    
 

    *  获取 多选按钮 

操作方式与单选同理，不同之处在于可以多选 
var ufav=document.getElementsByName("ufav"); var favstr="";     
for (i=0;i

    *  获取下拉选项 

（1）获取 select 对象： var ufrom = document.getElementById("ufrom"); 
（2）获取选中项的索引： var idx=ufrom.selectedIndex ; 
（3）获取选中项 options 的 value 属性值： 
var val = ufrom.options[idx].value; 
注意：当通过 options 获取选中项的 value 属性值时，  
若没有 value 属性，则取 option 标签的内容  
若存在 value 属性，则取 value 属性的值 
（4）获取选中项 options 的 text： 
var txt = ufrom.options[idx].text; 
选中状态设定：selected='selected'、selected=true、selected 
未选中状态设定：不设 selected 属性   

        来自:
            
                请选择
                北京
                上海
            

    
  

3、提交表单

注：提交表单时，表单元素必须设置name属性值
提交类型：
    get请求
        参数会直接跟在地址栏后面显示，请求参数的长度有限，相对post而言不安全，
            不会自动刷新缓存；每次访问时优先获取缓存中的数据，所以请求速度快。
    post请求 （需要服务器的支持）
        参数不会跟在地址栏后面显示，请求参数长度不限（其实是有长度限制，
            与服务器相关），相对而言安全，会自动刷新缓存；请求速度相对而言慢。
通常做查询操作，使用GET请求；增删改使用POST请求。

提交表单
    （1）使用普通 button 按钮+onclick 事件+事件中编写代码:
    获取表单.submit();
    （2）使用 submit 按钮 + onclick="return 函数()" +函数编写代码: 
    最后必须返回：return true|false;
    （3）使用 submit 按钮/图片提交按钮 + 表单 onsubmit="return 函数();" +函数编写代码: 
    最后必须返回：return true|false;

            姓名：
            
        
        
        

            姓名：
            
        
        
        

            姓名：