JavaScript DOM

一.JavaScript DOM介绍

1.DOM是？

中文是文档对象模型

DOM是html文档的一个抽象

2.js语言，DOM，网页的关系

js语言操作DOM（js不能直接操作网页，只能通过DOM）,DOM的变化映射到HTML，进而显示出来。

        js---》DOM--->页面--》用户视觉

3.模型---DOM树

js要操作网页，就必须通过DOM树才可以；操作DOM数就要查找DOM树的根节点（文档）

二.节点

1.节点是？

节点是构成我们网页的最基本的组成部分，网页中的每一个部分（对象）都可以称节点

如：html标签，属性，文本，注释，整个文档等都是节点

2.节点类型--按照大小关系分类

①文档节点：表示的是 整个html

②元素节点：表示的是  html中的标签

③属性节点：表示的是  html标签中的属性

④文本节点：表示的是  html标签中的内容 文本

节点最终都是映射成js的对象，程序员操作这些对象来改变网页

3.属性和方法

4. document 对象？

*document 对象是浏览器提供给js使用的对象

*document 代表的是 整个页面

*js语言操作页面都是通过document 对象操作

*document 对象是浏览器内置的对象，不需要声明不需要实例化，直接使用

console.log(document);

注意：JS使用的对象有3类：

①程序员自定义的对象

②js语音自定义对象（date等）

③数组对象（浏览器定义的对象（document)）

三.节点对象的操作（重要）

1.文档查询--标签

*document.getElementById(“id值”);   //通过id获取一个元素节点对象    返回是对象
*document.getElementsByTagName(“标签名”);//通过标签名获取一组元素节点对象  返回是数组
*document.getElementsByName(“name值”);//通过那么属性获取一组元素节点对象    返回是数组

eg:<button name="btn" id="mybtn">我是按钮1</button>

var btns = document.getElementById("mybtn"); 

var btns = document.getElementsByTagName("button");

var btns = document.getElementsByName("btn");