JavaScript中DOM操作文档对象模型获取标签内容

DOM操作文档对象模型获取标签内容
一、通过id属性值获取标签对象（只能获取一个标签对象）

document.getElementById('id属性值')

//获取标签页中id为div1的标签对象
var oDiv1 = document.getElementById('div1');
//输出为id为id为div1的标签内容
console.log(oDiv1);

二、通过class属性值获取标签对象
document.getElementsByClassName('class属性值')
elements后面有个s表示复数，可以选中所有的class，在js中class一律定义为classname，不能被forEach()循环

var oDiv2 = document.getElementsByClassName('div2');
//输出所有class是div2的数据
console.log(oDiv2);
//输出第一个div2的数据
console.log(oDiv2[0]);
//输出第二个div2的数据
console.log(oDiv2[1]);

三、通过标签名字获取标签对象

document.grtElementsByTagName('标签名字)
获取到的也是一个伪数组，不能被forEach()循环

var oDiv3 = document.getElementsByTagName('div');
//输出所有标签是div2的数据
console.log(oDiv3);
//输出第二个div的数据
console.log(oDiv3[1]);

四、通过neme标签获取标签对象
document.getElementByname
获取到的也是一个伪数组，不能被forEach()循环

var oDiv4 = document.getElementByname('s');
////输出所有name标签是s的数据
console.log(oDiv4);
////输出name标签是s的第二个数据
console.log(oDiv4[1]);

五、通过语法规范，获取标签对象
document.querySelector() //获取符合条件的第一个标签
document.querySelectorAll() //获取符合条件的所有标签
获取到的也是一个数组，可以被forEach()循环，但是低版本ie不兼容以上两种方式

//获取id为div1的标签内容
var oQuery1 = document.querySelector('#div1');
//输出为id为div1的标签内容

console.log(oQuery1);
//获取class为div2的标签内容
var oQuery2 = document.querySelector('.div2');
//输出为class为div1的标签内容
console.log(oQuery2);

//通过标签的标签名称来获取,只获取第一个div标签
var oQuery3 = document.querySelector('div');
//输出为标签为div的标签内容
console.log(oQuery3);

//获取所有标签为div的标签
var oQuery4 = document.querySelectorAll('div');
//输出所有标签为div的数组，
console.log(oQuery4);

//获取所有name属性值为s的标签
var oQuery5 = document.querySelectorAll('[name="s"]');
//输出name属性值的数组
console.log(oQuery5);

// 获取type属性值是text的标签
var oQuery6 = document.querySelectorAll('[type="text"]');
//输出type属性为text的数组
console.log(oQuery6);

//还可以通过标签结构获取ul下的li标签，
var oQuery7 = document.querySelectorAll('ul>li');
console.log(oQuery7);

注：
A、只要是css语法支持的选择器语法都行，父子,后代,兄弟....都支持
B、两种方式获取的都是伪数组,但是获取的数组内容,不同
C、如果要循环，尽量用for循环，不容易出问题