操作DOM

-------------

使用节点
   Document 文档节点 -- 返回值 9
   Element 标签(元素)节点 -- 返回值 1
   Attr 属性节点 -- 返回值 2
   Text 文本节点 -- 返回值 3
   Comment 注释节点 -- 返回值 8
   DocumentFragment 表示文档片段，轻量级Document对象，仅包含部分文档 -- 返回值 11

节点名称和值
nodeName 属性可以读取节点的名称
nodeValue 属性可以读取节点的值

访问节点
   ownerDocument 返回当前节点的根元素（document对象）
   parentNode 返回当前节点的父节点。所有的节点都仅有一个父节点
   childNodes 返回当前的所有子节点的节点列表
   firstChild 返回当前节点的首个子节点
   lastChild 返回当前节点的最后一个子节点
   nextSibling 返回当前节点之后相邻的同级节点
   previousSibling 返回当前节点之前相邻的同级节点
   nodeList 是一种类数组对象，用于保存一组有序的节点，用户可以通过下标位置来访问这些节点。
   Array.prototype.slice() 可以把nodeList转换为数组
   hasChildNodes() 当节点包含一或多个子节点时，该方法返回true，否则返回false

操作节点
   appendChild() 向节点的子节点列表的结尾添加新的子节点
   cloneNode() 复制节点
   hasChildNodes() 判断当前节点是否拥有子节点
   insertBefore() 在指定的子节点前插入新的节点
   normalize() 合并相邻的Text节点并删除空的Text节点
   removeChild() 删除（并返回）当前节点的指定子节点
   replaceChild() 用新节点替换一个子节点

----------------------------------

文档节点：
访问文档子节点
document.documentElement 该属性始终指向HTML页面中的html元素
document.body 使用它可以访问body元素

访问文档信息
   document.title 设置或返回<title>标签包含的文本信息
   document.lastModified 返回文档最后被修改的日期和时间
   document.URL 返回文档最后被修改的日期和时间
   document.domain 返回当前文档的域名
   document.referrer 返回链接到当前页面的那个页面的URL

访问文档元素
   document.getElementById() 返回指定id属性值的元素
   document.getElementByTagName() 返回所有指定标签名称的元素节点
   document.getElementByName() 返回所有指定名称（name属性值）的元素节点
   namedItem() 该方法可以通过元素的name特性取得集合中的项目

访问文档集合
   document.anchors 返回文档所有Anchor对象，即所有带name特性的<a>标签
   document.applets 返回文档中所有Applet对象，即所有<applet>标签，不再推荐使用
   document.forms 返回文档中所有Form对象
   document.images 返回文档中所有Image对象
   document.links 返回文档中所有Area和Link对象，即所有带href特性的<a>标签

使用HTML5 Document
   document.readyState =="complete" =="loading" 已加载完文档/正在加载文档
   document.compatMode =="CSS1Compat" =="BackCompat" 返回文档的渲染模式标准模式/怪异模式
   document.head 属性引用文档的head元素
   document.charset 表示文档中实际应用的字符集，也可以用来指定新字符串
   document.defaultCharset 表示根据默认浏览器及操作系统的设置，当前文档默认字符集应该是什么。

----------------------------------------

元素节点：
访问元素
document.getElementById() 用来获取文档中指定的元素
document.getElementByTagName() 可以获取指定标签名称的所有元素

HTML5新添加
   childElementCount 返回子元素的个数，不包括文本节点和注释
   firstElementChild 指向第一个子元素
   lastElementChild 指向最后一个元素
   preiousElementSibling 指向后一个相邻兄弟元素
   nextElementSibling 指向后一个相邻兄弟元素

创建元素
   document.createElement("tagName") 能够根据参数指定的标签名称创建一个新的元素
   document.body.appendChild(p) 增加段落元素到body元素下

复制节点
cloneNode() 可以创建一个节点的副本

