DOM：1.获取元素，2.操作元素（样式，属性，类名，内容）

Document Object Model文档对象模型

其实dom操作就2个步骤：获取到元素，进行你要的操作

伪数组：有索引，有长度，可以遍历，不可以使用数组的方法，所以要转换成真数组

1. 获取元素：分为两大类（获取常规元素，获取非常规元素）

获取常规元素：

document.getElementsById('id')

document.getElementsByTagname('标签名')

document.getElementsByClassname('类名')

 单一获取：document.querySelector('css选择器')

 获取全部（返回数组）：document.querySelectorAll('css选择器')

获取非常规元素：

获取html：document.documentElement

获取head：document.head

获取body：document.body

2. 操作元素  （样式，属性{属性}，类名[类名]，内容）

操作样式：

window.getComputedStyle( "dom" ).样式名        //伪类获取

window.getComputedStyle( "dom",[伪元素] ).样式名        //伪类获取

区别：getComputedStyle只能获取

dom.style.样式名 = ' 样式值 '      //style虽然只能获取行内样式，但是可以设置行内和非行内：元素的样式

区别：style是一个可读写的属性，既可以获取，又可以设置； getComputedStyle只能获取

操作属性：{ 属性 }  3种

1.原生属性
                获取：元素.属性名
                设置：元素.属性名 = '值'

2.自定义属性

                获取：元素.getAttribute('属性名')
                设置：元素.setAttribute('属性名', '属性值')
                    属性名字之前有就是修改，之前没有就是添加。
                删除：元素.removeAttribute('属性名')

3. h5自定义属性：可以点方法操作，也可以数组关联语法：：：增删改查

            每一个元素身上天生自带一个dataset属性，是一个对象数据类型，用来保存h5自定义属性的。所以想要添加、删除自定义属性只需要操作这个dataset对象即可

        点语法：
            获取h5自定义属性的值：元素.dataset.属性名
            设置h5自定义属性的值：元素.dataset.属性名 = "值"
                名字之前存在就是修改，不存在就是添加
            删除h5自定义属性：delete 元素.dataset.属性名

        数组关联语法：
            获取h5自定义属性的值：元素.dataset[属性名]
            设置h5自定义属性的值：元素.dataset[属性名] = 值
                名字之前存在就是修改，不存在就是添加
            删除h5自定义属性：delete 元素.dataset.[属性名]
            注意：如果名字不是变量需要加引号

h5自定义属性在标签上显示是以data-开头

    <img src="" alt="" data-aa="啊啊啊啊啊啊啊" data-bb="bbbbbbbbbbb">

操作类名：[ 类名 ]

方式一：className：按照操作原生属性的语法进行操作
                   获取class类名： 元素名.className
                   设置class值：     元素名.className = "类名"
                  赋值的时候是完全覆盖式，会把原先的类名覆盖点，如果不想覆盖需要做字符串的拼接操作：元素名.className = "类名 类名 类名"

方案二：calssList： 每一个元素身上天生都带有一个classList属性，里面存储了该元素所有的类名，是一个伪数组。
                    获取：    元素.classList ["索引"]
                    增：        元素.classList.add("类名")
                    删：        元素.classList.remove("类名")
                    替换：    元素.classList.toggle("类名")  原先有就删除，原先没有就添加

操作内容：   获取     设置

元素.innerHTML

元素.innerHTML = " "               

// 完全覆盖，可解析标签，要想保留原来的内容，所以要 += 进行拼接

元素.innerText

元素.innerText = " "  ||   元素.textContent = " "

// 完全覆盖，纯文本内容，不可解析标签，所以要 += 进行拼接

元素.value

表单元素.value = " "     

// 只针对于表单元素，添加或修改表单元素的内容