DOM的查找与操作

最新推荐文章于 2023-02-03 11:56:44 发布

weixin_30332241

最新推荐文章于 2023-02-03 11:56:44 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/0328dongbin/p/8854251.html

本文介绍了如何使用JavaScript操作HTML页面中的DOM元素，包括获取元素、修改元素内容及表单值等基本操作。通过实例展示了如何利用getElementById、getElementsByClassName等方法定位元素，并演示了innerHTML、innerText及value属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>