JS第六天

1.DOM复制节点的方法:先获取要复制的节点,用旧节点调用cloneNode方法复制一个新节点,然后将新节点插入到父节点上;删除节点removeChild

function copy(){
    //获取要复制的节点
    var li=ul.getElementsByTagName("li")[0];
    //复制旧节点,获取新节点
    //false浅复制,true深复制
    //var newli=li.cloneNode(false);
    var newli=li.cloneNode(true);
    //将新节点添加到父节点ul上
    ul.appendChild(newli);
}

2.DOM为下拉菜单添加选项的方式:先在Body下新建一个select下拉菜单节点,用new Option(文本,value,默认选中,是否被选中)新建一个选项,然后用下拉菜单节点调用appendChild方法插入到下拉菜单里

function create(){
    //创建下拉元素节点
    sel=document.createElement("select");
    //给sel属性节点复制
    sel.id="myselect";
    sel.size=3;
    //将下拉菜单添加值body标签
    //获取body元素节点
    var body=document.getElementsByTagName("body")[0];
    body.appendChild(sel);
    //c创建选项节点
    for(var i=0;i<5;i++){
        //格式:选项节点=new option(text,value)
        var op=new Option("选项"+i,i);
        //将选项添加到select标签
        sel.options[i]=op;
    }
}

3.删除下拉菜单选项:获取要删除的选项的下标,用父节点调用remove方法删除

function del(){
    //获取最后一个option元素的下标
    var index=sel.options.length-1;
    //删除最后一个元素
    sel.remove(index);
}

4.一次性清空下拉菜单选项:直接让下拉菜单选项的数组长度变为0

function clear1(){
    //r让select的元素节点变为Null
    sel.options.length=null;
}

5.DOM动态删除增加表格内容:先创建一个table节点,插入到body里,然后用table调用insertrow方法插入行,再用插入的行节点调用insertcell方法插入列

function create(){
    //创建table元素节点
    var table=document.createElement("table");
    //设置属性
    table.border="1px";
    //获取body
    var body=document.getElementsByTagName("body")[0];
    //将table标签添加至body
    body.appendChild(table);
    //循环插入行
    for(var i=0;i<5;i++){
        var tr=table.insertRow(i);
        //插入四列
        for(var j=0;j<4;j++){
            var td=tr.insertCell(j);
            td.innerHTML="第"+(i+1)+"行,第"+(j+1)+"列";
        }
    }
}

 

posted @ 2020-08-24 17:18  杰斯-java  阅读(115)  评论(0)    收藏  举报