DOM-第四周学习笔记4

一、创建元素：2步

        1、创建空标签：var elem=document.createElement("标签名");
                 比如：var a=document.createElement("a");

        2、添加必要的属性 和 事件
                elem.属性名="属性值"
                elem.on事件名=function(){操作}
    
    以上两步只是在js内存中创建出了元素，还需要渲染到DOM树上

二、渲染页面方式：3种

        1、父元素.appendChild(新);//新元素会追加到父元素中当最后一个儿子
        2、父元素.insertBefore(新,已有子元素);//新元素会追加到父元素中当儿子，会插到已有子元素的前面
        3、父元素.replaceChild(新,已有子元素);//新元素会替换到父元素中当儿子，会替换已有子元素

三、删除元素

        elem.remove();

四、HTML DOM常用对象

        1、Image对象：图片对象：
       简化了创建方式：var img=new Image();
       不是人人都能简化创建，只有个别可以

        2、Form对象：表单对象：
       简化了查找元素：var form=document.forms[i];//获取页面上的第i个form元素
       简化了查找表单控件元素：var inp=form.elements[i]//获取此form表单中的第i个表单空间元素

        3、Select对象：
        属性：① select.options === select.children 获取到select下面的所有option
                   ② select.selectedIndex;//获取到选中项的下标
        方法：① select.add(option);//将option上树
                   ② select.remove(i);//删除下标为i的option

        专属事件：onchange - 选中项发生改变后才会触发

        4、Option对象：
       简化了创建方式：var opt=new Option("innerHTML","value");
       建议你，如果以后希望创建出opt并且放到select中：一句话完成4个操作
        select.add(new Option("innerHTML","value"))