JS基础 操作DOM元素语法

1获取元素

获取非常规标签 html body head
var html=document.documentElement
var body=document.body
var head=document.head

获取常规标签
1、根据ID获取元素 document.getElementById('ID名字')
   如果没有对应的ID元素，就是null
2、根据类名获取元素 document.getElementsByClassName('类名')
   返回伪数组，伪数组内第[n]个才是元素
3、根据标签名 document.getElementsByTagName('标签名')
   返回伪数组，伪数组内第[n]个才是元素
4、根据name属性获取 document.getElementName('name属性')
   返回伪数组，伪数组内第[n]个才是元素
5、根据选择器获取一个元素 document.querySelector('选择器')
   返回第一个选择器元素，如果没有，就返回null
6、根据选择器获取一组元素 document.querySelectorAll('选择器')
   返回一组选择器，如果没有就返回null

2操作元素内容

1、innerText
读：元素.innerText 该元素内的文本内容
写：元素：innerText='值' 覆盖式书写该元素内的文本内容
如果设置html格式的字符串，不会解析出来
2、innerHTML
读：元素.innerHTML 该元素内的所有内容，返回字符串
写：元素.innerHTML='值' 
覆盖式书写该元素内的超文本内容，能解析html标签的内容
3、value
读：表单.value 获取该元素的value值
写：表单元素.value='值' 完全覆盖书写该表单元素的value的值

3 操作元素属性

元素的属性由属性名＝“属性值”组成
属性的分类：
１、原生属性
　如：id class style type .....
　操作原生属性：
　读：元素.属性名
　写：元素.属性="值"
　布尔类型的属性可以直接使用true或false来赋值
2、自定义属性
获取：元素.getAttribute('属性名')
设置自定义属性：元素.setAttribute('属性名'，属性值)
删除自定义属性：元素.removeAttribute('属性名')
3、操作H5自定义属性
在元素身上有一个dataset的成员，类似对象数据类型，存储着以data- 开头的自定义属性
增加：元素.dataset.属性名=属性值
删除：delete 元素.dataset.属性名
修改：元素.dataset.属性名=属性值
查：元素.dataset.属性名

4 操作元素样式　style

１行内样式
获取：元素.style  元素.style.fontSize 元素.style.['font-size']
设置：元素.style.backgroundColor='red'
2 非行内样式
标准浏览器 window.getComputedStyle(元素).样式名
IE低版本 元素.currentStyle.样式名
注意：
带中划线的样式，要用驼峰命名法，或者数组关联语法['font-size']

5 操作元素类名

1 className
获取：元素.className  得到字符串类型
设置：元素.className='新类名' 覆盖式替换
追加：元素.className+= ' 新类名'  '空格新类名'
2  classList
添加：元素.classList.add('新类名') 不会重复添加类名
删除：元素.classList.remove('新类名')
切换：元素.classList.toggle('新类名') 本身有的话就删除，没有该类名就添加