JavaScript获取页面元素

最新推荐文章于 2023-08-01 23:53:41 发布

那也是我的网名.

最新推荐文章于 2023-08-01 23:53:41 发布

阅读量148

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_45248120/article/details/105718261

版权

1.通过 ID 获取元素 document.getElementById()

<body>
    <div id = "time">
        1999-12-29
    </div>
    <script>
        // 通过 ID  获取元素 document.getElementById()

        // 1.因为我们文档页面从上往下加载 所以先得有标签 所以我们 Script 写在标签下面
        // 2. get 获得 element 元素 by 通过 驼峰命名法  document 文档
        // 3.参数 ID是大小写敏感的字符串
        // 4.返回的是一个元素对象
        var num = document.getElementById("time");
        console.log(num);
        console.log(typeof num);
        // 5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(num);
        

    </script>
</body>

2.通过getElementsByTagName() 可以得到这个元素里面的某些标签

<body>
    <ul>
        <li>知否知否，应是等你好久1</li>
        <li>知否知否，应是等你好久2</li>
        <li>知否知否，应是等你好久3</li>
        <li>知否知否，应是等你好久4</li>
        <li>知否知否，应是等你好久5</li>
    </ul>
  <ul id = "nav">
      <li>生僻字</li>
      <li>生僻字</li>
      <li>生僻字</li>
      <li>生僻字</li>
      <li>生僻字</li>
  </ul>

    <script>
        //返回的是 获取过来元素对象的集合 以伪数组的形式
       var lis =  document.getElementsByTagName("li")
       console.log(lis);
       console.log(lis[0]);
       //我们想要依次打印里面的元素对象 我们可以采取遍历的方式
       for(var i = 0; i < lis.length ; i++){
           console.log(lis[i]);
       }
    //    element.getElementsByTagName()  可以得到这个元素里面的某些标签
    var nav = document.getElementById("nav") //获取这个nav元素
     var navLis =  nav.getElementsByTagName("li")
     console.log(navLis);
     
    </script>
</body>

3.H5新增获取元素的方法
1. getElmentsByClassName 根据类名获得某些元素集合。

        // 1 .getElmentsByClassName 根据类名获得某些元素集合
       var boxs =  document.getElementsByClassName("box")
       console.log(boxs);

2.querySelector 返回指定选择器第一个元素对象。

        // 2.querySelector 返回指定选择器第一个元素对象
        var firstBox = document.querySelector(".box"); // 类名前面需要加 .
        console.log(firstBox);
        var nav = document.querySelector("#nav"); // id 前面需要加 #
        console.log(nav);
        var li = document.querySelector("li") // 返回的是第一个 li
        console.log(li);

3.querySelectorAll() 返回指定选择器所有元素对象的集合

        // 3.querySelectorAll() 返回指定选择器所有元素对象的集合
        var allBox = document.querySelectorAll(".box");
        var lis = ul.querySelectorAll("li");

4.获取特殊元素的方法
1 .获取 body 元素 document.body

        // 1.获取 body 元素 
        var bodyEle = document.body;
        console.log(bodyEle);
        console.log(bodyEle);

2. 获取 html 元素 document.dispatchEvent

        // 获取 html 元素
        // var html1 =  document.html; // 错误写法
        var html1 = document.dispatchEvent;
        console.log(html1);

那也是我的网名.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript获取页面元素

1.通过 ID 获取元素 document.getElementById()<body> <div id = "time"> 1999-12-29 </div> <script> // 通过 ID 获取元素 document.getElementById() // 1.因...
复制链接

扫一扫