• 中文
    • English
  • 注册
  • 赞助本站

    • 支付宝
    • 微信
    • QQ

    感谢一直支持本站的所有人!

    • 查看作者
    • 9:JS查询元素和获取元素

      一.  查询元素

      1. 根据ID名查询:getElementById("IdName")

      <button id="btn1">按钮1</button>
      <script type="text/javascript">
          window.onload = function () {
              var btn1 = document.getElementById("btn1");
              console.log(btn1);
              //输出<button id="btn1">按钮1</button>
          };
      </script>

      2. 根据标签名查询:getElementsByTagName("TagName")

      <button id="btn1">按钮1</button>
      <button id="btn2">按钮2</button>
      <script type="text/javascript">
          window.onload = function () {
              var btns = document.getElementsByTagName("button");
              console.log(btns);
              console.log(btns.length) //2
              /*  
              输出:      
              HTMLCollection(2) [button#btn1, button#btn2, btn1: button#btn1, btn2: button#btn2]
              0: button#btn1
              1: button#btn2
              length: 2
              btn1: button#btn1
              btn2: button#btn2
              __proto__: HTMLCollection
              */
          };
      </script>

      3.  根据类名查询:getElementsByClassName("ClassName")

      <button id="btn1" class="btns">按钮1</button>
      <button id="btn2" class="btns">>按钮2</button>
      <script type="text/javascript">
          window.onload = function () {
              var btns = document.getElementsByClassName("btns");
              console.log(btns);
              /*
              输出:
               HTMLCollection(2) [button#btn1.btns, button#btn2.btns, btn1: button#btn1.btns, btn2: button#btn2.btns]
              0: button#btn1.btns
              1: button#btn2.btns
              length: 2
              btn1: button#btn1.btns
              btn2: button#btn2.btns
              __proto__: HTMLCollection
              */
          };
      </script>

      4.  根据name查询:getElementsByName("Name")

      <script type="text/javascript">
          window.onload = function () {
              var zjs = document.getElementsByName("zj");
              console.log(zjs);
          };
      </script>
      <input type="checkbox" name="zj"/>
      <input type="checkbox" name="zj"/>
      <input type="checkbox" name="zj"/>

      5.  根据子元素查询:元素.childNodes;

      <script type="text/javascript">
          window.onload = function () {
              var ul = document.getElementsByTagName("ul")[0];
              var ulChildren = ul.childNodes;
              console.log(ulChildren);
              /*
              NodeList(9) [text, li, text, li, text, li, text, li, text]
              0: text
              1: li
              2: text
              3: li
              4: text
              5: li
              6: text
              7: li
              8: text
               */
          };
      </script>
      <ul>
          <li>列表项1</li>
          <li>列表项2</li>
          <li>列表项3</li>
          <li>列表项4</li>
      </ul>

      可以看到,我们获取了ul的所有子元素,但是却有9个子元素,这是因为js默认把ul下的文本节点(比如上面的换行就是text)和注释节点也作为了一个子元素来看待。如果我们把上面的列表修改成:

      <ul><li>列表项1</li>
          <li>列表项2</li>
          <li>列表项3</li>
          <li>列表项4</li>
      </ul>

      此时ul便只有八个子元素。

      6.  根据父元素查询:元素.parentNode;

      <script type="text/javascript">
          window.onload = function () {
              var li = document.getElementsByTagName("li")[0];
              var liParent = li.parentNode;
              console.log(liParent);
          };
      </script>
      <ul><li>列表项1</li>
          <li>列表项2</li>
          <li>列表项3</li>
          <li>列表项4</li>
      </ul>

      7.  根据上一个兄弟元素查询:元素.previousSibling;和元素.previousElementSibling;

      previousElementSibling 可以忽略掉文本节点、注释节点,所以列表项2的上一个兄弟元素就是列表项1。

      而previousSibling是不忽略文本节点、注释节点的,所以列表项2的上一个子元素就是换行text;

      <script type="text/javascript">
          window.onload = function () {
              var li = document.getElementsByTagName("li")[1];
              console.log(li); //<li>列表项2</li>
              var liParent = li.previousSibling;
              console.log(liParent); //#text
      
      
              liParent = li.previousElementSibling;
              console.log(liParent);//<li>列表项1</li>
      
          };
      </script>
      <ul><li>列表项1</li>
          <li>列表项2</li>
          <li>列表项3</li>
          <li>列表项4</li>
      </ul>

      8.  根据下一个兄弟元素查询:元素.nextSibling;和元素.nextElementSibling;

      nextSibling和nextElementSibling的区别和和上一个兄弟元素查询同理。

      <script type="text/javascript">
          window.onload = function () {
              var li = document.getElementsByTagName("li")[1];
              console.log(li); //<li>列表项2</li>
              var liParent = li.nextSibling;
              console.log(liParent); //#text
      
      
              liParent = li.nextElementSibling;
              console.log(liParent);//<li>列表项3</li>
      
          };
      </script>
      <ul><li>列表项1</li>
          <li>列表项2</li>
          <li>列表项3</li>
          <li>列表项4</li>
      </ul>

      二.  添加元素

      我们使用createElement()创建一个元素,然后使用appendChild()将其添加到指定位置:

      <div id="box"></div>
      <button id="btn">添加h1</button>
      <script type="text/javascript">
          window.onload = function () {
              var divBox = document.getElementById("box");
              var btn = document.getElementById("btn");
      
              btn.onclick = function () {
                  var h1 = document.createElement("h1");
                  h1.innerHTML = "一级标题";
                  h1.style = "color:red"; //方法一
                  h1.style.color = "red";//方法二
      
                  divBox.appendChild(h1);
              }
          };
      </script>

      山东省
    • 0
    • 0
    • 0
    • 441
    • 请登录之后再进行评论

      登录
    • 做任务
    • 实时动态
    • 偏好设置
    • 返回顶部
    • 单栏布局 侧栏位置: