JavaScript中的DOM操作

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属性的属性值