动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意思呢? 动态脚本指的就是页面中那些本来不存在,但是随着代码的执行插入页面的脚本 例如下面代码: var script = document.createElement("script"); script.type = "text/javascript"; script.…

动态样式 动态样式和昨天的动态脚本一样,都是一种动态引入外部样式(脚本的方式) 由于样式是由 link 元素引入的,所以动态样式自然也就是动态生成link元素插入文档的方式 不过和动态脚本不同的是,动态样式也就是link 只有插入到 head 中才能保持样式的一致性 代码如下: var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css&…

选择框脚本 选择框由<option>和<select>元素创建,为了方便选择框的交互,除了提供表单字段的公有方法之外 HTMLSelectElement 类型还提供下列特有的属性和方法: add(newOption, relOption) : 向控件中插入新的 option 位于 relOption 之前 multiple : 布尔值,表示空间是否允许多选,多选 type 值为 select-multiple 否则为 select-one options : 所有 option 的…

操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就做一个简要地记录 我们知道 HTML  中表格由许多元素构成 所以为了方便我们的操作DOM为我们提供了一些属性和方法,以便我们更方便地构建一个表格 <table>元素 有以下方法及属性: caption:保存对<caption>的引用 tBodies:<tbody>元素的…

提交表单 用户单击提交按钮或图像按钮时,就会提交表单.使用<input>和<button>都可以定义提交按钮,只要将其type特性的值设置为"submit"即可,而图像按钮则是通过将<input>的type特性设置为"image"来定义. <input type="submit" vlaue="Submit Form"> --通用提交按钮 <button type=&quo…

日常更新~~ 变量 所有的编程语言中,变量都是赋予语言灵活性的根本所在. 那么JS中的变量又有那些与众不同的地方呢.? 按照ECMA-262的定义,JS的变量和其他编程语言的变量有很大的区别 其松散类型的本质,决定了JS中的变量只是在某个特定的时期,用于保存特定值的一个名字 变量保存的值及其类型可以在脚本的生命周期内进行改变,这也是JS强大又让人难受的关键. 基本类型的值和引用类型的值 首先,在许多编程语言中几乎都有基本类型和引用类型这两个概念. 通常来说,对于基本类型的值变量保存的是值本身.…

WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 "webgl" 如果浏览器不支持,那么在获取webgl上下文的时候浏览器会返回 null 所以在使用前需要检测返回值 基本的获取 WebGL 代码如下: let drawing = document.getElementById("drawing"); // 检测浏览器…

此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) ECMAScript说白了是定义Javascript的标准,而这种标准与浏览器并无依赖关系. 我们现在前端所使用的Javascript只是遵循这一标准的,以浏览器为宿主平台的脚本语言. 遵循这一标准的脚本语言都可以称之为js. 而js的宿主平台除了我们最常用的浏览器平台之外,还有node,和Adobe…

表单字段 表单作为web应用中不可或缺的一部分,当然也是可以使用原生的 DOM 元素来访问的 除了标准的访问方式之外,每个表单都拥有一个 elements 属性,该属性保存着该表单所有 表单元素 的集合,该集合是一个有序列表,包含着所有的表单字段 这些元素在该集合中出现的顺序,与在文档中出现的顺序一致 在该集合中可以使用 name 和 在文档中的顺序 来对其中的元素进行索引 若有多个表单元素拥有相同的 Name,那么将会返回一个 nodelist 集合 以下方的HTML代码片段为例: <form…

Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 nodeType:1 nodeName:元素标签名 nodeValue:null parentNode:Document.Element tagName:用于访问元素的标签名(为了清晰,返回的值都是大写的标签名,在进行比较时需注意转换) HTML元素 Html 元素都使用 HTMLElement…

DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上就是三种规范,只要是实现了这三种规范,那么这个语言就可以说是JS DOM(文档对象模型)也是一种规范,是针对HTML和XML文档的API(应用程序编程接口) DOM的功能主要是用于将文档解析为一个层次化的节点树,通过DOM提供的API让开发人员能够操作这棵节点树 用于对文档内容进行操作(增.删.改.…

JS中对象相关的最重要的恐怕就是原型链了 原型链也是JS中对象继承的实现的基础 接昨天的文章,我们使用构造函数创建对象的时候仍然存在一些问题 那就是所有的实例没法共用一个函数 这样无疑会造成极大的内存浪费 那么解决的办法是什么呢? 那就是通过对象的原型来实现 原型链 在JS中我们创建的每一个函数都有一个 prototype(原型)属性 该属性是一个指针指向一个对象,这个对象的用途是包含由特定类型所有实例的共享属性和方法 这个对象也就是我们常说的原型对象 原型链就是对象实例和对象的原型对象组成的继…

今天主要讲一下,JS底层的一些东西,这些东西不太好举例(应该是我水平不够) 望大家多多海涵,比心心 执行环境 执行环境(执行上下文,全文使用执行环境 )是JS中最为重要的一个概念,执行环境决定了,变量或函数有权访问的其他数据,并决定了其各自行为. 跟执行环境直接相关的是变量对象 JS在执行环境中定义的所有变量和函数都保存在该对象上. 对于该对象,我们无法使用代码来进行访问,但是JS解析器在进行数据处理时会在后台对该变量对象进行访问. 全局执行环境 全局执行环境是JS代码的最外围的执行环境,在JS…

前几天有事耽搁了,今天继续更新 今天的主要内容是JS中的函数 这一篇主要讲函数的定义等内容,至于变量提升.执行环境.闭包.内存回收等内容在后面讲,高玩们可以不用看下面的正文了. 函数 首先来讲,函数对于任何编程语言都是一个十分核心的概念. Js中的函数通过function关键字来声明函数,函数用于封装任意多条语句,可以让我们用函数来来实现某一特定功能,避免编写重复的代码. 使用方法如下: function 函数名(参数){ // 要执行的代码块 } 跟其他语言中的函数相比JS中的函数存在以下特征…

前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西. 那么这一篇,我们可以正式进入JS的世界了,emmm 前面的东西应该比较基础,大佬们不喜勿喷. 首先学习一门语言,最开始不出意外的话应该是先了解这门语言由什么类型的数据组成,毕竟语言都是建立在这些数据类型的基础之上的. 在介绍数据类型之前,我先大概说一下 typeof 操作符,这是JS中判断一个变…

继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感:变量.函数名.操作符都是大小写敏感的,比如“text”和“Text”不同. 标识符: 第一个字符必须是字母.下划线或者美元符号($); 之后的字符可以是字母.下划线.美元符号或者数字. 标识符中的字母可以是ASCII和Unicode字母比如À and Æ,但是不推荐这样使用. 按照惯例,ECMASc…

错误 Javascript与WebGL之间的一个最大区别在于,WebGL的操作一般不会抛出错误 如果希望获取WebGL的错误信息,那么就需要手动调用  gl.getError() 方法 该方法会返回以下错误常量之一: gl.NO_ERROR: 上一次操作没有发生错误 gl.INVALID_ENUM: 应该给WebGL方法传入常量但是传错了参数 gl.INVALID_VALUE: 在需要无符号数的地方传入了负值 gl.INVALID_OPERATION: 在当前状态下不能完成操作 gl.OUT_O…

类型化视图 类型化视图一般也被认为是一种类型化数组. 因为其元素必须是某种特定的数据类型,类型化视图都继承自 Dataview Int8Array: 表示8位二补整数(即二进制补数) Uint8Array: 8位无符号整数 Int16Array: 16位二补数 Uint16Array: 16位无符号整数 Float32Array: 32位IEEE浮点值 Float64Array: 64位IEEE浮点值 与上面同名的构造函数都支持三个参数: ArrayBuffer 字节偏移量 字节长度 返回一个类…

事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事件,也就有了事件流的概念 事件流故名思意:也就是事件的流向,所以事件流描述的是从页面中接收事件的顺序 虽然事件流描述的都是事件的流向,但是事件流在当时的两个最大的浏览器厂商的提出中却是两个差不多完全相反的事件流概念 一是IE的冒泡事件流,二是Netscape的捕获事件流 事件冒泡 即事件开始时由最具…

文本框脚本 在HTML中文本框有两种实现方式: <input> <textarea> 这两种实现方式虽然在多数情况下表现一致,但是两者之间仍存在许多重要区别 对于<input>来说,如果需要展现一个文本框则需要将 type 特性设置为“text” 通过设置其 size 特性可以指定文本框中能够显示的最大字符数 通过 value 特性则可以设置文本框的初始值 通过设置 maxlength 特性可以设置文本框接收的最大字符数 <input type="tex…

键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydown:当用户按下键盘上的任意键时触发,按住不放会重复触发 keypress:用户按下键盘上的字符键时触发,按住不放重复触发(按下ESC键也会触发) keyup:用户释放按键触发 所有元素都支持上述三个事件,但只有用户通过文本文本框输入文本时比较常用 文本事件只有一个就是 textInput 事件 该…

事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同名的HTML特性来指定 这个特性的值应该是能够执行的script代码 如: <input type="button" value="click me" onclick="alert('clicked')"/> 此外也可以直接调用在文档其它…

虽然IE9支持了DOM范围,但是IE8及更早版本并不支持DOM范围 所以IE8以下的更早版本的IE提出了与之类似的概念以供大家使用 也就是 文本范围 var range = document.body.createTextRange(); 文本范围是IE专有的特性,了解就好 范围的简单选择 实现范围选择的最简单方式就是使用范围的 findText()方法 该方法会找到第一次出现的给定文本,并将范围环绕该文本 若没有找到文本则返回 false,找到则返回 true 同样以下方的HTML代码为例:…

遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测浏览器对于该功能的实现可以使用以下代码 var supportTraversals = document.implementation.hasFeature("Traversal","2.0"); var supportsNodeIterator = (typeof d…

DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3的背景来历 首先DOM1级主要定义的是HTML和XML文档底层的结构,DOM2和DOM3两个级别则主要致力于为文档引入更加丰富的交互能力 与此同时这两个版本也支持了更加高级的XML特性 首先DOM2分为了许多模块 如下所示: 1. DOM2级核心 2.DOM2级视图 3.DOM2级事件 4.DOM2…

选择符API 在DOM1中DOM只提供了 getElementById.getElementsByTagName 两种获取文档元素的方法 很多时候这两种方法往往不能较为方便地获取我们所需要的元素 所以在后续的ECMA标准中添加了另外一些获取文档中元素的方法 其中较为常用的应该就是选择符API了 什么是选择符API呢? 就是通过选择符来进行元素的选择,在这种元素选择方式成为公有标准之前,我们只能使用一些JS库来完成通过CSS选择符来获取我们所要获取的元素这一工作,比如Jquery 虽然这些JS的开…

CDATASection类型 CDATASection类型是只针对XML文档的类型 因为浏览器无法解析 在浏览器中创建CDATASection的函数也无法正常使用 该类型有以下属性 nodeType:4 nodeName:“#data-section” nodeValue:cdata中的内容 parentNode:Element或Document 不支持子节点 由于浏览器不能解析,所以这里不过多地去讲 DocumentType DocumentType也是一种比较少用的DOM类型 该类型包含着与…

Text类型 html页面中的纯文本内容就属于Text类型 纯文本内容可以包含转义后的html字符,但不能包括 html 代码 text类型具有以下属性.方法 nodeType:3 nodeName:'#text' nodeValue:值为节点所包含的文本节点 parentNode:Element节点 childNodes:不支持子节点 data:值与nodeValue一致 length:保存节点中的文字数目与data.value.nodeValue.length一致 appendData(te…

Documet类型 了解了基础的Node类型过后,我们来聊聊Node中的Document类型 我们知道所有的节点都继承自Node类型 所以除了Node类型公有的方法和类型之外,Document类型还有一些自己的特性 JS通过Document类型来表示文档 在浏览器中 document 对象是 HTMLDocument 的一个实例(继承自Document类型) 表示整个 HTML 页面,且 document 对象是 window 对象的一个属性所以可以作为全局对象访问 具有以下特征: 1.node…

ECMAScript是JS的核心 但是对于在浏览器中运行的JS,BOM显然才是真正的核心 我们知道JS是由三个部分组成的 BOM.DOM.ECMAScript 之前的文章我们主要介绍的是ECMAScript 也就是JS的核心语法 但是JS作为一种脚本语言,其创建的初衷不就是为了控制浏览器中的页面的表现形势嘛 所以JS与浏览器的交互由什么控制呢? 当然就是我们的BOM了(浏览器对象模型) BOM提供了一系列的对象用于访问浏览器的功能,由于各个厂商会按照各自的想法去拓展它 所以只有其中的一部分被标准…