JavaScript--DOM对象_dom.scrollto-优快云博客

本文链接：https://blog.youkuaiyun.com/huijie_0716/article/details/124320344

本文介绍了JavaScript中DOM对象的获取方法，如getElementById、getElementsByTagName等，以及如何操作样式和处理导航移入移除。重点讲解了let的作用域特点，如只在当前代码块内有效、无变量提升、不可重复声明和暂时性死区。此外，还提到了classList属性的使用，如添加、删除和切换类，并探讨了滚动条的相关属性和方法。

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

一、获取对象

1、getElementById()

按元素的ID名称来访问

2、getElementsByTagName()

通过标签名获取元素对象集合

3、 getElementsByClassName（）

getElementsByClassName（“类名”）通过类名来获取元素对象集合

4、 getElementsByName（）

getElementsByName（“name值”）通过name值获取元素对象集合

5、 querySelector（）

querySelector（“选择器”）通过选择器获取匹配到第一个元素唯一

6、 querySelectorAll()

querySelectorAll(“选择器”) 通过选择器获取匹配的所有元素对象集合/列表

二、操作样式

Obj.style.属性=“值”

var oDiv = document.getElementById("box");
    var oBtn = document.getElementsByClassName("btn")[0];
    console.log(oBtn);
    oBtn.onclick = function () {
      //   oDiv.style.width = "200px"; //添加样式到行内
      //   oDiv.style.height = "200px"; //添加样式到行内
      //   oDiv.style.backgroundColor = "#f00";
      oDiv.style = "width:200px;height:200px;background-color:#f00;";
      console.log(oDiv.style); //[object CSSStyleDeclaration] css声明对象
      //   oDiv.className = "con";
    };

三、导航移入、移除

var lis = document.getElementById("nav").getElementsByTagName("li"); //集合

    for (let i = 0; i < lis.length; i++) {
      //   鼠标移入
      lis[i].onmousemove = function () {
        this.style.backgroundColor = "#f00";
      };
      //   鼠标移出
      lis[i].onmouseout = function () {
        this.style.backgroundColor = "";
      };
    }

四、let作用域