zoukankan      html  css  js  c++  java
  • DOM的查找与操作

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div id="one"></div>
            <input type="text" name="two" id="two" value="123" />   <!--name=value-->
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <div class="four">9</div>
            <div class="four">8</div>
            <div class="four">7</div>
            <div class="four">6</div>
            <div class="four">5</div>
            <div id="five">
                阴天,下雨天
            </div>
            <table border="1" cellspacing="0" cellpadding="0">
            </table>
        </body>
    </html>
    <script type="text/javascript">
        //============找到dom元素============
        //document :文档    get : 拿到  得到  element : 元素   by : 通过  id : id名字     
        //通过id名找到元素
        var one = document.getElementById("one");
        //通过name属性,找到元素
        var two = document.getElementsByName("two");
        //通过标签名找到元素  HTMLCollection   集合 
        var three = document.getElementsByTagName("li");
        //console.log(three[]);
        var four = document.getElementsByClassName("four");
        //============操作dom元素============
        //一、操作内容
        var five = document.getElementById("five");
        /*1、five.innerHTML = "今天是<br/>下雨天";
          2、five.innerText = "今天是<br/>下雨天";
         */
        //打印表格  练习
        var tab = document.getElementsByTagName("table");
        var str = "";
        for(var i = 0;i < 3;i++){
            str = str + "<tr>";
            for (var j = 0;j <3;j++) {
                str = str +"<td>周一</td>";
            }
            str = str +"</tr>";
        }
        tab[0].innerHTML = str;
        //3.操作表单的value 
        var inpt = document.getElementById("two");
        alert(inpt.value);
    </script>
  • 相关阅读:
    在Delphi中如何创建和使用udl文件
    《深入浅出struts》读书笔记(2)
    指针与数组
    《深入浅出struts》读书笔记
    《深入浅出struts》读书笔记(3)
    《深入浅出struts》读书笔记(3)
    指针的简单使用
    指针的简单使用
    指针与数组
    《深入浅出struts》读书笔记
  • 原文地址:https://www.cnblogs.com/0328dongbin/p/8854251.html
Copyright © 2011-2022 走看看