document.getElement...使用和区别

document.getElement…使用和区别

A.JQ
$(’.date’).html(ajaxHtml);

B.原生获取dom

1.ID获取
1) var _table = document.getElementById(‘date’).innerHTML =ajaxHtml;
2) var _table = document.querySelector(’#date’).innerHTML =ajaxHtml//里面参数是CSS选择器
3） var _table = document.querySelectorAll(’#date’)[0].innerHTML =ajaxHtml;

2.Class类获取
1) var _table = document.getElementsByClassName(‘date’)[0].innerHTML =ajaxHtml;
2) var _table = document.querySelector(’.date’).innerHTML =ajaxHtml;
3) var _table = document.querySelectorAll(’.date’)[0].innerHTML =ajaxHtml;

3.标签获取

1. var _table = document.querySelectorAll(“table”)[0].innerHTML =ajaxHtml;//ul标签集合
2. var _table = document.getElementsByTagName(“table”);
   console.log(_table);//HTMLCollection类数组对象
   console.log(_table.length);//HTMLCollection长度
   _table[0].innerHTML =ajaxHtml;

4 name查询元素的 name 属性
//
getElementsByName(‘myInput’)[1]; //方法可返回带有指定名称的对象的集合。

例子：

console.log(_table)
$(’.date’).html(ajaxHtml);

// 1.ID
// 1)
// var _table = document.getElementById(‘date’).innerHTML =ajaxHtml;

// 2)
// document.querySelector(’#date’).innerHTML =ajaxHtml//里面参数是CSS选择器

// 2.Class类
// 1) var _table = document.getElementsByClassName(‘date’)[0].innerHTML =ajaxHtml;
// var _table = document.querySelector(’.date’).innerHTML =ajaxHtml;
// var _table = document.querySelectorAll(’.date’)[0].innerHTML =ajaxHtml;
// 3. 标签
// var _table = document.querySelectorAll(“table”)[0].innerHTML =ajaxHtml;//ul标签集合

// var _table = document.getElementsByTagName(“table”);
// console.log(_table);//HTMLCollection类数组对象
// console.log(_table.length);//HTMLCollection长度
// _table[0].innerHTML =ajaxHtml;
// console.log(_table)
// $(’.date’).html(ajaxHtml);

// 4. name查询元素的 name 属性
//
// getElementsByName(‘myInput’)[1]; //方法可返回带有指定名称的对象的集合。

// obj.querySelector("")里面参数是CSS选择器

// obj.querySelectorAll("")、document.getElementsByTagName里面参数是HTML标签名称，返回的NodeList类数组对象