web前端 -- Day17 js基础

javaScript分三个部分

ECMAScript标准：js的基本语法
DOM:Document Object Model --> 文档对象模型 --> 操作页面的元素
BOM:Brower Object Model --> 浏览器对象模型 --> 操作的是浏览器

文档：把一个HTML文件看成是一个文档，由于万物皆对象，所以把这个文档看做一个对象。
HTML:展示信息，展示数据。
XML:xml文件也可以看成是一个文档，侧重于存储数据。
html：文件看成是一个文档，那么这个文档看成是一个对象，文档中的所有标签都可以看成是一个对象。

总结： 页面中的每一个标签，都是一个元素（element），每个元素都可以看成是一个对象。标签可以嵌套标签，标签中有标签，元素中有元素。

html页面中都有一个根标签 --> html --> 也叫根元素
页面中的一个根元素（标签 --> html）里面有很多元素（很多标签，很多对象）

1. 文档：一个页面就是一个文档
2. 元素（element）：页面中所有的标签都是元素，元素可以看成是对象
3. 节点（node）：页面中所有的内容都是节点：标签、属性、文本

节点范围比元素范围大
html --> head--->body -->其他标签
由文档及文档中的所有元素（标签）组成的一个树形结构图，叫做树状图（DOM图）

获取元素方式

1、根据id属性的值获取元素，返回来的是一个元素的对象

document.getElementById(“id属性的值");

2、根据标签名字获取元素，返回来的是一个伪数组，里面保存了多个DOM对象

document.getElementsByTagName(“标签的名字");

3、根据name属性的值获取元素，返回来的是一个伪数组，里面保存了多个DOM对象

document.getElementsByName(“name属性的值");

4、根据类样式的名字获取元素，返回来的是一个伪数组，里面保存了多个DOM对象

document.getElementsByClassName(“类样式的名字");

5、根据选择器获取元素，返回来的是一个元素对象

document.querySelector(“选择器的名字");

6、根据选择器获取元素，返回来的是一个伪数组，里面保存了多个DOM对象

document.querySelectorAll(“选择器的名字");

注意： 设置标签中的文本内容，应该使用textContent属性，谷歌、火狐、ie8不支持;设置标签的文本内容，应该使用innerText，谷歌、火狐、ie8都支持;如果这个属性在浏览器中不支持，那么这个属性的类型就是undefined