JavaScript DOM查询练习

最新推荐文章于 2023-02-06 09:55:54 发布

FL_csdn1

最新推荐文章于 2023-02-06 09:55:54 发布

阅读量205

点赞数 1

分类专栏： Web前端 JavaScript 文章标签： js javascript 经验分享

本文链接：https://blog.csdn.net/FL_csdn1/article/details/114097561

版权

Web前端同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #total {
        width: 50%;
        overflow: hidden;
        margin: 0 auto;
      }
      .hd,
      .bd {
        border: 1px solid;
        padding: 30px;
      }
      .inner,
      .btn {
        float: left;
      }
      .bd {
        margin-top: 10px;
      }
      ul {
        margin: 0;
        padding: 0;
      }
      ul li {
        list-style: none;
        background-color: #96ff97;
        padding: 5px;
        display: inline;
        border: 1px solid;
      }
      .btn {
        margin-left: 30px;
      }
      .btn button {
        width: 300px;
        margin-top: 13px;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div id="total">
      <div class="inner">
        <div class="hd">
          <p>你喜欢哪个城市</p>
          <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
          </ul>
          <br />

          <p>你喜欢那款单机游戏</p>
          <ul id="game">
            <li>红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
          </ul>
          <br />

          <p>你手机的操作系统是</p>
          <ul id="system">
            <li>IOS</li>
            <li>ANDROID</li>
            <li>WINDOWS PHONE</li>
          </ul>
          <br />
        </div>

        <div class="bd">
          <label for="">gender:</label>
          <input type="radio" value="Male" name="true" />Male
          <input type="radio" value="Female" name="true" />Female
          <br />
          <br />

          <label for="">name:</label>
          <input type="text" value="abcde" />
        </div>
      </div>
      <div class="btn">
        <button id="btn01">查找#bj节点</button><br />
        <button id="btn02">查找所有li节点</button><br />
        <button id="btn03">查找name=true的所有节点</button><br />
        <button id="btn04">查找#city下所有li节点</button><br />
        <button>返回#city的所有子节点</button><br />
        <button>返回#phone的第一个子节点</button><br />
        <button>返回#bj的父节点</button><br />
        <button>返回#android的前一个兄弟节点</button><br />
        <button>返回#username的value属性值</button><br />
        <button>设置#username的value属性值</button><br />
        <button>返回#bj的文本值</button><br />
      </div>
    </div>

    <script>
      window.onload = function () {
        //封装遍历方法
        function bianli(Element, fangfa) {
          for (var i = 0; i < Element.length; i++) {
            if (fangfa == null) {
              alert(Element[i].innerHTML);
            } else {
              alert(Element[i].value);
            }
          }
        }
        // 查找id为bj的节点
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
          var bj = document.getElementById("bj");
          alert(bj.innerHTML);
        };
        // 查找所有的li节点
        var btn02 = document.getElementById("btn02");
        btn02.onclick = function () {
          var lis = document.getElementsByTagName("li");
          bianli(lis);
        };
        // 查找name=true的所有节点
        var btn03 = document.getElementById("btn03");
        btn03.onclick = function () {
          var inputs = document.getElementsByName("true");
          bianli(inputs, "true");
        };
      };
    </script>
  </body>
</html>