JavaScripDOM应用

目录

添加节点

删除

小球滚动

固定

---

添加节点：

<ul id="fff">
    <li><a>第一个</a></li>
    <li><a>第二个</a></li>
    <li><a>第三个</a></li>
    <li><a>第四个</a></li>
</ul>
<button onclick="a()">点</button>
———————————————————————————————————————————————————————————————————————————————————
<script>
    function a() {
    var sa=document.createElement("li");
    sa.innerHTML="<a>第五个</a>";
        var ff=document.getElementById("fff");
        ff.appendChild(sa);
    }

    // function a(){
    //     var s=document.createElement("li");
    //     s.innerText="第五个";
    //     //将新创建的节点添加到指定位置
    //     var ff=document.getElementById("fff");
    //     ff.appendChild(s);

 //   }
    // function a(){
    //     var  no=document.getElementById("s");
    //     no.setAttribute("src","../imp/yu.jpg");
    // }
</script>

删除：

<ul id="fff">
    <li><a>第一个</a><button onclick="b(this)">删除</button></li>
    <li><a>第二个</a><button onclick="b(this)">删除</button></li>
    <li><a>第三个</a><button onclick="b(this)">删除</button></li>
    <li><a>第四个</a><button onclick="b(this)">删除</button></li>
</ul>
——————————————————————————————————————————————————————————————————————
    function b(obj){
     //不知道用户点的那个删除节点
     //如何获得当前点击的节点对象
        var f=document.getElementById("fff");
        f.removeChild(obj.parentNode)
    }

小球滚动：

<style>
    #qiu{/*圆形属性*/
        width:200px;/*盒子宽度*/
        height:200px;/*盒子高度*/
        border: 2px solid red;/*盒子边框(粗细，线，颜色)*/
        border-radius:50%;/*盒子圆角边*/
        text-align: center;/*文字居中*/
        line-height: 200px;/*文字高度*/
        font-size: 18px;/*文字大小*/
        position: absolute;/*绝对定位*/
        top: 300px;/*离上边的距离*/
        left: 300px;/*离左边的距离*/
    }
</style>
_________________________________________________________
<div id="qiu" onclick="b()">
单击事件
</div>
_________________________________________________________
<script>
    var thim;//全局变量
    var fle=true;
    function b(){/*开*/
        if (fle){
            thim=setInterval("a()",1)
            fle=false;
        }else {
        sto();
        fle=true;
        }

    }

function a(){/*移动*/
var qiu=document.getElementById("qiu");
//获取当前小球在屏幕上的位置坐标，转化成nimber类型，方便运用
var st=window.getComputedStyle(qiu);
var  le=parseInt(st.left);
le++;
qiu.style.left=le+"px";
}

function sto(){/*停*/
        clearTimeout(thim);
}
</script>

固定：

 <style>
        #ss{/*div属性*/
            width: 120px;
            height: 120px;
            text-align: center;
            border: 1px red solid;
            position: relative;
            left: 100px;
            top: 100px;
        }
        body{/*现实滚动条，调body的高度*/
            height: 1500px;
        }
    </style>
_______________________________________________________
<div id="ss">
<img src="../imp/ss.jpg" width="630px" height="370">
</div>
_______________________________________________________
<script>
    var bl=document.getElementById("ss");
    var dis=bl.offsetTop;
    window.onscroll=function (){
        console.log(dis);
        /*document.documentElement.scrollTop滚动条到上边的距离*/
        if(document.documentElement.scrollTop>dis){
            bl.style.position="fixed";
            bl.style.top="0px";
        }else {
            bl.style.position="relative";
            bl.style.top="100px";
        }
    }
</script>

名称	描述
node.removeChild( child )	删除指定的子节点
node.replaceChild( newChild, oldChild )	用其他节点替换指定的子节点
offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度

属性	描述
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度

属性	属性
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
scrollHeight	在没有滚动条的情况下，返回元素内容的总高度
scrollWidth	在没有滚动条的情况下，返回元素内容的总宽度

       标准浏览器      

document.documentElement.scrollTop

document.documentElement.scrollLeft