获取 dom 元素 #

document.getElementById 一个元素 #

• 此方法的上下文只能 document
• 一个 html 页面中元素的 id 理论上是不能重复的，如果页面中 ID 重复了，我们获得结果第一个 id 对应的元素对象
• 在 ie7 更低的版本浏览器中，会把表单元素的 name 值当做 id 来识别使用（项目中尽量不要让表单的 name 和其他元素的 id 相同）
• 如果我们把 js 放在结构的下面，我们可以直接使用 id 值获取这个元素（不需要通过 getElementById 获取），而且这种方式会把页面中所有 id 是他的元素都获取到（元素对象，或者集合） => 不推荐

<div id="box1"></div><div id="box2"></div><div id="box1"></div>
<script>
   console.log(box1)    // -> [div#box1, div#box1, box1: div#box1]
</script>

<input id="myInput" type="text" size="20"/><br />
<script>
  var x=document.getElementsByName("myInput");
</script>

document.getElementClassName 元素集合 #

• 上下文是可以自己来指定

• 获取到的结果是一个元素集合（类数组集合）

• 获取的结果是集合，哪怕集合中只有一项，我们想要操作的是这一项（元素对象），需要先从集合中获取出来，然后再操作

• 但是真实的项目中我们经常会通过样式类名获取元素，getElementClassName 这个方法在 ie6-8 不兼容的

<input name="myInput" type="text" size="20"/><br />
<script>
  var x=document.getElementsByName("input");
</script>

var bodyBox = document.getElementsByTagName('body');
bodyBox[0].getElementsByTagName('div');

document.getElementsTagName 元素集合 #

<input name="myInput" type="text" size="20"/><br />
<script>
  var x=document.getElementsByName("input");
</script>

document.getElementsByName 节点集合 #

通过元素的 NAME 属性值获取一组元素（类数组：节点集合 NodeList） 他的上下文只能是 document

• IE 浏览器只能识别表单元素的 name 属性值，所以我们这个方法一般都用来操作表单元素的
• 获取 html 获得 body 的元素对象

<input name="myInput" type="text" size="20"/><br />
<script>
 var x=document.getElementsByName("myInput");
</script>

domcument.domcumentElement 获取整个 html 的对象 #

 document.documentElement.clientWidth||document.body.clientWidth
 // 获取当前浏览器可视区域的宽度(当前页面一个屏幕的宽度)
 // =>clientHieght 获取高度

domcument.body 获取 body 对象 #

domcument.head 获取整个 head 对象 #

[context]querySelector  一个元素对象 / [context]querySelectorAll 获取元素集合 #

• ie6-8 不兼容，而且没有特别好的办法处理他的兼容，所以这两个方法一般多用于移动端开发使用

querySelector 获取一个元素对象
querySelectorAll 获取的一个元素集合
只要 css 支持的选择器，这里大部分都支持

document.querySelector('#box1');
document.querySelectorAll('.box1');
document.querySelectorAll('div');
document.querySelectorAll('body>div');
document.querySelectorAll('#box1 li');