美文网首页web前端自学之路
web前端 -- Day17 js基础

web前端 -- Day17 js基础

作者: 韩发发吖 | 来源:发表于2019-03-11 14:26 被阅读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

相关文章

  • web前端 -- Day17 js基础

    javaScript分三个部分 ECMAScript标准:js的基本语法DOM:Document Object M...

  • 前端JavaScript面试技巧

    1-1 课程概述 要做什么?——讲解前端 JS 基础面试题 哪些部分?——JS 基础,JS-WEB-API,JS ...

  • 技术文章地址

    Web前端开发CSS、JS 廖雪峰的JS教程 JQuery基础 前端工程师必备的PS技能—切图篇 前端入门方法 A...

  • web前端--JS基础

    一、基础 0、代码规范 变量名推荐使用驼峰法来命名(camelCase)通常运算符 ( = + - * / ) 前...

  • web前端--js基础

    前端基本功--js第一天 1.1变量 变量的命名规则! 1.变量命名必须以字母或是下标符号”_”或者”$”为开头。...

  • web前端面试之js基础(码动未来)

    web前端面试之js基础(码动未来) 3.1.1、介绍js的基本数据类型 Undefined、Null、Boole...

  • 无标题文章

    #Web前端 - web前端是什么 - 定义 - 职责 - web前端基础知识和学习路线 - web前端学习的...

  • Web前端

    Web前端 web前端是什么- 定义 职责 web前端基础知识和学习路线 web前端学习的资源 1.Web前端是...

  • 用Docker简化Nodejs开发2——开发环境到测试环境

    Web应用通常由多个部分组成,包括:前端、后端和基础中间件。前端代码是静态的(html+js),可以放在nginx...

  • 好程序员web前端教程分享JS基础知识

    好程序员web前端教程分享JS基础知识,为大家分享一篇关于JS的基础知识。 1、执行环境:有时也叫环境,是Java...

网友评论

    本文标题:web前端 -- Day17 js基础

    本文链接:https://www.haomeiwen.com/subject/uixbpqtx.html