DOM是文档对象模型
是一种可以操作HTML文档的重要手段，利用DOM可完成对HTML文档中所有元素的获取，访问，标签属性和样式的设置等操作
DOM HTML节点树
1.根节点：<html>标签是整个文档的根节点，有且仅有一个。
2.子节点：指的是某个节点的下级节点，
列如<head>和<body>节点是<HTML>节点的子节点
3.父节点：指的是某个节点的上级节点，类如，<HTML>元素则是<head>和<body>节点的父节点。
4.兄弟节点：两个节点共同属于一个父节点。
HTML元素操作
利用document对象的方法
| 方法 | 说明 |
| document.getElementById() | 返回对拥有id的第一个对象的引用 |
| document.getElementsByName() |
返回带有指定名称的的对象的集合 |
| document.getElementByTagName() | 返回带有指定标签名的对象集合 |
| document.getElementByClassName() | 返回带有指定类名的对象集合（IE6~8） |
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改css样式</title>
<style>
#div1{
width: 500px;
/*行内权值1000*/
}
</style>
</head>
<body>
<div id="div1" class="divC"></div>
<div>帅帅</div>
</body>
</html>
<script>
//获取dom 常见有三种样式
// 根据标签
var divT=document.getElementsByTagName('div')
console.log('divT')
divT[1].style.color='lightpink'
// 根据class // [document.getElementsByClassName('divC')]
var divC=document.getElementsByClassName('divC')
console.log(divC)
divC[0].style.height='300px'
// 根据id document.getElementById('div1') console.log( document.getElementById('div1'))
// document.getElementById('div1').style.width='300px'
var div1=document.getElementById('div1')
console.log(div1)
div1.style.width='300px'
</script>
看主要获取Dom的三种方式
1.根据标签
var divT=document.getElementsByTagName('div')
console.log('divT')
divT[1].style.color='lightpink'
首先
TagName为div
我们在div中的文字就会变色
效果如下
然后
2.根据class
var divC=document.getElementsByClassName('divC')
console.log(divC)
divC[0].style.height='300px'
根据class我们就调用了divc
效果如下把他的高度设置为了300px
3.根据id
var div1=document.getElementById('div1')
console.log(div1)
div1.style.width='300px'
这样我们根据id获取到了div1
设置它的宽度300px
效果如上图所示