DOM 节点的增删改查

最新推荐文章于 2023-12-24 22:01:41 发布

M_r_J_

最新推荐文章于 2023-12-24 22:01:41 发布

阅读量418

点赞数

分类专栏： js 文章标签： dom NODE

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

创建DOM元素
•createElement(标签名) 创建一个节点
•appendChild(节点) 追加一个节点
例子：为ul插入li

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创建li</title>
<script>
window.onload=function()
{
    //获取按钮
    var oBtn=document.getElementById('btn1');
    //获取文本
    var oTxt=document.getElementById('txt1');
    //获取ul
    var oUl=document.getElementById('ul1');
    oBtn.onclick=function()
    {
        //在do里创建li
        var oLi=document.createElement('li');
        //文本框的值赋予oli
        oLi.innerHTML=oTxt.value;
        //父类添加子节点
        oUl.appendChild(oLi);
        //清空txt里的值
        oTxt.value='';
        }
    }
</script>
</head>

<body>

<input id="txt1" type="text" />
<input id="btn1" type="button" value="创建Li"/>
<ul id="ul1">
    <li>aaa</li>
</ul>
</body>
</html>

插入元素
•insertBefore(节点, 原有节点) 在已有元素前插入
例子：倒序插入li

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父.insertBefore(子节点，谁之前)</title>
<script>
window.onload=function()
{
    var oBtn=document.getElementById('btn1');
    var oTxt=document.getElementById('txt1');
    var oUl=document.getElementById('ul1');

    oBtn.onclick=function()
    {    //创建个li
        var oLi=document.createElement('li');
        //获取ul里的li
        var aLi=oUl.getElementsByTagName('li');
        //把otxt的值赋予oli
        oLi.innerHTML=oTxt.value;
        //插入到oul里ali[0]坐标之前；
        oUl.insertBefore(oLi, aLi[0]);
        oTxt.value='';
        }
    }
</script>
</head>

删除DOM元素
•removeChild(节点) 删除一个节点
例子：删除li

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>删除节点</title>
<script>
window.onload=function()
{
    var aA=document.getElementsByTagName('a');
    var oUl=document.getElementById('ul1');
    var i=0;
    for(i=0; i<aA.length; i++)
    {  
        //点击a标签执行函数
        aA[i].onclick=function()
        {
            //删除oul的父级；
            oUl.removeChild(this.parentNode);
            }
        }    
    }
</script>
</head>

<body>
<ul id="ul1">
    <li>sdfsdf <a href="javascript:;">删除</a></li>
    <li>3432 <a href="javascript:;">删除</a></li>
    <li>tttt <a href="javascript:;">删除</a></li>
    <li>ww <a href="javascript:;">删除</a></li>
</ul>

文档碎片
•文档碎片可以提高DOM操作性能(理论上)
•文档碎片原理
document.createDocumentFragment

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试文档碎片</title>
<script>
window.onload=function()
{
    var oBtn1=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    var oBtn2=document.getElementById('btn2');
     oBtn1.onclick=function(){
         //获取时间
        var iStart=new Date().getTime();
        var i=0;
        for(i=0; i<10000; i++)
        {         //创建个li
            var oLi=document.createElement('li');
              //  添加li到ul
            oUl.appendChild(oLi);
            }
            //减去刚才使用时间
            alert(new Date().getTime()-iStart);
        }
     oBtn2.onclick=function()
     {
         var iStart=new Date().getTime();
         //创建文本对象片段
         var oFrag=document.createDocumentFragment();        var i=0;

         for(i=0; i<10000; i++)
         {
             //利用文本碎片创建li
             var oLi=document.createElement('li');
             //添加到文本
             oFrag.appendChild(oLi);
             }
             //获取当前时间减去程序开始时间
             alert(new Date().getTime()-iStart);
         }
}
</script>
</head>

<body>
<input id="btn1" type="button" value="普通"/>
<input id="btn2" type="button" value="碎片">
<ul id="ul1">
</ul>
</body>
</html>

M_r_J_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM 节点的增删改查

创建DOM元素 •createElement(标签名) 创建一个节点 •appendChild(节点) 追加一个节点例子：为ul插入li&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt...
复制链接

扫一扫