[js] DOM querySelector getElementsByClassName getElementById...
原创
©著作权归作者所有:来自51CTO博客作者wx5909dcbadae4c的原创作品,请联系作者获取转载授权,否则将追究法律责任
document.getElementById(‘id属性值’);
只能通过 id属性值 获取标签对象
执行结果 是一个 独立的标签对象
document.getElementsByClassName('class属性值');
只能通过 class属性值 获取标签对象
执行结果 是一个 伪数组
不支持 forEach
document.getElementsByTagName('标签名称');
只能通过 标签名称 获取标签对象
执行结果 是一个 伪数组
不支持 forEach
document.getElementsByName('标签name属性值名称');
只能通过 标签name属性值 获取标签对象
执行结果 是一个 伪数组
支持 forEach
<div id="div1" class="div2" name="div3" abc="def">我是div标签</div>
// // 标签名称
var res1 = document.querySelector('div');
//<div id="div1" class="div2" name="div3" abc="def">我是div标签</div>
console.log( res1 );
// // id属性值
var res2 = document.querySelector('#div1');
// console.log( res2 );
// // class属性值
var res3 = document.querySelector('.div2');
console.log( res3 );
// // 其他属性值 '[属性="属性值"]'
var res4 = document.querySelector('[name="div3"]');
console.log( res4 );
css语法形式
// 获取 ul标签中的 所有 li标签
var res6 = document.querySelectorAll('ul>li');
console.log( res6 );
// 获取 ul标签中 第一个li标签
var res7 = document.querySelector('ul>li:first-child');
console.log( res7 );
// // 兼容 但是 不好用的 获取标签对象方法
getElementById
// // id属性值
var res13 = document.getElementById('div1');
console.log( res13 );
getElementsByTagName
// // 标签名称
var res15 = document.getElementsByTagName('div');
console.log( res15 );
getElementsByClassName
<div id="div1" class="div2" name="div3" abc="def">我是div标签</div>
// // class属性值
var res14 = document.getElementsByClassName('div2');
console.log( res14 );
getElementsByName
var res16 = document.getElementsByName('div3');
console.log( res16 );
for( var i = 0 ; i <= res16.length-1 ; i++ ){
console.log( res16[i] );
}