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>
原文地址:https://www.cnblogs.com/0328dongbin/p/8854251.html