Skip to main content

DOM 获取元素

document.getElementById("box")

  • 兼容性: 在 IE8 以下会默认把 name 属性当做 id 来获取
  • id 是唯一的不能重复,重复了获取第一个

document.getElementsByTagName("li")

  • 是一个类数组,设置样式时,必须要加索引,即使获取的只有一个
  • 可以改上下文
  • oBox.getElementsByTagName("li");

document.getElementsByClassName("box");

  • 有 length 属性
  • IE8 以下是不兼容的
  • 通过 class 名开获取元素
  • 上下文可以修改

document.getElementsByName("");

  • 通过 name 属性来获取元素
  • 在 IE9 以下,会默认把 id 名相同的元素也获取到

document.documentElement

  • 获取当前的文档(HTML)

console.log(document.body)

  • 获取 body: 获取页面的 body 元素

获取当前浏览器可是窗口的宽度和高度

  • var winWidth = document.documentElement.clientWidth || document.body.clientWidth;
  • var winHeight = document.documentElement.clientHeight || document.body.clientHeight;

document.querySelector("#box");

如果是 id 名,前面需要加一个#号,如果是 class,前面要加一个点,多个元素只能获取最外层的一个 上下文可以改

document.querySelectorAll(".box");

  • 可以获取到所有的 class 名字叫 box 的元素
  • 上下文可以改