关闭

精通JavaScript开发课时12(DOM操作应用)笔记

标签: 学习笔记javascript
150人阅读 评论(0) 收藏 举报

一、创建、插入和删除元素

1、创建DOM元素

  • createElement(‘标签名’)——创建一个节点
  • appendChild(节点)——追加一个节点

例如:

var oTxt = document.getElementById('txt1');
var oUl = document.getElementById('ul1');
var oBtn = document.getElementById('btn1');

oBtn.onclick=function ()
{
    var oLi=document.createElement('li');
    oLi.innerHTML=oTxt.value;

    //父级.appendChild(子节点);
    oUl.appendChild(oLi);
};

2、插入元素

  • insertBefore(节点,原有节点)——在已有元素前插入
  • 在ie下如果第二个参数的节点不存在,会报错;
    在其他标准浏览器下如果第二个参数的节点不存在,则会以appendChild的形式进行添加,不报错。
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');

oBtn.onclick=function ()
{
    var oLi=document.createElement('li');
    var aLi=oUl.getElementsByTagName('li');

    oLi.innerHTML=oTxt.value;

    //父级.appendChild(子节点);
    //oUl.appendChild(oLi);
    if(aLi.length>0)
    {
        oUl.insertBefore(oLi, aLi[0]);
    }
    else
    {
        oUl.appendChild(oLi);
    }
};

3、删除元素

  • removeChild(节点)——删除一个节点
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');

for(var i=0;i<aA.length;i++)
{
    aA[i].onclick=function ()
    {
        oUl.removeChild(this.parentNode);
    };
}

二、文档碎片

文档碎片可以提高DOM操作性能(理论上)

  • document.createDocumentFragment()
var oUl=document.getElementById('ul1');
var oFrag=document.createDocumentFragment();

for(var i=0;i<10000;i++)
{
    var oLi=document.createElement('li');
    oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1187次
    • 积分:74
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档