博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Unit03: 增加、删除和替换节点 、 常用 HTML DOM 对象
阅读量:4965 次
发布时间:2019-06-12

本文共 1413 字,大约阅读时间需要 4 分钟。

【创建和删除节点】

1.如何创建节点:(创建元素节点)3步:

       1.先创建空元素对象:

         var newElem=document.createElement("标签名");

       2.设置必要属性:

         newElem.属性名="值";

         newElem.innerHTML="文本";

       3.将新元素对象挂载到指定父元素下:

         - 追加:parent.appendChild(newElem); ***只有向已经存在页面中的元素追加新节点才会渲染;

         - 插入:parent.insertBefore(新,firstChild);

2.创建文档片段:      documentfragment;

       文档片段:内存中,临时存贮多个子节点的空间;

       使用:反复追加多个平级元素;

       解决:将所有平级元素追加到文档片段中,将文档片段一次性追加到父元素下;文档片段不参与追加;

       var fragment=document.createDocumentFragment();

3.删除节点:

       - parent.removeChild(oldElem);-->oldElem.parentNode.removeChild(oldElem);

4.替换节点:

       - parent.replaceChild(new,old);

 

onchange:当内容发生改变时触发;

select对象:selectedIndex;选项的下标;

 

【HTML DOM常用对象】

1.table

       - 属性:

         tHead tFoot tBodis

         rows:获得表中所有行对象;

         rows[i]-->某一行;

         rowIndex:当前行下标的位置,用于删除行;

 

         TableRow对象:代表table对象中的某一个tr对象;

         table.rows集合,就是一组TableRow对象的集合;

 

         cells:当前行中所有td对象;

         cells[i]:

         cellIndex:

 

       - 方法:

         tbody.insertRow(rowIndex):rowIndex写-1;在末尾追加;没有给创建文档片段的机会;*** 创建和挂载

         deleteRow(rowIndex);

         tr.insertCell(index);--》只能创建td*** 创建和挂载

         deleteCell(rowIndex);

 

2.select对象

       - options:select下所有的option;

         options[i];

         selectedIndex:获得当前选中的option的下标;

 

       - option对象:

         var newopt=new Option(innerHTML,value);创建对象,同时设置innerHTML和value;**********

 

       - select.add(新option) 只挂载;  select.add(new Option(innerHTML,value))**********

         remove(index);

         index:获得当前的option的下标,用于删除

         selected:

             

3.form对象

       - 找到form对象

         var form=document.forms[i/name];

         var element=form.elements[i/name];

 

         事件:onsubmit:在正式提交表单前自动触发;

转载于:https://www.cnblogs.com/mbyund/p/6406909.html

你可能感兴趣的文章
简单权限管理系统原理浅析
查看>>
springIOC第一个课堂案例的实现
查看>>
求输入成绩的平均分
查看>>
php PDO (转载)
查看>>
wordpress自动截取文章摘要代码
查看>>
[置顶] 一名优秀的程序设计师是如何管理知识的?
查看>>
scanf和gets
查看>>
highcharts 图表实例
查看>>
ubuntu下如何查看用户登录及系统授权相关信息
查看>>
秋季学期学习总结
查看>>
SpringBoot 优化内嵌的Tomcat
查看>>
【LaTeX】E喵的LaTeX新手入门教程(1)准备篇
查看>>
highcharts曲线图
查看>>
extjs动态改变样式
查看>>
PL/SQL Developer 查询的数据有乱码或者where 字段名=字段值 查不出来数据
查看>>
宏定义
查看>>
ubuntu12.04 串口登录系统配置
查看>>
笔记:git基本操作
查看>>
生成php所需要的APNS Service pem证书的步骤
查看>>
JavaWeb之JSON
查看>>