温故而知新——DOM

获取元素的五种方式

1、根据 id 名称 获取

document.getElementById ( ' id名称 ' )

作用：获取文档流中 id 名对应的一个元素，

返回值：如果有 id 对应的元素，就是这个元素，如果没有就是null 

2、根据 元素 类名 获取

document.getElementsByClassName( ' 元素类名 ' )

作用：获取文档流中 所有 类名对应的元素

返回值：必然是一个伪数组，如果有类名对应的元素，有多少获取多少，如果没有，返回空的伪数组（伪数组：长的像是数组，排列也按照索引排列，但是不能使用数组常用方法）

3、根据 元素 标签名 获取

document.getElementsByTagName( ' 元素类名 ' )

作用：获取文档流中 所有 标签名对应的元素

返回值：必然是一个伪数组，如果有标签名对应的元素，有多少获取多少，如果没有，返回空的伪数组

4、根据 选择器 获取一个

document.querySelector ( '选择器' )

例如：

document.querySelector ( 'div' )

document.querySelector ( '.classname' )

document.querySelector ( '#id' )

作用：获取文档流中满足选择器规则的第一个元素

返回值：如果有选择器对应的元素，获取到第一个，如果没有返回null

5、根据 选择器 获取一组

document.querySelectorAll ( ' 选择器 ' )

例如：

document.querySelectorAll ( 'div' )

document.querySelectorAll ( '.classname' )

document.querySelectorAll ( '#id' )

作用：获取文档流中 所有 满足选择器的元素

返回值：必然是一个伪数组，如果有选择器对应的元素，有多少获取多少，如果没有，返回空的伪数组

操作元素内容

操作元素文本内容

{

获取：元素 . innerText

设置：元素 . innerText = '新内容'

}

操作元素超文本内容

 

{

 

获取：元素 . innerHTML

 

设置：元素 . innerHTML = '新内容'

 

}

操作元素属性

原生属性：{

获取：元素.属性名

设置：元素.属性名 = '属性值'

}

自定义属性：{

获取：元素.getAttribute('属性名')

设置：元素.setAttribute('属性名','属性值')

删除：元素.removeAttribute('属性名')

}

以上方法一般不用做操作元素类名和样式