web前端自学之路

web前端 -- Day17 js基础

2019-03-11  本文已影响0人  韩发发吖

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图)

获取元素方式

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

上一篇下一篇

猜你喜欢

热点阅读