美文网首页
02-获取DOM元素上

02-获取DOM元素上

作者: 仰望_IT | 来源:发表于2019-05-03 13:07 被阅读0次
    <body>
      <div class="father">
          <form>
              <input type="text" name="test">
              <input type="password" name="test">
          </form>
      </div>
      <div class="father" id="box">我是div</div>
    </body>
    
    • 1. 通过 id 获取指定元素 (getElementById) -- 了解
      • 由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回 Null
      • 注意点: DOM操作返回的是一个对象, 这个对象是宿主类型的对象(浏览器提供的对象)
        let oDiv = document.getElementById("box");
        console.log(oDiv);  // <div class="father" id="box">我是div</div>
        console.log(typeof oDiv);   // object
      
    • 2. 通过class名称获取 (getElementsByClassName) -- 了解
      • 由于class可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
        let oDivs = document.getElementsByClassName("father");
        console.log(oDivs);
      
    • 3. 通过name名称获取 (getElementsByName) -- 了解
      • 由于name可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
      • 注意点: getElementsByName 在不同的浏览器其中工作方式不同。在IEOpera中, getElementsByName() 方法还会返回那些 id 为指定值的元素。
        let oDivs = document.getElementsByName("test");
        console.log(oDivs);
      
    • 4. 通过标签名称获取 (getElementsByTagName) -- 了解
      • 由于标签名称可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
        let oDivs = document.getElementsByTagName("div");
        console.log(oDivs);
      
    • 5. 通过选择器获取 (querySelector) -- 掌握
      • 注意点: querySelector 只会返回根据指定选择器找到的第一个元素
        let oDiv = document.querySelector("#box");
        let oDiv = document.querySelector(".father");
        let oDiv = document.querySelector("div>form");
        console.log(oDiv);
      
    • 6.通过选择器获取 (querySelectorAll) -- 掌握
      • 注意点: querySelectorAll 会返回指定选择器找到的所有元素
        let oDivs = document.querySelectorAll("div");
        console.log(oDivs);
      

    相关文章

      网友评论

          本文标题:02-获取DOM元素上

          本文链接:https://www.haomeiwen.com/subject/lzianqtx.html