JavaScript的DOM学习笔记——1、DOM树和DOM对象

最新推荐文章于 2025-11-26 17:11:00 发布

原创最新推荐文章于 2025-11-26 17:11:00 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #笔记 #dom

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习JavaScript，这一篇开始学习DOM。

一、什么是DOM

DOM(Document Object Model)，文档对象模型，是用来与HTML文档交互的API，是浏览器提供的一套专门用来操作网页内容的功能。可以开发网页内容特效和实现用户交互。

二、 DOM树

将HTML文档以树状结构直观的表现出来，称之为文档树或者DOM树。描述网页内容关系的名词。
作用：文档树直观的体现了标签与标签之间的关系。
假设我这里有一个html文件，正常来说它的标签可以转变成DOM树：
在这里插入图片描述

三、 DOM对象

浏览器根据html标签生成的JS对象。

在html里面的所有标签属性都可以在对象上面找到
修改这个对象的属性，都会自动映射到标签身上
所以我们可以通过获取DOM对象，然后修改对象，达到了修改html标签的目的。

四、获取DOM元素

1、获取单个元素

通过一定的条件，找到符合的第一个元素。
返回值：CSS选择器匹配的第一个元素，一个HtmlElement对象，这个对象可以直接修改。

1. querySelector

语法：document.querySelector(‘CSS选择器’)
作用：选择匹配的第一个元素。
举例：

<body>
  <div id="box">box1</div>
  <div id="box">box2</div>
  <div id="box">box3</div>
  <script>
    let obj = document.querySelector('#box');
    obj.style.color = 'red';
  </script>
</body>

显示：
在这里插入图片描述

在html标签里面，写了3个div，然后id都是box。然后我用

document.querySelector('#box')；

找到了第一个id是box的元素对象，并且把这个对象的style的颜色改为了红色。

2. getElementById

语法：document.getElementById(‘id的名字’)
作用，通过指定的id名字找到第一个符合的元素
比如刚才那个例子，可以改成：

let obj = document.getElementById('box');

2、获取多个元素

通过一定条件，找到符合条件的多个元素。
返回值：NodeList对象集合，不可以直接修改，只能通过遍历先获取集合里面的元素对象，然后再修改对象。

1. querySelectorAll

语法:document.querySelectorAll(‘CSS选择器’);
作用：根据CSS选择器找到符合条件的所有元素，并返回NodeList数组。
举例：

<body>
  <div id="box">box1</div>
  <div id="box">box2</div>
  <div id="box">box3</div>
  <script>
    let arr = document.querySelectorAll('#box');
    for (let i = 0; i < arr.length; i++) {
      arr[i].style.color = 'red';
    } 
  </script>
</body>

结果：
在这里插入图片描述

可以看到，3个符合id等于box的元素都被改成了红色。

2. getElementsByTagName

语法：document.getElementsByTagName(‘标签类型’);
作用：把符合要求的所有标签的元素对象都找出来，并返回NodeList数组。
举例：

<body>
  <div id="box">box1</div>
  <div id="box">box2</div>
  <div>
    <div>box3</div>
    box4
  </div>
  <script>
    let arr = document.getElementsByTagName('div');
    for (let i = 0; i < arr.length; i++) {
      arr[i].style.color = 'red';
    } 
  </script>
</body>

结果：
在这里插入图片描述

可以看到，只要是div，不论是嵌套的，还是有没有指定id的，都被找出来了。

3. getElementsByClassName

语法：document.getElementsByClassName(‘类名’);
作用：获取符合要求的类名的所有元素对象，并返回NodeList数组。
举例：

<body>
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div>
    <div>box3</div>
    box4
  </div>
  <script>
    let arr = document.getElementsByClassName('box');
    for (let i = 0; i < arr.length; i++) {
      arr[i].style.color = 'red';
    } 
  </script>
</body>

结果：
在这里插入图片描述

可以看到，前面2个div指定了类名为box，所以被找出来并改了颜色。

3、获取特殊元素

1、获取body元素

let bodyEle = document.body;
console.log(bodyEle);

结果：
在这里插入图片描述

2、获取html元素

let htmlEle = document.documentElement;
console.log(htmlEle);

结果：
在这里插入图片描述

五、打印DOM元素

先看例子：

<body>
  <div id="box">box1</div>
  <div id="box">box2</div>
  <div id="box">box3</div>
  <script>
    let obj = document.querySelector('#box');
    console.log(obj);
    console.dir(obj);
  </script>
</body>