DOM基础四

最新推荐文章于 2024-04-19 20:58:39 发布

原创最新推荐文章于 2024-04-19 20:58:39 发布 · 494 阅读

0 ·

CC 4.0 BY-SA版权

DOM 同时被 2 个专栏收录

12 篇文章

订阅专栏

10 篇文章

订阅专栏

本文介绍了如何使用JavaScript通过DOM接口创建、删除、插入及替换HTML元素，并解释了元素宽高的计算方式，包括样式宽、可视宽和占位宽的区别。

元素的创建、删除、插入、替换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>

<script>
/*
    document.createElement()    创建一个元素

    父级.appendChild()            在父元素的子元素下面添加一个元素

    父级.insertBefore()           在父元素的子元素前面插入一个元素

    父级.replaceChild()           替换父级下的某个子元素

    父级.removeChild()            删除父级下的某个子元素

    appendChild、insertBefore、replaceChild都可以操作动态创建出来的节点，也可以操作已有的节点

 */
window.onload=function (){
    var aInput=document.getElementsByTagName('input');

    var oUl=document.getElementsByTagName('ul')[0];

    var oP=document.getElementsByTagName('p')[0];

    var oDiv=document.getElementsByTagName('div')[0];



    aInput[1].onclick=function (){ 

        var oLi=document.createElement('li');//创建一个元素li 
        oLi.innerHTML=aInput[0].value;  

        var oA=document.createElement('a');//创建一个元素a
        oA.innerHTML='删除';
        oA.href='javascript:;';

        /*

            oUl.appendChild(oLi);//把创建的li添加给ul,在父元素的最后一个子元素后面添加
            oLi.appendChild(oA);//把创建的a添加给li,在父元素的最后一个子元素后面添加


            oUl.insertBefore(oLi,oUl.children[0]);//在父元素的子元素前面插入一个元素

            在非标准IE下，如果第二个参数的节点不存在，会报错

            在其他标准浏览器下，如果第二个参数的节点不存在，
            则会以appendChild形式进行添加

         */
        //解决方案
        if (oUl.children[0]) {

            oUl.insertBefore(oLi,oUl.children[0]);
            oLi.appendChild(oA);

        }else{

            oUl.appendChild(oLi);
            oLi.appendChild(oA);
        }

        //删除元素
        oA.onclick=function (){

        oUl.removeChild(this.parentNode);

        }
    }


    //替换元素
    aInput[2].onclick=function (){


        document.body.replaceChild(oDiv, oP);
    }

};
</script>
<body>

<input type="text" name="">

<input type="button"  value="添加" name="">


<br>
<p>p标签：22222222</p>
<input type="button" value="替换" name="">
<div> div标签：1111111111</div>


<ul></ul>   
</body>
</html>

元素的宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <style type="text/css">

        div{width: 100px;height: 100px;border:1px solid #000;padding: 10px;}


    </style>
</head>
<body>
<!-- 

    width height

    getComputedStyle(oDiv1).width  样式宽    样式中设置的宽度 

    oDiv1.clientWidth              可视宽   样式中设置的宽度 +padding 

    oDiv1.offsetWidth              占位宽   样式中设置的宽度 +padding +border 盒子实际占据的大小
 -->
    <div id="div1"></div>

<script>

var oDiv1=document.getElementById('div1');

alert(getComputedStyle(oDiv1).width);//100   样式宽


alert(oDiv1.clientWidth);//120               可视宽                        

alert(oDiv1.offsetWidth);//122               占位宽

</script>
</body>
</html>