JavaScript DOM

时间：2021-09-24 10:44:03 收藏：0 阅读：35

了解一下
- JavaScript 由 Netscpae 公司与 Sun 公司合作开发
- ECMA （欧洲计算机制造商协会）+ Netscape + Sun：ECMAScript （JavaScript就是ECMAScript）
- 微软：VBScript、JScript
- JavaScript 与 Java 没有任何联系
- JavaScript 曾用名：LiveScript
- BOM：浏览器对象模型，使用JavaScrip 来调整浏览器的一些属性，如浏览器窗口高度、宽度、位置等
- DOM：一套对文档的内容进行抽象和概念化的方法（可类比“世界对象模型”）
- 浏览器战争
- DHTML 动态HTML
- 关于API的理解
- 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 关键字
。。。。。跳过运算符、流程控制语句
可以把函数当成一种数据类型来使用
推荐的变量和函数名命名：变量的单词间用下划线分隔，函数名的各个单词首字母大写（驼峰法）
变量的作用域
对象
- 用户定义对象我们自己定义的对象
- 内建对象 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:"伪协议（应当避免使用）
渐近增强
分离JavaScript
向后兼容
- 对象检测—— if 语句判断浏览器是否支持JS的一些属性
- 浏览器嗅探
性能考虑
- 减少访问对DOM的访问，减少标记以减小DOM树的规模
- 能合并在一个脚本中写尽量合并，脚本在文档末尾，<body>之前通过<script>引入
- 压缩脚本：使用代码压缩工具把脚本中不必要的空格、注释等删掉
网页加载完毕时会触发一个onload事件
nodeName 返回的值都是大写字母
DOM Core 与 HTML-DOM
行为、结构、样式应尽可能地分离
一条建议的原则：如果想用JavaScript给某个网页添加一些行为，就不应该让JavaScript代码对这个网页的结构有任何的依赖
将多个函数绑定到onload上
document.write
innerHTML
DOM 提供了一个标记的非常详细的拓扑结构，像手术刀一样精细，而这个标记在 innerHTML 看来则比较粗糙，不关注细枝末节
在浏览器看来，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
CDN
如果觉得依赖CDN不保险，可以再提供一个后备<script>标签，这样即使CDN服务器出现问题也不会影响你的网站
多数库都采用的语法：连缀、迭代
很多库都将$()函数作为其选择器方法的简写

原文：https://www.cnblogs.com/zk-blog-2021-6-11/p/15167410.html