插入节点
   appendChild 可向当前节点的子节点列表的末尾添加新的子节点
   insertBefore 可在已有的子节点前插入一个新的子节点
   document.createTextNode("") 创建文本节点
   document.getElementById("red") 获取id=红色的引用

删除节点
   removeChild() 方法可以从子节点列表中删除某个节点

替换节点
replaceChild(x，y) 方法可以将某个子节点替换为另一个把x替换为y

获取焦点元素
document.activeElement 属性可以引用DOM中当前获得了焦点的元素
document.hasFocus() 可以判断当前文档是否获得了焦点

检测包含节点
   contains() 是IE的私有方法，用来检测某个节点是不是另一个节点的后代。该方法接收一个参数，指定要检测的后代节点，如果被检测的节点是后代节点，则返回true，否则返回false
   compareDocumentPosition() 该方法也能确定节点间的关系，用法与contains（）方法相同
                             返回数值 1 2 4 8 16 32
------------------------------------------

文本节点：
访问文本节点
innerText == var text = div.firstChildValue;

创建文本节点
createTextNode() 可以创建文本节点
normalize() 如果找到了空文本节点,则删除它;如果找到了相邻文本节点,则将它们合并为一个文本节点

操作文本节点
   appendData(string) 将字符串string追加到文本节点的尾部
   deleteData(start,length) 从start下标位置开始删除length个字符
   insertData(start,string) 在start下标位置插入字符串string
   replaceData(start,length,string) 使用字符串string替换从start下标位置开始length个字符
   splitText(offset) 在offset下标位置把一个Text节点分割成两个节点
   substringData(start,length) 从start下标位置开始提取length个字符

读取HTML字符串
innerHTML 属性可以调用元素包含的所有子节点对应的HTML标记字符串

插入HTML字符串
innerHTML 根据传入HTML字符串，创建新的DOM片段，然后用这个DOM片段完全替换调用元素原有的所有子节点
insertAdjacentHTML() 包含两个参数，第一个参数设置插入位置，第二个参数传入要插入的HTML字符串

替换HTML字符串
outerHTML 在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签；
在写模式下，会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素

插入文本
innerText 在指定元素中插入文本内容，如果文本中包含HTML字符串，将被编码显示
outerText 与innerText功能类似，但是它能够覆盖原有的元素

-------------------------------------

文档片段节点：
................

--------------------

属性节点：
访问属性节点
document.createAttribute(name) 创建属性节点
divElement.attributes 当DOM加载后，它会自动生成一个关联集合，它以名值对形式检索这些属性

读取属性值
   getAttribute("red") 可以快速读取指定元素的属性值
   class == className for == htmlfor

设置属性值
   setAttribute() 可以设置元素的属性值

删除属性
removeAttribute()方法可以删除指定的属性

使用类选择器
   getElementsByClassName() 使用该方法可以选择指定类名的元素可以接收一个字符串参数，包含一个或多个类名，类名通过空格分隔，不分先后顺序，方法返回带有指定类的所有元素的NodeList

自定义属性
   data-前缀目的是为元素提供与渲染无关的附加信息，或者提供语义信息
   data-myid = "12345"
   data-myname = "zhangyicheng"
   data-mapass = "zhang123456"

--------------------------------------

操作Bom:

----------------

使用window对象：
访问浏览器窗口
   window 客户端JavaScript中的顶层对象。每当<body>或<framenset>标签出现时，Window对象就会被自动创建
   navigator 包含客户端有关浏览器的信息
   screen 包含客户端显示屏的信息
   history 包含浏览器窗口访问过的URL信息
   location 包含当前页面文档的URL信息
   document 包含整个HTML文档，可被用来访问文档内容，及其所有页面元素。

使用系统测试方法
   alert() 简单的提示对话框，由浏览器向用户弹出提示性信息
   comfirm() 简单的提示对话框，由浏览器向用户弹出提示性信息
   prompt() 弹出提示对话框，可以接收用户输入的信息，并把用户输入的信息返回

