JS16- DOM操作

DOM操作    文档对象模型
操作HTML文档

获取页面中标签的方式

(1)  通过 id属性值获取 标签对象
document.getElementById('id属性值') 
执行结果,只能获取一个标签对象
注意,id属性值,一定要有引号
        HTML中,id属性值一定不能重复设定

var oDiv1 = document.getElementById('div1');
console.log(oDiv1);


(2)  通过 class属性值 获取标签对象
document.getElementsByClassName('class属性值')
Elements 之后有一个s表示复数
class属性,在JavaScript中,一律定义为 className
class关键词用在其他功能上
执行结果,获取到的是,一个伪数组
即时只有一个符合条件的标签,获取到也是一个数组
数组的单元,是符合条件的标签
可以通过索引下标,来获取魔某一个标签对象
不能被 forEach() 循环遍历

var oDiv2 = document.getElementsByClassName('div2');
console.log(oDiv2);
console.log(oDiv2[0]);

不能被forEach()循环
oDiv2.forEach(function(v){
    console.log(v);  →  报错
})


(3) 通过 标签名称 获取标签对象
document.getElementsByTagName('标签名称');
获取到是一个伪数组
数组的单元是符合条件的标签
不能被forEach()循环遍历


var oDiv3 = document.getElementsByTagName('div');
console.log(oDiv3);

oDiv3.forEach(function(v){
    console.log(v);    →  报错
})


(4) 通过 标签name属性的属性值 获取标签对象
document.getElementsByName('标签name属性的属性值')
获取到的结果是一个伪数组
数组内容是符合条件的标签
可以被forEach()循环遍历

var oSpan = document.getElementsByName('s');
console.log(oSpan);

oSpan.forEach(function(v){
    console.log(v);
})


推荐方法
(5) 通过 只要是符合语法规范的方式 就能获取到标签对象
document.querySelector()     获取符合条件的第一个标签
document.querySelectorAll()  获取符合条件的所有标签
所有标签是一个数组,可以被forEach() 循环遍历

低版本ie不兼容这两种方式

通过标签的id属性值来获取,要记得写 # 号
var oQuery1 = document.querySelector('#div1');
console.log(oQuery1);

通过标签的class属性值来获取,要记得写 . 号
var oQuery2 = document.querySelector('.div2');
console.log(oQuery2);

通过标签的标签名称来获取
只获取第一个div标签
var oQuery3 = document.querySelector('div');
console.log(oQuery3);
获取所有div标签
var oQuery4 = document.querySelectorAll('div');
console.log(oQuery4);

通过属性和属性值获取
语法 : ('[属性="属性值"]') 

获取name属性值是s的标签
var oQuery5 = document.querySelectorAll('[name="s"]');
console.log(oQuery5);

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


还可以通过标签结构,获取
ul标签中,子级li标签
只要是css语法支持的选择器语法都行
父子,后代,兄弟....都支持
var oQuery7 = document.querySelectorAll('ul>li');
console.log(oQuery7);