JS-DOM树和DOM对象

作用和分类

作用：就是使用JS去操作html和浏览器

分类：DOM（文档对象模型）、BOM（浏览器对象模型）

什么是DOM

DOM（Document Object Model--文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API

白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能

DOM作用：开发网页内容特效和实现用户交互

DOM树

定义：将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树，描述网页内容关系的名词

作用：文档树直观的体现了标签与标签之间的关系

DOM对象（重要）

DOM对象

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

1）所有的标签属性都可以在这个对象上面找到

2）修改这个对象的属性会自动映射到标签身上

console.dir()//打印对象，获取的信息比较清晰

DOM的核心思想

把网页内容当作对象来处理

document对象

1）是DOM里提供的一个对象

2）所以它提供的属性和方法都是用来访问和操作网页内容的

3）网页所有内容都在document里面

获取DOM元素

根据css选择器来获取DOM元素（重点）

1.选择匹配的第一个元素

document.querySelector('css选择器')

参数：包含一个或多个有效的css选择器字符串

返回值：css选择器匹配的第一个元素，一个HTMLElement对象；如果没有匹配到，则返回null

可以直接操作修改

2.选择匹配的全部元素

document.querySelectorAll('css选择器')

参数：包含一个或多个有效的css选择器字符串

返回值：css选择器匹配的NodeList对象集合

不能直接修改，只能通过遍历的方式一次给里面的元素做修改