zoukankan      html  css  js  c++  java
  • DOM对象


    创建DOM元素
    createElement(标签名) 创建一个节点
    appendChild(节点) 追加一个节点
    例子:为ul插入li
    插入元素
    insertBefore(节点, 原有节点) 在已有元素前插入
    例子:倒序插入li
    删除DOM元素
    removeChild(节点) 删除一个节点
    例子:删除li

        <script>
            window.onload=function()
            {
                var btn=  document.getElementById("btn");
                var txt1=  document.getElementById("txt1");
                var oul=  document.getElementById("oul");
                
                btn.onclick=function()
                {                
                        var oli=document.createElement("li");
                        oli.innerHTML=txt1.value;
                        var lis=oul.getElementsByTagName("li");
                        if(lis.length>0)
                        {
                            oul.insertBefore(oli,lis[0])                        
                        }
                        else
                        {
                            oul.appendChild(oli)
                        }                   
                }       
                
            }     
            </script>
        </head>
        <body>
            <input type="text" id="txt1"  /><br />
            <ul id="oul">
                
            </ul>
            <input type="button" id="btn" value="添加" />
        </body> 

     删除节点

        <script>
        window.onload=function ()
        {
            var aA=document.getElementsByTagName('a');
            var oUl=document.getElementById('ul1');
            
            for(var i=0;i<aA.length;i++)
            {
                aA[i].onclick=function ()
                {
                    oUl.removeChild(this.parentNode);
                };
            }
        };
    </script>
    </head>
    
    <body>
    <ul id="ul1">
        <li>asfasd <a href="javascript:;">删除</a></li>
        <li>5645 <a href="javascript:;">删除</a></li>
        <li>ghdfjgj <a href="javascript:;">删除</a></li>
        <li>mvbnmvnb <a href="javascript:;">删除</a></li>
    </ul>
    </body

     各行变色

       tBodies、tHead、tFoot、rows、cells

        <script>
        window.onload=function ()
        {
            var oTab=document.getElementById('tab1');
            var oldColor='';
            
            console.log(oTab.tBodies[0].rows.length)
            for(var i=0;i<oTab.tBodies[0].rows.length;i++)
            {
                oTab.tBodies[0].rows[i].onmouseover=function ()
                {
                    oldColor=this.style.background;
                    this.style.background='green';
                };
                oTab.tBodies[0].rows[i].onmouseout=function ()
                {
                    this.style.background=oldColor;
                };
                
                if(i%2)
                {
                    oTab.tBodies[0].rows[i].style.background='';
                }
                else
                {
                    oTab.tBodies[0].rows[i].style.background='#CCC';
                }
            }
        }
        </script>
    </head>
    
    <body>
    <table id="tab1" border="1" width="500">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Blue</td>
                <td>27</td>
            </tr>
            <tr>
                <td>2</td>
                <td>张三</td>
                <td>23</td>
            </tr>
            <tr>
                <td>3</td>
                <td>李四</td>
                <td>28</td>
            </tr>
            <tr>
                <td>4</td>
                <td>王五</td>
                <td>25</td>
            </tr>
            <tr>
                <td>5</td>
                <td>张伟</td>
                <td>24</td>
            </tr>
        </tbody>
    </table>
    </body>
  • 相关阅读:
    CF995A Tesla
    CF961D Pair Of Lines
    P1186 玛丽卡
    CF986B Petr and Permutations
    hdu6331 Problem M. Walking Plan
    Edison UVALive3488
    Be a Smart Raftsman SGU475
    100198H Royal Federation
    100197G Robbers
    Evil Book -- CodeChef
  • 原文地址:https://www.cnblogs.com/tianranhui/p/10095423.html
Copyright © 2011-2022 走看看