dom节点的理解

简介

DOM在HTML里面的意思是文档对象模型，一般只要是渲染在网页中的每个元素都会有一个节点。

平时的一个页面都会有一个最大的节点，也就是document，以他为节点下以树的形式不断向下扩充叶子节点，这个树就是dom树。

dom用来做什么？

平时我们看到的页面好像都是静态的，都是html直接排列好的，但是dom的存在可以提供一个接口让我们操作其中一个/几个，这样我们可以对其中的节点进行添加、删除、修改、移动等等操作。

所以dom就可以理解成，我们获取其中节点的一个方式，想要找到某个元素，就需要有dom的存在。

如何获取到DOM

可以通过document下的各种方法获取到，比如给元素加id

<div id="d1"></div>
<script>
    var dom1 = document.getElementById('d1');
</script>

另外还有 document.getElementsByClassName('div1') ,可以通过className直接选择。

dom获取到之后如何使用

用一个比较简单的例子，比如改变dom其中的一个背景颜色：

<div id="div1">测试div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取div1的style样式
  console.log(d1.style);
  // 设置div1的style
  d1.style.backgroundColor = 'red';
</script>