JavaScript DOM

2022-03-15 19:44:27

  • 了解一下
    • JavaScript 由 Netscpae 公司与 Sun 公司合作开发
    • ECMA （欧洲计算机制造商协会）+ Netscape + Sun：ECMAScript         （JavaScript就是ECMAScript）
    • 微软：VBScript、JScript
    • JavaScript 与 Java 没有任何联系
    • JavaScript 曾用名：LiveScript
    • BOM：浏览器对象模型，使用JavaScrip 来调整浏览器的一些属性，如浏览器窗口高度、宽度、位置等
    • DOM：一套对文档的内容进行抽象和概念化的方法（可类比“世界对象模型”）
    • 浏览器战争
    • DHTML               动态HTMLJavaScript DOM
    • 关于API的理解JavaScript DOM
    • WaSP                       一个Web标准计划
    • WebKit                 Safari、Chrome采用的一个开源浏览器引擎
    • Gecko                  Firefox的核心，一个开源浏览器引擎
    • Trident                 IE的核心
    • Ajax                     异步数据传输技术
  • 关于 JavaScrip 代码，你有3种选择：
    • <head> 中的 <script> 之间
    • 把 JavaScrip 代码存为.js 文件，然后通过 <script> 的 src 属性引用
    • 最好把 <script> 标签放在HTML文档最后，<body> 之前，这样能使浏览器更快地加载
  • 脚本默认是 JavaScript ，没有必要在 <script> 中写 type 属性
  • 解释型语言（如JavaScript）中的错误只能等到解释器执行到有关代码时才能被发现
  • 英语是一种解释性语言，你相当于一个英语解释器
  • 建议在每条语句末尾添加一个分号以保持代码可读性
  • 注释（comment）:     
    • // ......
    • /*              ......                       */
  • JS允许直接使用变量，不用事先声明
  • 事先声明是一种良好的编程习惯
  • JS 区分字母大小写
  • 不允许变量名中包含空格和标点符号，可以包含"$"
  • 变量名不能以数字开头
  • 字面量
  • 关键字
  • 变量
  • JS是一种弱类型语言，不需要数据类型声明
  • 数据类型
    • 字符串
      • 单双引号都可
      • 必要时用反斜杠进行转义
    • 数值
      • 正、负
      • 整形、浮点
    • 布尔值
  • 数组
    • 用关键字 Array 声明
    • 直接方括号创建
    • 传统数组
    • 关联数组
  • JS中所有变量实际上都是对象
  • 对象
    • 关键字 Object 声明
    • 直接花括号创建
    • 属性，隶属于某个特定对象的变量
    • 方法，只有某个特定对象才能调用的函数
    • 属性和方法都使用“.”来访问
    • 创建实例使用 new 关键字
  • 。。。。。跳过运算符、流程控制语句
  • 可以把函数当成一种数据类型来使用
  • 推荐的变量和函数名命名：变量的单词间用下划线分隔，函数名的各个单词首字母大写（驼峰法）
  • 变量的作用域JavaScript DOM
  • 对象
    • 用户定义对象          我们自己定义的对象
    • 内建对象              JS预先定义好的对象
    • 宿主对象             运行环境提供
  • DOM
    • 一份文档就是一颗节点树
    • 节点
      • 元素节点
      • 属性节点
      • 文本节点
  • 获取元素节点的3种方法
    • getElementById()                          返回一个对象
    • getElementsByTagName()           返回一个对象数组
    • getElementsByClassName()             
  • 获取和设置属性
    • getAttribute()
    • setAttribute()
  • 事件处理函数
    • onmouseover
    • onmouseout
    • onclick                            鼠标点击触发，用Tab键移动到某个链接然后按下回车也会触发
    • onload
    • onkeypress                    按下任何一个键盘上任何一个键都会触发onkeypress事件（不建议使用）
  • 属性 childNodes 可以获取一个元素的所有子元素，返回一个数组
  • 属性 nodeType
    • 元素节点的 nodeType 的值是1
    • 属性节点的 nodeType 的值是2
    • 文本节点的 nodeType 的值是3
  • nodeValue
  • firstChild
  • lastChild
  • window.open()
  • 平稳退化（graceful degradation）：虽然某些功能无法使用，但最基本的操作仍能顺利完成
  • "javascript:"伪协议（应当避免使用）
  • 渐近增强
  • 分离JavaScriptJavaScript DOM
  • 向后兼容
    • 对象检测—— if 语句判断浏览器是否支持JS的一些属性
    • 浏览器嗅探
  • 性能考虑
    • 减少访问对DOM的访问，减少标记以减小DOM树的规模
    • 能合并在一个脚本中写尽量合并，脚本在文档末尾，<body>之前通过<script>引入
    • 压缩脚本：使用代码压缩工具把脚本中不必要的空格、注释等删掉 
  • 网页加载完毕时会触发一个onload事件JavaScript DOM
  • nodeName                              返回的值都是大写字母
  • DOM Core 与 HTML-DOMJavaScript DOM
  • 行为、结构、样式应尽可能地分离
  • 一条建议的原则：如果想用JavaScript给某个网页添加一些行为，就不应该让JavaScript代码对这个网页的结构有任何的依赖
  • 将多个函数绑定到onload上JavaScript DOM
  • document.write
  • innerHTML
  • DOM 提供了一个标记的非常详细的拓扑结构，像手术刀一样精细，而这个标记在 innerHTML 看来则比较粗糙，不关注细枝末节JavaScript DOMJavaScript DOM
  • 在浏览器看来，DOM 节点树才是文档
  • createElement()                    创建一个元素节点
  • appendChild()                       将一个节点添加到文档的节点树
  • createTextNode()                  创建一个文本节点
  • insertBefore()                        将一个新元素插入到一个现有元素的前面
  • parentNode
  • 并没有在现有元素之后插入一个新元素的“insertAfter()”
  • nextSibling                            下一个节点         
  • Ajax
    • 对页面的请求以异步方式发送到服务器，不必用整个页面来响应请求，响应时间更快了
    • 核心是 XMLHttpRequest 对象，通过这个对象，JavaScript 可以自己发送请求和处理响应，充当着浏览器中的脚本（客户端）和服务器之间的中间人的角色
    • 不同浏览器实现 XMLHttpRequest 对象的方式不同
    • XML HttpRequest 对象的 open 方法用来指定服务器上将要访问的文件，指定请求类型：GET、POST或SEND（第三个参数指定请求是否以异步方式发送和处理）
    • onreadystatechange 是一个事件处理函数，会在服务器给 XMLHttpRequest 对象送回响应的时候被触发执行，可以根据服务器的具体响应做相应的处理（给onreadystatechange 指定或引用一个函数，指定函数引用时，加括号表示立即调用该函数）
    • XML HttpRequest 对象的 send 方法发送请求
    • 服务器在向 XMLHttpRequest 对象发回响应时，该对象有许多属性可用，浏览器会在不同阶段更新 readyState 属性的值，readyState  属性有5个可能的值：
      • 0：未初始化
      • 1：正在加载
      • 2：加载完毕
      • 3：正在交互
      • 4：完成
    • readyState 属性的值变成4后，就可以访问服务器发送回来的数据了，通过2个属性来完成：
      • responseText              保存文本字符串形式的数据
      • responseXML             保存 Content-Type 头部中指定为"text/xml"的数据，是一个 DocumentFragment 对象
    • 使用 XMLHttpRequest 对象发送的请求只能访问与其 HTML 处于同一个域中的数据，不能向其他域发送请求
    • 有的浏览器会限制 Ajax 请求使用的协议
    • 异步请求的异步性：脚本在发送 XMLHttpRequest 请求后，仍然会继续执行，不会等待响应返回
  • Hijax
    • 借用hijack（劫持）一词的发音和含义，意为拦截用户操作触发的请求
    • “渐进增强地使用Ajax”
  • 首字母缩写词（acronym）例如：DOM（念成一个单词dom），对应标签 <acronym>
  • 缩略语(abbreviation)例如：D-O-M，对应标签 <abbr>
  • title 属性
  • HTML5 中，<acronym> 已被 <abbr> 代替
  • 就像可以使用我们自己的CSS样式表去取代浏览器的默认样式表一样，也可以使用DOM去改变浏览器的默认行为
  • 在编写DOM脚本时，应当尽可能地去检查nodeType的值，以确定当前节点的是元素节点还是文本节点或者属性节点
  • JavaScript只应用来充实文档的内容，要避免使用DOM技术来创建核心内容
  • DOM技术不仅可以用来改变网页的结构，还可以用来更新HTML 页面元素的 CSS 样式
  • 无论CSS样式属性的名字里有多少个连字符，DOM一律采用驼峰命名法表示它们，如DOM属性marginTopWidth对应着CSS属性margin-top-width
  • 通过 style 属性使用DOM只能返回内嵌样式
  • 使用DOM设置样式时，style对象的属性值必须放在单/双引号里
  • 何时用 DOM 脚本设置样式
    • 某些时候，CSS 无法根据元素之间的相对位置关系找出某个特定的元素
    • 一些 CSS 不能处理或难以部署的情况
    • 响应一些事件
  • CMS 内容管理系统
  • className 属性
    • 不直接使用DOM设置或修改样式，而是通过JavaScript代码去更新元素的class属性，通过CSS去设置样式
  • 对函数进行抽象：让你写的函数更加通用
  • setTimeout()
  • clearTimeout()
  • Math.ceil()
  • Math.floor()
  • Math.round()
  • addEventListener()
  • 在实际的开发中，不可能一页一页地编辑导航链接，常见的做法是通过服务器端包含技术，把包含导航标记的片段插入到每个页面中
  • 服务器端包含可以把重用标记块集中保存
  • 库可以把你从开发工作中解脱出来，让你更专注于更重要的细节，极大地提高工作效率，使用库之前先搞清楚哪个库适合自己的需要，几个有代表性的库：
    • jQuery
    • Prototype
    • The Yahoo User Interface Library（YUI）
    • Dojo Toolkit
    • MooTools
  • CDNJavaScript DOM
  • 如果觉得依赖CDN不保险，可以再提供一个后备<script>标签，这样即使CDN服务器出现问题也不会影响你的网站JavaScript DOM
  • 多数库都采用的语法：连缀、迭代
  • 很多库都将$()函数作为其选择器方法的简写

JavaScript DOM

上一篇：MySQL查询之limit耗时原理分析


下一篇：PS快速为透明矿泉水瓶完美修图及更换背景教程