DOM操作之获取页面中标签的方式
1.通过id属性值获取
document.getElementById( ‘id属性值’ ) 执行结果只能获取一个标签对象
2.通过class属性值获取
document.getElementsByClassName( ‘class属性值’ )
Elements —s表示复数
class属性在JavaScript中一律定义为className
class关键词用在其他功能上,执行结果获取到的是一个伪数组 不能用forEach循环遍历
3.通过标签名称获取标签对象
document.getElementsByTagName( ‘标签名称’ )
获取到的是一个伪数组 不能用forEach循环遍历
4.通过 标签name属性的属性值获取标签对象
document.getElementsByName( ‘标签name属性的属性值’ )
获取到的是一个伪数组 可以用forEach循环遍历
5.通过只要是符合语法规范的方式,就能获取到标签对象 (推荐方法)
document.querySelector( ) 获取符合条件的第一个标签
document.querySelectorAll( ) 获取符合条件的所有标签
所有标签是一个伪数组,可以被forEach循环遍历
通过标签的id属性值来获取,记得要写#号
document.querySelector( ‘#div1’ )
通过标签的class属性值来获取,记得要写.点
document.querySelector( ‘.div1’ )
通过标签的标签名称来获取
只获取第一个div标签
document.querySelector( ‘div’ )
通过属性和属性值获取
获取name属性值是s的标签
document.querySelector( ’ [name=“s” ]’ )
获取typet属性值是text的标签
document.querySelector( ’ [type=“text” ]’ )
通过标签结构获取
document.querySelector( ’ ul>li ’ )
DOM操作之设定标签属性
给标签添加属性
标签对象.setAttribute( ‘属性名称’ , 属性值 )
一次只能定义一个属性
<div>我是div</div>
<script>
var oDiv = document.querySelector( 'div' )
// 给div标签添加属性index,属性值是0
oDiv.setAttribute( 'index' , 0 )
</script>
获取标签的属性值
console.log( oDiv.getAttribute( ‘index’ ) )
标签对象.id = 属性值 设定id属性的属性值
标签对象.className = 属性值 设定class属性的属性值