zoukankan      html  css  js  c++  java
  • 8月24日

    DOM创建节点:document.createElement(Tag)。

    DOM复制节点:cloneNode(boolean deep),当deep为true时,表示复制当前节点以及当前节点的全部后代节点。为false时,只复制当前节点。

    如function copy()

    var li=ul.getEleentByTagName("li")[0];

    //var newli=li.cloneNode(false);

    var newli=li.cloneNode(true);

    ul.appendChild(newli);

    {

    replaceChild(newNode,oldNode)将oldNode节点替换成newNode节点。

    removeChild(oldNode)将old子节点删除。

    如function del(){
        //获取最后一个节点的下标
        var index=ul.getElementsByTagName("li").length-1;
        //获取最后一个元素节点
        var li=ul.getElementsByTagName("li")[index];
        //删除节点
        ul.removeChild(li);
        
    }

    DOM为下拉菜单添加选项:new Option(text,value,defaultSelected,selected),该构造器有四个参数(text、value、defaultSelectde(设置默认是否显示该选项)、selected(设置该选项当前是否被选中))。同时并不是每一次构造都需指明4个参数,一个的时text,2个的是value.

    直接为select的指定选项赋值。列表框或下拉菜单对象.options[i]=创建好的option对象。

    直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项,直接将指定选项赋值为null。列表框或下拉菜单对象。remove(index)或对象.options[index]=null

    如//创建下拉菜单
    var sel;
    function create(){
        //创建下拉菜单元素节点
         sel=document.createElement("select");
        //给sel属性节点赋值
        sel.id="myselect";
        sel.size=3;
        
        //获取body元素节点
        var body=document.getElementsByTagName("body")[0];
        //将下拉菜单元素节点添加到body标签
        body.appendChild(sel);
        //创建选项节点
        for(var i=0;i<5;i++){
            //格式:选项节点=new option(文本节点,value属性节点)
            var op=new Option("选项"+i,i);
            //将选项添加到select标签
            sel.appendChild(op);
            }
    }

    如function del(){
        //获取最后一个option元素的下标
        var index=sel.options.length-1;
        //删除最后一个元素;
        sel.remove(index);
    }

    如//一次性清空option
    function clear1(){
        //让options的数组长度变为0;
        sel.options.length=0;
        
    }

    DOM动态添加删除表格内容所用到的常用方法。

    insertRow(index)在指定索引位置插入一行。

    createCaption()为该表格创建标题。

    deleteRow(index)删除表格中index索引处的行。

    deleteCaption()删除表格标题

    如//创建5行4列的表格
    var table;
    var body;
    function create(){
        //创建table元素节点
         table=document.createElement("table");
        //设置属性
        table.border="1px";
        //获取body元素节点
        body=document.getElementsByTagName("body")[0];
        //将table标签添加至body;
        body.appendChild(table);
        //循环插入行
        for(var i=0;i<5;i++){
            var tr=table.insertRow(i);
        //插入4列
        for(var j=0;j<4;j++){
                var td=tr.insertCell(j);
        //添加文本节点;
        td.innerHTML=("第"+(i+1)+"行,第"+(j+i)+"列");
            }
        如//删除最后一行
    function delrow(){
        //盘旋table中是否还有tr
        if(table.row.length>0){
            //获取最后一行的下标
        var index=table.rows.length-1;
        //删除最后一行
        table.deleteRow(index);
        }else{
            //所有行 都被删除,删除table标签
            body.removeChild(table);
        }
        
    }

    如//一列一列删除
    function delCell(){
        if(table.rows[table.rows.length-1].cells.length>0){
        //获取最后一行tr的下标
        var index=table.rows.length-1;
        //获取最后一行的最后一列的下标
        var index2=table.rows[index].cells.length-1;
        //删除最后一列
        table.rows[index].deleteCell(index2);    
        }else{
            //删除最后一行
            table.deleteRow(table.rows.length-1);
        }
        
    }

    给表格行创建、删除单元格的方法。insertCell(index)在Index处创建一个单元格,返回新创建的单元格。deleteCell(index)删除某行在index索引处的单元格。

    常见的时间类型ondblclick双击鼠标左键触发。onmousedown单击任意一个鼠标按键时触发。onmousemove鼠标移出一个元素边界时触发。onmousemove鼠标在某个元素上移动时持续触发。onmouseup松开鼠标任意一个按键时触发。onmouseover鼠标移到一个元素上是触发。

    如<tittle>无标题文档</tittle>

    <style>

    #d1{

    200px;

    height:200px;

    background:blue;

    }

    </style>

    <script type="text/javascript">

    function over (obj){

    //当鼠标移上去变为红色

    obj.style.background="red";

    }

    function out(obj){
    //鼠标移走时变为蓝色

    obj.style.background="blue";

    }

    </script>

    </head>

    <body>

    <div id="d1" onMouseOver="over(this)" onMouseOut="out(this)"></div>

    </body>

    </html>

    可以为元素添加多个事件。

    this表示这个元素。

  • 相关阅读:
    web服务器-Apache
    nginx优化
    nginx下载限速
    nginx-URL重写
    HDU 5358 First One 求和(序列求和,优化)
    HDU 5360 Hiking 登山 (优先队列,排序)
    HDU 5353 Average 糖果分配(模拟,图)
    UVALive 4128 Steam Roller 蒸汽式压路机(最短路,变形) WA中。。。。。
    HDU 5348 MZL's endless loop 给边定向(欧拉回路,最大流)
    HDU 5344 MZL's xor (水题)
  • 原文地址:https://www.cnblogs.com/maxuefeng/p/13554339.html
Copyright © 2011-2022 走看看