打开和关闭对话框
   window.open(URL,name,features,replace)
          URL:可选字符串，声明在新窗口中显示文档的URL
          name:可选字符串，声明新窗口的名称
          features:可选字符串，声明了新窗口要显示的标准浏览器的特征
          replace:可选的布尔值，规定了装载到窗口的URL是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中当前条目
   myWindow.opener.document.write(""); 在原窗口中输入提示信息
   window.close() 如果在打开窗口内部关闭自身窗口，则应该使用此方法
   window.closed() 属性可以检测当前窗口是否关闭，如果关闭则返回true,否则返回false

使用框架集
   <frameset>
   <noframe>
   <frames> 如果页面包含框架，则每个跨年都拥有自己的window对象，并且保存在frames集合中。在frames集合            中，可以通过数值索引（从0开始）从左到右、从上到下访问每个window对象，或者使用框架名称访            问每个window对象。

parent.frames[0].left(); 调用第一个框架中的函数left（）
parent.frames[2].document.body.style.backgroundColor = "red"; 改变第三个框架文档背景色为红色

控制窗口位置
   window.screenLeft 可以读取或设置窗口的位置，即相对于屏幕左边的位置
   window.screenTop 可以读取或设置窗口的位置，即相对于屏幕上边的位置
   moveTo(200,300) 可以将窗口精确地移动到一个新位置，接收的是新位置的x和y坐标值
   moveBy(-50,0) 可以将窗口精确地移动到一个新位置，接收的是在水平和垂直方向上移动的像素数

控制窗口大小
   innerWidth | innerHeight | outerWidth | outerHeight 这四个属性可以确定窗口大小
   document.documentElement.clientWidth 保存了页面视图的信息
   document.documentElement.clientHeight 保存了页面视图的信息
   resizeBy() | resizeTo() 他们可以按照相对数量和绝对数量调整窗口的大小。都包含两个参数，分别是x/y
   scrollBy() 会将窗口中显示的文档向左、向右或者向上、向下滚动指定数量的像素
   scrollTo() 会将文档滚动到一个绝对位置。它将移动文档以便在矿口文档区的左上角显示指定的文档坐标
   focus() 会将请求系统将键盘焦点赋予窗口
   blur() 则会放弃键盘焦点

使用定时器
   settInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式
   setTimeout() 在指定的毫秒数后调用函数或计算表达式
   clearInterval() 取消由setInterval()方法生成的定时器对象
   clearTimeout() 取消由setTimeout()方法生成的定时器对象

--------------------------------------

使用nvaigator对象
window.navigator 包含了浏览器的基本信息，如名称、版本和系统等

浏览器检测方法
   window.navigator.userAgent 该属性可以捕获客户端user-agent字符串信息
   user-agnet 字符串包含了Web浏览器的大量信息，如浏览器的名称和版本

检测浏览器类型和版本号
   navigator.userAgent.toLowerCase() 获取用户端信息

检测客户操作系统
   navigator.userAgent.indexOf("Win") != -1 如果是window系统，则返回true

检测插件
   hasPlugin("flash") 要检测的插件名
   ActiveXObject(name) 检测插件使用

----------------------------

----------------------------

使用history对象
   history 对象存储浏览器窗口的浏览历史，通过window对象的history属性可以访问该属性
   history.back() 返回前一个URL
   history.forword() 访问下一个URL
   history.go(m) 该方法比较灵活，它能够根据参数决定可访问的URL

------------------------

-----------------------

使用document对象
   document.anchors 返回文档中所有Anchor对象即所有带有name特性的<a>标签
   document.applets 返回文档中所有Applet对象即所有<applet>标签，不再推荐使用
   document.forms 返回文档中所有Form对象
   document.images 返回文档中所有Image对象
   document.links 返回文档中所有Area和link对象，即所有带herf特性的<a>标签
   document.write() 生成文档内容
   document.writeln() 生成文档内容并换行

事件基础：

-----------------

