DOM通过js操作html的增删改查

1.查： 属性 和getElementById

2.增：
createElement(tagName) 创建元素节点对象
creatTextNode() 创建文本节点
appendChild()以子节点的形式追加到指定节点中
insertBefore(newNode,oldNode) 在oldNode前插入newNode

3,替换：
replaceChild(newNode,oldNode) 新节点替换旧节点

4，删除节点
removeChild

This 这个 在点击事件内部 this指被点击的元素

案例

    <div id="box">
    <a href="#">百度</a>
    </div>
    
    //创建div节点对象
    // var oDiv=document.createElement('div');
    // oDiv.innerHTML='新来的';
    // // console.log(oDiv);
    // //将创建的div追加到body种
    // document.body.appendChild(oDiv);


    // //创建段落标记
    // var op=document.createElement('p');
    // op.innerHTML='我是段落';
    // console.log(op);
    // document.body.appendChild(op);

    // //在div中插入span
    // var os=document.createElement('span');
    // os.innerHTML='我是span';
    // oDiv.appendChild(os);

    // //创建段落
    // var op1=document.createElement('p');
    // op1.innerHTML='我是新的段落';
    // op.appendChild(op1);
     //找元素
    var o=document.getElementById('box');
    // o.innerHTML='hello world';
    var oT=document.createTextNode('hello world');//文本节点对       象
    // console.log(oT);
    o.appendChild(oT);
    

    //在超链接前插入段落标记
    var aLink=document.links[0];
    // console.log(aLink)
    //创建段落标记
    var op=document.createElement('p');
    op.innerHTML='段落';


    // o.insertBefore(aLink,op);
    o.insertBefore(op,aLink);



    var odiv1=document.createElement('div');
    odiv1.innerHTML='哈哈哈哈';

    o.insertBefore(odiv1,aLink);

以子节点的形式追加图片到指定节点中

<style>
    ul,li{list-style-type: none;}
    li{width: 150px;height: 100px;padding: 5px;border: 1px solid  gray;}
    img{width: 150px;height: 100px;}
</style>

 <button id="btn">添加</button>
  <ul id="banner">
    <li><img src="images/1.jpg" alt=""></li>
 </ul>

<script>
    var oUl=document.getElementById('banner');
    document.getElementById('btn').onclick=function(){
        // alert('run');
        //1.创建li
        var oLi=document.createElement('li');
        //2.创建img
        var oImg=document.createElement('img');
        oImg.src='images/1.jpg';
        //3.将img放入li中
        oLi.appendChild(oImg);
        //4.将li添加到ul中
        oUl.appendChild(oLi);
    };
</script>

替换

replaceChild(newNode,oldNode) 新节点替换旧节点

   <div id="box">hello</div>
  <p id="p0">你好</p>

<script>
    var op=document.getElementById('p0');
    var o=document.getElementById('box');
    //创建新节点
    var oDiv=document.createElement('div');
    oDiv.innerHTML='你很好';
    //替换
    document.body.replaceChild(oDiv,op);

    //创建段落标记
    var newP=document.createElement('p');
    newP.innerHTML='新的段落';

    document.body.replaceChild(newP,o);

</script>

删除节点
removeChild

 <ul id="list">
    <li>AAA <a href="javascript:void(0)">删除</a></li>
    <li>BBB <a href="javascript:void(0)">删除</a></li>
    <li>CCC <a href="javascript:void(0)">删除</a></li>
    <li>DDD <a href="javascript:void(0)">删除</a></li>
   </ul>
   
     var oUl=document.getElementById('list');
    var len=document.links.length;
   // 添加点击事件
    for(var i=0;i<len;i++){
        document.links[i].onclick=function(){             
        this.parentNode.parentNode.removeChild     
        (this.parentNo   de);
        };
    }

This 这个 在点击事件内部 this指被点击的元素
console.log(this);
console.log(this.parentNode);//当前被点击对象的父节点
oUl.removeChild(this.parentNode);