DOM基础四

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOMtitle>
head>

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

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

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

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

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

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

 */
window.οnlοad=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].οnclick=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.οnclick=function (){

        oUl.removeChild(this.parentNode);

        }
    }


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


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

};
script>
<body>

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

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


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


<ul>ul>   
body>
html>

元素的宽高


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

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


    style>
head>
<body>

    <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>

你可能感兴趣的:(JS,DOM)