JavaScript--DOM对象

一、获取对象

1、getElementById()

2、getElementsByTagName()

3、 getElementsByClassName（）

4、 getElementsByName（）

5、 querySelector（）

6、 querySelectorAll()

二、操作样式

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作用域

let与var的区别

五、 classList 属性

1、add()

2、remove()

3、toggle()

4、 contains()

5、 item()

六、滚动条