web前端 -- Day17 js基础
javaScript分三个部分
ECMAScript标准:js的基本语法
DOM:Document Object Model --> 文档对象模型 --> 操作页面的元素
BOM:Brower Object Model --> 浏览器对象模型 --> 操作的是浏览器
文档:把一个HTML文件看成是一个文档,由于万物皆对象,所以把这个文档看做一个对象。
HTML
:展示信息,展示数据。
XML
:xml文件也可以看成是一个文档,侧重于存储数据。
html
:文件看成是一个文档,那么这个文档看成是一个对象,文档中的所有标签都可以看成是一个对象。
总结: 页面中的每一个标签,都是一个元素(element),每个元素都可以看成是一个对象。标签可以嵌套标签,标签中有标签,元素中有元素。
html页面中都有一个根标签 --> html --> 也叫根元素
页面中的一个根元素(标签 --> html)里面有很多元素(很多标签,很多对象)
- 文档:一个页面就是一个文档
- 元素(element):页面中所有的标签都是元素,元素可以看成是对象
- 节点(node):页面中所有的内容都是节点:标签、属性、文本
节点范围比元素范围大
html --> head--->body -->其他标签
由文档及文档中的所有元素(标签)组成的一个树形结构图,叫做树状图(DOM图)
获取元素方式
javaScript分三个部分
ECMAScript标准:js的基本语法
DOM:Document Object Model --> 文档对象模型 --> 操作页面的元素
BOM:Brower Object Model --> 浏览器对象模型 --> 操作的是浏览器
文档:把一个HTML文件看成是一个文档,由于万物皆对象,所以把这个文档看做一个对象。
HTML
:展示信息,展示数据。
XML
:xml文件也可以看成是一个文档,侧重于存储数据。
html
:文件看成是一个文档,那么这个文档看成是一个对象,文档中的所有标签都可以看成是一个对象。
总结: 页面中的每一个标签,都是一个元素(element),每个元素都可以看成是一个对象。标签可以嵌套标签,标签中有标签,元素中有元素。
html页面中都有一个根标签 --> html --> 也叫根元素
页面中的一个根元素(标签 --> html)里面有很多元素(很多标签,很多对象)
- 文档:一个页面就是一个文档
- 元素(element):页面中所有的标签都是元素,元素可以看成是对象
- 节点(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