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)+"列"; } } }
浙公网安备 33010602011771号