事件处理函数
   onsubmit 为form元素的onsubmit事件属性定义字符串脚本
   var e = e || window.event 兼容DOM事件模型和IE模型的event获取方式
   document.write(e.srcElement ? e.srcElement : e.target); 兼容DOM事件模型和IE模型的event属性

注册事件
   addEventListener(String type, Function listener, boolean useCapture)
           type:注册事件的类型名。事件类型与事件属性不同，事件类型名没有on前缀。
           listener:监听函数，即事件处理函数
           useCapture:是一个布尔值。true - 指定的事件处理函数将在事件传播的捕获阶段触发
                                    false - 事件处理函数将在冒泡阶段触发
   element.attachEvent(etype,eventName)
          etype:设置事件类型如：onclick onkeyup onmousemove
          eventName:设置事件名称，也就是事件处理器
   for-in → [for(var i in btn)] 使用for in语句遍历按钮集(btn)
   mouseover 移入 [name.addEventListener("mouseover", function, true)]
   mouseout 移出 [name.addEventListener("mouseout", function, true)]

销毁事件
   element.removeEventListener(String type, Function listener, boolean useCapture);
   element.detachEvent(etype, eventName) IE事件模型使用detachEvent()方法注销

使用event
event对象由事件自动创建，代表事件的状态，如事件发生的源节点，键盘按键的响应状态，鼠标指针的移动位置，鼠标按键的响应状态等信息。

-------------------------------------

使用鼠标事件
   click 单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上，并按回车键，同样会触发
   dblclick 双击鼠标左键时发生，如果右键也按下则不会发生
   mousedown 单击任意一个鼠标按钮时发生
   mouseout 鼠标指针位于某个元素上，且将要移出元素的边界时发生
   mouseover 鼠标指针移出某个元素，到另一个元素上发生
   mouseup 松开任意一个鼠标按钮时发生
   mousemove 鼠标在某个元素上持续发生

鼠标来源
   var o = e.target || e.srcElement target属性获取发生事件的节点元素，IE中则使用srcElement属性
   relatedTarget 属性获取当前事件对象的相关节点元素
   fromElement 获取mouseover事件中鼠标移到过的元素
   toElement 属性获取在mouseout事件中鼠标移到的文档元素
   var o = e.relatedTarget || e.fromElement
   var o = e.relatedTarget || e.toElement

鼠标按键
   mousedown - mouseup - click - mousedown - mouseup - click - dblclick
   IE事件模型 --- 1 - 左键 2 - 右键 4 - 中键    鼠标事件对应的button属性
   DOM事件模型 --- 0 - 左键 2 - 右键 1 - 中键    鼠标事件对应的button属性

---------------------------------

键盘响应顺序
keydown - keypress - keyup 对于字符键
keydown - keyup 对于非字符键

------------------------

使用页面事件
页面初始化
load 事件类型在页面完全加载完毕的时候触发。该事件包含所有的图形图像、外部文件（如CSS、JS文件等）的加载，也就是说，在页面所欲内容全部加载之前，任何DOM操作都不会发生。

结构初始化
   DOMContentLoaded 作为DOM标准事件，它是在DOM文档结构加载完毕的时候触发的，因此要比load事件类型先被触发。
   onreadystatechange = null; 使用Script对象的onreadystatechange方法尽心类似的readyState检查后及时调用载入事件（IE）
   defer 在写入的<script>标签中包含了defer属性，defer属性，defer表示“延期”的意思，使用defer属性可以让脚本在整个页面装载完成之后再解析，而非边加载边解析。
   setInterval() 可以周期性的检查document对象的readyState属性，随时监控文件是否加载完毕，如果完成则调用回调函数。（针对Safair浏览器）

页面卸载
window.onunload = f; 表示卸载的意思，这个事件在从当前浏览器窗口内移动文档的位置时触发。
window.onbeforeunload = function(e){} 与unload功能相近，如果返回字符串信息，那么该字符串会显示一个确认对话框中，询问用户是否离开当前页面。

