JS之DOM（1）

目录

 

API

Web API

DOM

简介

DOM树

获取元素

根据ID获取--getElementByld()

根据标签名获取--getElementsByTagName()

通过HTML5新增地方法获取

获取body元素​

获取html元素​

---

 

API

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

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

Web API

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

DOM

简介

文档对象模型，是W3C组织推荐的处理可拓展标记语言（HTML或XML）的标准编程接口。

DOM树

• 文档：一个页面就是一个文档，DOM中使用document表示
• 元素：页面中所有标签都是元素，DOM中使用element表示
• 节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作为对象

 

获取元素

根据ID获取--getElementByld()

使用getElementByld()方法可以获取带有ID的元素对象,id是大小写敏感的字符串（所以getElementById的括号里面要带引号）。

返回的是元素对象，如果当前文档中特定的id的元素不存在则返回null。

由于文档页面从上往下加载，所以先要有标签，所以script写在标签下面（后面会有方法将其提到上面）。

console.dir（）可以打印返回的元素对象，更好的查看里面的属和方法。

根据标签名获取--getElementsByTagName()

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合（以伪数组的形式存储）。括号中同样是写字符串类型。书写格式如下：

 如果想要依次打印里面的元素对象可以采取遍历的方式。

得到的元素对象是动态的，即内容变化得到的对象也跟着改变。

特殊情况：页面中只有一个li则返回的也是伪数组，若没有该元素则返回的是空的伪数组。

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

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

如果是通过getElementsByTagName获取的父元素后面一定要加索引号指明到底是哪一个，或者更简单地通过id获取。

通过HTML5新增地方法获取

1、getElementsByClassName() 根据类名获得某些元素集合，得到的也是伪数组。

2、querySelector() 根据指定选择器返回第一个元素对象 

 如果想要得到id则要在前面加“#”，例如：

<div id="nav"><div>
//....
var nav = document.querySelector('#nav');

 切记里面的选择器要加符号，类选择器加“.”，id要加“#”，标签选择器不用加。

3、querySelectorAll() 根据指定选择器返回所有元素对象

获取body元素

获取html元素