DOM详解-上

• DOM介绍

DOM的全拼是：Document Object Model，叫做文档对象模型。DOM中的顶级对象是document，言外之意，DOM其实是属于BOM的。

• html基本结构的操作：

1. document.body :body比较常用, 并且在页面中是唯一的, 因此可以使用document.body直接获取

2. document.documentElement : 可以获取html元素及其所有内容

3. document.head : 可以直接获取head元素

4. document.title : 可以直接获取title的文本

• 获取元素

documen.querySelector(css选择器); // 获取到匹配css的第一个元素

documen.querySelectorAll(css选择器); // 获取到匹配css的所有元素

• 内容操作

语法：

元素.innerHTML # 代表元素中的所有内容（包含标签）

元素.innerText # 代表元素中的文本内容

表单元素.value

# 单标签操作内容其实就是在操作元素的属性

• 样式操作

设置样式

元素.style.css属性名 = css属性值; # 给标签设置样式

获取样式

window.getComputedStyle(标签)//这时候返回的是对象数组

如果想获取标签的某一个元素那么在()后根一个.属性名/例如(div).width

• 元素类名

使用元素的className属性可以设置元素的类名，也可以获取类名

例如

<script>

var div = document.querySelector('div')

div.className = 'test'

console.log(div) // <div class="test"></div>

console.log(div.className) // test

</script>

classList类名操作：

添加类名，语法：类名列表.add(类名)

删除类名，语法：类名列表.remove(类名)

• 属性操作

标签属性

元素.setAttribute(属性名,属性值) # 设置元素的属性

元素.getAttribute(属性名); # 获取元素属性

元素.removeAttribute(属性名); # 删除元素属性

对象属性

元素.属性名 = 值;

console.log(元素.属性名)

H5的自定义属性操作

标签.dataset.XXX // 获取属性的值