窗口重置
resize事件类型是在浏览器窗口被重置时触发，如当用户调整窗口大小，或者最大、小化等，触发事件
scroll事件类型用于在浏览器窗口内移动文档的位置时触发，如通过键盘箭头键，翻页键或空格键移动文档位置，或者通过滚动条滚动文档位置。

错误处理
error window.onerror = function(message){...} 利用该事件可以捕获并处理错误信息

-----------------------------

使用UI事件
焦点处理
   UI 事件负责响应用户与页面元素的交互
   focus() 该方法用于设置表单字段为焦点
   blur() 该方法用于设置表单字段失去焦点

选择文本
select a.onselect = function(){} 在文本框或文本区域内选择文本时，将触发select事件字段值变化检测
change a.onchange = function(){...}事件类型是在表单元素的值发生变化时触发，它主要用于input | select | textarea 元素对于input和textarea元素来说，当它们失去焦点且value值改变时触发，对于select元素，在其选项改变时触发，也就是说不失去焦点，也会触发change事件。

提交表单
submit f.onsubmit = function(){..}单击提交后，会触发submit事件按回车键也会触发submit事件
event.preventDefault() 该方法可以阻止表单提交和验证文本框中是否输入字符

重置表单
reset 当单机重置按钮时，表单将被重置，所有表单字段恢复为初始值，这时会触发reset事件

剪贴板数据
   beforecopy 在发生复制操作前出发
   copy 在发生复制操作时触发
   beforecut 在发生剪切操作前触发
   cut 在发生剪切操作时触发
   beforepaste 在发生粘贴操作前触发
   paste 在发生粘贴操作时触发clipboardData 对象可以访问剪切板中的数据 getData(o):从剪切板中读取数据，包含一个参数，设置取得数据的格式    setData(o,o)：设置剪切板数据。包含两个参数 1-参数设置数据类型 2-要放在剪切板中的文本。

使用Ajax

--------------
Ajax基础
XMLHttpRequest 是JavaScript一个外挂组件，用来实现客户端与服务器端异步通信，所有Ajax应用都要借助该组件才能够实现。

XMLHttpRequest方法
   abort() 取消当前请求
   getAllRequestHeaders() 获取响应的所有Http头消息
   getResponseHeader() 从响应信息中获取指定的HTTP头
   open() 创建新的HTTP请求，并指定请求的方法，URL以及验证信息(用户名、密码)
   send() 发送HTTP请求到Web服务器并接收回应
   setRequestHeader() 单独指定请求的某个HTTP头消息
XMLHttpRequest属性
   onreadystatechange 指定当readyState属性改变时的事件处理句柄(回调函数)
   readyState 返回当前请求的状态
   responseBody 将回应信息正文以unsigned byte 数组形式返回
   responseStream 以ADO Stream对象的形式返回响应信息
   responseText 将响应消息作为字符串返回
   responseXML 将响应消息格式化为Xml Document对象并返回
   status 返回当前请求的http状态码
   status Text 返回当前请求的响应行状态
Http头部消息
请求：Http请求信息由3部分组成：请求行、消息报头、请求正文（可选）格式如下：
   <request -line>
   <headers>
   <blank line>
   [<request-body>]
   请求行以一个方法符号开头，以空格符分隔，后面跟着请求的URL和协议版本如下：
   Method Request-URL HTTP_Version CRLF
响应：HTTP响应也由3部分组成：状态行、消息报头、响应正文（可选）格式如下：
   <status-line>
   <headers>
   <blank line>
   [<response-body>]
   其中状态行格式如下 HTTP-Version Status-Code Reason-Phrase CRLF

常见状态码：
   200 OK //客户端请求成功
   400 Bad Request //客户端请求有语法错误，不能被服务器所理解
   401 Unauthorized //请求未经授权，这个状态码必须和WWW-Authenticate报头域一起使用
   403 Forbidden //服务器收到请求，但是拒绝提供服务
   404 Not Found //请求资源不存在，例如输入了错误的URL
   500 Internal Server Error //服务器发生不可预期的错误
   503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后，可以恢复正常

