JavaScript & jQuery获取元素

js的三部曲：1，获取元素；2，绑定事件；3，做对应的事（事件处理函数）
本篇记录第一步获取元素。

1. DOM0 级获取元素

// 根据 id 获取元素，id值是唯一的，所以获取到的是元素本身
let box1 = document.getElementById('box1');

// 根据 class 获取元素，此时获取到的数据是一个类数组，
// 如果要获的第一个元素则需要像取出数组一样去获取自己想要的第几个元素，
// 即使是只有一个元素也需要使用 box[0] 才能获取到自己想要的元素
let box = document.getElementsByClassName('box');

// 根据标签名获取元素，获取的数据类型与根据class获取的一样
// 从外到里，从上到下获取，
// 如果一个元素里面嵌套有相同标签名的元素，先获取父元素，再依次获取里面的元素
let div = document.getElementsByTagName('div');

2. DOM2 级获取元素

// 可以根据css选择器进行获取元素，与jQuery类似，
// 但是querySelector()只会获取第一个符合条件的元素，而不是一个类数组
let box1 = document.querySelector('#box1')
let box = document.querySelector('.box')
let div = document.querySelector('div')

3. jQuery 获取元素

// jQuery获取元素只要把相应选择器放入即可，接受css的选择器
// 选择器选择什么就可以获取哪一个元素，注意与DOM操作一样，选择class或标签的时候依然是一个类数组
let box1 = $('#box1');
let box = $('.box');
let div = $('div');

// 选取所有class = 'box' 的 div 元素
$("div.box")
// 获取 id = 'box1' 下的第一个div元素
$("#box1 div:first")

创建元素

//创建元素节点
document.createElement("标签名");