JavaScript DOM操作笔记记录回忆总结

一、什么是DOM？

1、通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

2、当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

二、操作DOM

1、在操作DOM之前，我们需要先获取到被操作的对象属性，然后再操作

a、通过 id 找到 HTML 元素 document.getElementById()

b、通过类名找到 HTML 元素 document.getElementClassName()

c、通过标签名找到 HTML 元素 getElementsByTagName

d、匹配指定 CSS 选择器的一个元素 document.querySelector()

e、获取文档中某个元素的匹配列表 document.querySelectorAll()

2、创建一个DOM

例：页面上添加一个“你好”

<div>
  <h1>Hello, world!</h1>
</div>
<script>
  const title = document.createElement('h1');//添加一个h1标签
  title.textContent = '你好';//设置h1标签的文本内容
  document.querySelector('div').appendChild(title);//将h1标签添加到div标签中
</script>

此时会发现该标签已经添加成功，原理就是先通过选择器找到div，然后再给div添加一个h1标签节点

3、通过选择器修改某个元素的属性

例：修改div标签的样式属性

<div class="box"></div>
  <script>
    const box = document.querySelector('.box');//通过class类获取属性名为box的div元素的属性
    box.style.backgroundColor = 'blue';//修改box操作对象的backgroundColor属性
    box.style.width = '300px';//宽度属性
  </script>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>

运行之后在页面或者元素操作台可以看到：