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

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

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);
阅读更多
文章标签: 学习笔记 javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