js基础2
什么是DOM?
DOM:文档对象模型(Document Object Model),又称为文档树模型。是一套操作HTML文档的API。
什么是文档对象模型?
DOM将html文档看成了一个对象,html文档中的所有内容都封装成了一个一个的对象。
因此我们学习DOM就是学习这些对象的属性和方法。
所有的内容:标签、属性、文本、注释,这些都被封装成了对象
什么是API?
api就是工具,做不同的事情需要不同的工具(api)
DOM:用来操作页面元素的一套API。BOM:用来操作浏览器一些行为的一套API。
DOM中的相关概念
文档:DOM会把整个html文档看成了一个对象,这个对象就document。
节点(Node):DOM会把页面中所有的内容都看成对象,我们把这些称为节点(节点都是对象)
节点有哪些?
标签节点、文本节点、属性节点、注释节点
元素(element):标签节点通常被称为元素,因为我们一般来说操作的都是元素(元素都是节点)
节点的层级关系:
父节点、子节点、兄弟节点
DOM可以做什么?
找对象、设置元素的属性、绑定事件、设置元素的样式、动态创建元素
console.log(cat);//第一次是以标签的形式展现的,刷新后按对象的形式展现
console.dir(cat);//直接以对象的形式展示出来。
修改DOM对象的属性: cat.src = "images/tiget.jpg";
在DOM中,script标签不能写到head标签里面,因为这个时候,页面还没有加载,
会出现获取不到页面中的元素的情况,因此我们一般会把script标签写到<./body>的上面
什么是事件?
事件就是文档或者窗口的一个特定的交互瞬间
事件的三要素:
事件源、事件名称、事件处理程序
标签自定义属性,无法通过DOM对象的属性来获取(在IE678中是可以获取得到的)。 想要获取标签的自定义属性,应该使用getAttribute方法
节点的属性
element.getAttributeNode("id");//获取到的是属性节点
nodeType:节点类型
1=元素节点 2=属性节点 3=文本节点
nodeName:节点名称
元素节点:标签的名称 文本节点:#text 属性节点:属性名称
nodeValue:节点的值
元素节点:null 文本节点:文本内容 属性节点:属性值
节点的层次
childNodes 子节点(包括元素节点和其他很多类型的节点)
children 子元素 (虽然不是DOM标准中的方法,但没有兼容性)
nextSibling 下一个兄弟节点
nextElementSibling 下一个兄弟元素 有兼容性问题
previousSibling 上一个兄弟节点
previousElementSibling 上一个兄弟元素 有兼容性问题
firstChild 第一个节点
firstElementChild 第一个子元素 有兼容性问题
lastChild 最后一个节点
lastElementChild 最后一个子元素 有兼容性问题
parentNode 父节点 没有兼容性问题
什么时候用style,什么时候用class?
如果某一个样式,一直都在变化,需要用style(动画)
如果需要设置的样式比较多的时候,用class
如果只需要设置一个样式,用style方便一点
使用class写的代码会比style更加好维护一点
克隆元素
cloneNode() 默认是浅复制,只会复制标签,不会复制内容
cloneNode(true) 深度复制,会复制标签和内容
cloneNode 只会在内存里面复制,并没有添加到DOM树上
预解析
预解析:js解释器在执行js代码的时候会有一个预解析的过程。它首先会把变量
和函数的声明提升到当前作用域的顶部,然后再开始执行代码。
作用域与作用域链
全局作用域:js编程环境的顶级对象是window对象的范围,被称为全局作用域,全局作用域
中的定义变量称为全局变量(函数外面)。
函数作用域:js的作用域是函数级的,在函数的代码块中被称为函数作用域,在函数作用域中
定义的变量被称为局部变量。函数在调用结束时,该函数作用域会被销毁,里面的所有局部变量也会被销毁。
js的函数可以嵌套,多个函数之间的层层嵌套构成了多个作用域的层层嵌套,被称为作用域链。 js作用域链的访问规则:如果当前作用域存在要访问的变量,则使用当前作用域的变量,否则到上一层的 作用域内进行寻找,直到全局作用域,如果找不到,则该变量未声明。
js函数内的变量无法在函数外面访问,但是可以在函数内部访问函数外的变量。 没有块级作用域
高阶函数
递归函数:函数自身调用自身(要有出口)
`function getFibonacci(n){
if(n == 1 || n == 2){
return 1;
}
return getFibonacci(n-2)+getFibonacci(n-1);
}
console.log(getFibonacci(12));`
回调函数:函数也是一种数据类型,因此函数也能当成参数进行传递
数据存储
简单数据类型:
Number、String、Boolean、Undefined、Null
复杂(引用)数据类型
Object、Array、Date、Math、自定义对象等
内存划分:
栈:内存比较小,但是运算速度很快
堆:内存比较大,但是运算速度相对较慢
数据存储:
基本(简单)类型,保存在栈里面。因为基本数据类型占用内存小。
引用(复杂)类型,保存在堆里面。因为占用内存比较多,因此,但是对象的引用保存在栈里面。
对于基本数据类型,复制的时候会把值复制一份给另一个变量,这个时候,两个变量num1和num2有了各自的值。互不干扰。
引用类型在复制的时候,仅仅会复制一份引用,但是两个引用指向的还是同一个对象,任何一个引用改变,
都会影响到对象。(来啊,互相伤害呀!)
使用基本类型作为参数的时候,形参的改变是不会影响实参的。
当参数是引用类型的时候,形参对对象做的改变,也影响到了实参,因为形参和实参指向的是同一个对象。
js基础2的更多相关文章
- js 基础篇(点击事件轮播图的实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- js 基础
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
- js基础练习二之简易日历
今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- JS基础(超级简单)
1 JS基础(超级简单) 1.1 数据类型 1.1.1 基本类型: 1) Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2) ...
- Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
- js基础到精通全面教程--JS教程
适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...
- JS基础知识总结
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
- js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...
- js基础知识总结(2016.11.1)
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
随机推荐
- ServiceStack.Redis订阅发布服务的调用(Z)
1.Redis订阅发布介绍Redis订阅发布是一种消息通信模式:发布者(publisher)发送消息,订阅者(Subscriber)接受消息.类似于设计模式中的观察者模式.发布者和订阅者之间使用频 ...
- Linux下安装流量监控工具iftop
在Linux系统中,top命令可以查看系统资源包括内存,CPU占用信息,查看和探测网络状态可以使用netstat,nmap等工具,实时流量监控可以使用iftop,下面是在CentOS7系列系统上安装i ...
- strsep和strtok_r替代strtok
char *strtok(char *str, const char *delim) 会修改数据源.外部加锁才线程安全(strtok执行结束再解锁执行另一个strtok循环知道工作完成) 主要是以互斥 ...
- OC与Swift单例
OC: +(instancetype)shareNetworkTools{ static id instance; static dispatch_once_t onceToken; //onceTo ...
- 多功能弹窗控件layer
开发网站的时候,如何合理运用好各种插件对开发的帮助是很大的. 免去了我们调试各种交互效果, 比如常用的弹窗.气泡.提示.加载.焦点.标签.导航.折叠等等 这里会推荐几个常用的js插件,丰富多样简单易移 ...
- 如何利用rem在移动端不同设备上让字体自适应大小
本人也是一个刚刚接触前端的小虾米,对于移动端这一块更是一抹眼的黑,前端时间接手开始一个移动端的项目,在网上查询了一下rem的作用,百度搜索下来全是介绍rem的作用原理的(rem是根据根元素计算的),然 ...
- svn上传工程之后下载,打开下载之后的工程缺少文件
当我们把iOS的工程上传到SVN中,当我们再从SVN中下载下来,就会出现错误,这是什么原因呢?我这里出现的错误是找不到文件,后来知道原来是被屏蔽掉了,就是上传的时候不上传某个类型的文件.例如我出错就是 ...
- Linux 相关面经
都说没用过Linux都不要说自己搞过开发.我因为项目就是Linux没办法才接触Linux的,不过用了一段时间大黑屏外人看不懂的样子感觉还是屌屌的,虽说用过但知道也仅限于权限内的一些知识,还是一起看下面 ...
- myeclipse maven 安装
myeclipse 上安装 Maven3 环境准备: JDK 1.6.45 Maven 3.0.5 myeclipse 8.5 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Ma ...
- 手把手教你玩转nginx负载均衡(五)----配置后端服务器组
引言 在前面几篇中,我们成功的搭建起了一台nginx服务器,所以我们要重复前面的步骤,把服务器的数量增加到3台以上,我这里已经建好了另外两台,分别是centos7-22,centos7-23,对应的i ...