定义XMLHttpRequest对象
   （1）定义XMLHttprequest实例对象
   （2）调用XMLHttpRequest对象中的open（）方法打开服务器的URL地址
   （3）注册onreadystatechange事件处理函数，准备接收相应数据，并进行处理
   （4）调用XMLHttpRequest对象的send（）方法发送请求

建立XMLHttpRequest连接
   创建XMLHttpRequest对象之后，就可以使用该对象的open（）方法建立一个HTTP请求。用法如下：
   oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)
      strMethod:Http方法字符串，如POST GET等，大小写不敏感
      bstrUrl：请求的URL地址字符串，可以为绝对地址或相对地址
      varAsunc: 布尔值，可选参数，指定请求是否为异步方式，默认为true
      bstrUser: 可选参数，如果服务器需要验证，该参数指定用户名，如果未指定，当服务器需要验证时，会弹                 出验证窗口
      bstrPassword：可选参数，验证信息中的密码部分，如果用户名为空，则此值将被忽略
   建立连接之后，就可以使用send（）方法发送请求到服务器端，并接收服务器端的响应。send（）方法如下
    oXMLHttpRequest。send（VarBody）;
    参数varBody表示将通过该请求发送的数据，如果不传递信息，可以设置参数为null。
    该方法的同步或异步方式取决于open方法中的bAsync参数，如果bAsync = False，此方法将会等待请求完成或    者超时时才会返回，如果bAsync == True，此方法将立即返回
    使用XMLHttprequest对象的responseBody responseStream responseText responseXML 属性接收响应数据

发送GET请求
   xmlHttp.open("GET", url, false); 以GET方式打开请求连接
   xmlHttp.send(null); 发送请求
   encodeURLComponent() 编码
   decodeURLComponent() 解码

发送POST请求
   xmlHttp.open("post", url, false); 发送post请求
   setRequestHeader()方法设置请求消息的内容类型为application/x-www-form-urlencoded,它表示传递的是表                     单值，一般使用POST发送请求时都必须设置该选项，否则服务器无法识别传递过来的数据
   xmlhttp.setRequestHeader("Header-name", "value");
   setRequestHeader("User-Agent", "XMLHTTP");
   xmlhttp.setRequestHeader("Content-type" , "application/x-www-form-urlencoded");

转换串行化字符串
return .join("&"); 把xxx转换为串行化字符串，并返回

跟踪状态
xmlhttp.readyState 属性实时跟踪断异步交互状态。一旦当该属性发生变化时，就触发readystatechange事件，调用该事件绑定的回调函数。返回值为0/1/2/3/4

终止请求
xmlhttp.abort() 可以中止正在进行的异步请求

获取XML数据
   responseBody 将响应信息正文以Unsigned Byte 数组形式返回
   responseStream 以ADO Stream 对象的形式返回响应信息
   responseText 将响应信息作为字符串返回
   responseXML 将响应信息格式化为XML文档格式返回
   var x = createXMLHTTPObject(); 创建XMLHttpRequest对象
   x.onreadystatechange = function(){..}

获取HTML文本
   innerHTML 在客户端就可以直接使用innerHTML属性把获取的字符串插入到网页中

获取JavaScript脚本
   var o = eval("("+info+") + "()"); 调用eval()方法吧JavaScript字符串转换为本地脚本

获取JSON数据
通过XMLHttpRequest对象的responseText属性获取返回的JSON数据字符串，然后可以使用eval()方法将其解析为本地JavaScript对象，从该对象中再读取任何想要的信息。

获取头部信息
   getAllResponseHeaders() 获取响应的所有HTTP头信息
   getResponseHeader() 从响应信息中获取指定的HTTP头信息
   getResponseHeader("name" , "css8") 还可以使用它在发送请求中设置各种头部信息

JavaScript操作/Dom/Bom/Event/Ajax(基础笔记)

操作DOM

操作Bom:

事件基础：

使用Ajax

猜你喜欢