【DOM学习笔记-Unit03】

preview:

HTML DOM的Form元素：
找到表单对象：var form=document.forms[i/name]
找到表单中的元素: var elem=form.elements[i/name]
如果找有name属性的元素可简写为: form.name

form对象的onsubmit事件：在提交之前自动触发，多用于验证所有
form对象都有submit()方法：专用于手动提交表单

正课：
1. 创建和删除节点：
2. HTML DOM常用对象：Table Select Form

1. 创建和删除节点：——核心DOM
   
   1. 创建单个节点：3步:
      
      1. 创建指定名称的空节点对象：
         var newElem=document.createElement(“标签名”);
         比如：var a=document.createElement(“a”);
         
      2. 设置新对象的关键属性：

   比如：
   a.innerHTML="go to tmooc";
   a.href="http://tmooc.cn";
   <a href="http://tmooc.cn">go to tmooc</a> 

    3. 将a加入指定父元素下: 3种方式：
        1. 追加：parent.appendChild(newElem);
        2. 在之前插入：parent.insertBefore(newElem,已有元素)
        3. 替换：parent.replaceChild(newElem,被替换的元素);

 性能问题：单个创建或删除节点都会导致重新layout
 解决：如果同时创建父元素和子元素，都要先创建父元素，再将所有子元素加入父元素中。最后将父元素整体加入页面。
         如果父元素已经在页面上，就要将创建的平级元素先加入到文档片段对象中

 2. 创建多个平级节点：3步
    1. 先创建文档片段对象：
         文档片段：内存中临时存储多个子元素的存储空间
                          充当临时虚拟的父元素
        var frag=document.createDocumentFragment();
     2. 创建多个子元素对象，暂时先加入到文档片段中
         var child1=document.createElement("xxx");
frag.appendChild(child1);
         var child2=document.createElement("xxx");
             frag.appendChild(child2);
      3. 将文档片段整体加入页面父元素中
             parent.appendChild(frag);
          强调：frag不会出现在页面

3. 删除节点：var deletedNode=parent.removeChild(子节点)
只有父元素才有权删除子节点
     子节点删除自己：child.parentNode.removeChild(child);

---

正课：
1. HTML DOM常用对象： Table Select Form

1. Select：
   事件：onchange: 选中项(值)改变时触发
   属性：select.selectedIndex : 获得当前选中项的位置
   select.options : 获得select下所有option对象
   将select.options.length=0，等效于清空所有option
   方法：select.add(option)
   select.remove(index)
   Option：每一个元素
   创建option，同时设置内容和value属性值
   var opt=new Option(innerHTML[,value]);

   固定套路：向select中增加一个option
   

   select.add(new Option(innerHTML[,value]));

   课堂练习：
   问题：html绑定事件 vs js动态绑定事件
   1. html绑定的其实是字符串：

    <select onchange="createSelect(this)"></select>
    function createSelect(){ 
        this
    }

       select.onchange=function(){//this-->select
        //eval("createSelect(this)")
        createSelect(this);//
               }
html绑定this只能通过在html中显式传入
     如果不写，处理函数内部的this-->window
         2. js中动态绑定：
                select.onchange= createSelect;
             执行select.onchange()
              处理函数内的this就指当前触发事件的元素对象本身。

1. Table对象

   THead：
   属性：thead.rows:获得thead下所有tr对象
   TBodies
   属性：tbody.rows:获得tbody下所有tr对象
   TFoot
   属性：tfoot.rows:获得tfoot下所有tr对象

   属性：table.rows ： 获得所有tr对象
   方法：
   var tr=table.insertRow([index]);
   index不省略，会在index位置插入一行
   省略index，在table结尾追加一个新行
   table.deleteRow(index); 删除index位置的行
   强调：删除行只能用行下标

   TableRow对象
   属性：tr.cells : 获取当前行中所有td
   tr.rowIndex : 获得当前tr在table中的位置下标

   方法：
   var td=tr.insertCell(index); // 强调：只能创建td元素
   tr.deleteCell(index); // 删除格，必须用下标

   TableCell对象
   属性：td.cellIndex : 获得td在当前行中的位置下标

   课堂练习：
   警告 与 确认：
   警告：alert(“xxx”)，只能选择确定
   确认：confirm(“xxx”)，两个按钮：确定和取消
   如果点确定，返回true，否则返回false