黑马前端pink 教学DOM 笔记

Web APls

API（Application Programming Interface 应用程序编程接口）是一些预先定义的函数，目的是 提供应用程序于开发人员基于某酸碱或硬件的以访问一组例程的能力，而又无需访问源 码，或理解内部工作机制的细节。

简单理解：API是给程序员提供的一种工具，一便能轻松的实现想要完成的功能。

Wed API 是浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM）。

现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器的交互效果

Wed API 一般都有输入的输出（函数的传参的返回值），Wed API很对都是方法（函数）

DOM

DOM是Document Object Model（文档对象模型）的缩写，是W3C组织推荐的处理可扩展 标记语言（HTML或者XML）的标准编程接口。

Document（文档）：创建一个网页并将该网页添加到Web中，DOM就会根据这个网页 创建一个文档对象。

Object（对象）：对象是一个独立的数据集合，如文档对象，即是文档中元素与内容的 数据集合。

Model（模型）：模型代表将文档对象表示为树状模型，在这个树状模型中，网页中的 各个元素于内容表现为一个相互连接的节点。

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中的所有标签都是元素，DOM中使用element表示

节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

DOM把以上内容都看做是对象

DOM在我们实际开发中主要用来操作元素的

获取页面中的元素可以使用以下几种方式

根据ID获取

使用document.getElementById(“id”)方法可以获取带有ID元素的对象

1. get 获得 element 元素 by 通过
2. 参数：id 是大小写敏感的字符串
3. 返回的是一个元素对象
4. console.dir 打印的我们返回的元素对象 更好的查看里面的属性和方法

根据标签名获取

使用document.getElementsByTagName()方法可以返回带有指定标签名的对象集合。

1. 返回的是获取过来元素对象的集合，以伪数组的形式储存的
2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
3. 如果页面中只有一个元素 返回的还是伪数组的形式
4. 如果页面内中没有这个元素返回的是空的伪数组的形式

注意：

1. 因为的到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
2. 得到元素对象是动态的

根据标签名获取

还可以获取某个元素（父元素）内部所有指定标签名的子元素

例：element.getElementsByTagName（“标签名”）;

父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

通过HTML5新增的方法获取

1. 根据类名返回元素对象集合 document.getElementsByClassName(“类名”);
2. 根据指定选择器返回第一个元素对象 document.querySeleotor(“选择器”);选择器需 要加符号比如 .box  #id  标签名
3. 返回指定选择器的所有元素对象集合 document.querySeleotorAll(‘选择器’)；

特殊元素获取

1. 获取body元素 document.body 返回body元素对象
2. 获取html元素 document.documentElement; 返回html元素对象