标签：list idt history char article efault position 结构化 ati
略
BOM是浏览器对象模型，可以对浏览器窗口进行访问和操作。BOM是js和浏览器对话的工具。
1、window对象方法
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
2、History对象
History对象是window对象的一部分，可通过window.history属性来进行访问，它包含用户访问过的url
常用方法：
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。
3、Location对象
Location对象包含当前用户的url信息，是window对象的一部分，可通过window.location属性来访问
Location对象方法：
location.assign(URL) location.reload() location.replace(newURL)//注意与assign的区别
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
W3C DOM 标准被分为 3 个不同的部分：
1、DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
2、节点属性：
3、导航属性：
推荐的导航属性：
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：
页面查找：
4、HTML DOM Event事件
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。
事件绑定的两种方式：
1 第一种绑定方法 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 <input type="button" onclick="myevent()" value="点我"> 10 </body> 11 <script> 12 function myevent() { 13 alert("第一种绑定") 14 } 15 </script> 16 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" class="mytest" value="点我"> 9 </body> 10 <script> 11 var ele = document.getElementsByClassName("mytest")[0]; 12 ele.onclick=function () { 13 alert("第二种绑定方式"); 14 }; 15 </script> 16 </html>
onload:
onload 属性开发中只给body元素加。
这个属性的触发标志着页面内容呗加载完成。
应用场景：当我们希望页面加载完执行，那么我们可以使用该事件属性。
onsubmit：
是当表单在提交时触发，该属性也只能应用给form元素。
应用场景：在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form id="form"> 9 <input type="text"> 10 <input type="submit" value="提交"> 11 </form> 12 </body> 13 <script> 14 var ele = document.getElementById("form") 15 ele.onsubmit=function (e) { 16 alert("验证失败 表单不往后台发"); 17 e.preventDefault(); 18 } 19 </script> 20 </html>
Event对象
Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行。event对象在事件发生时系统已经创建好了，并且会在事件函数被调用时传给事件函数。我们获得仅仅需要接收一下即可。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 .outdiv{ 8 width: 300px; 9 height: 100px; 10 background-color: blueviolet; 11 } 12 .indiv{ 13 width: 50px; 14 height:50px; 15 background-color: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="outdiv"> 21 <div class="indiv"> 22 23 </div> 24 </div> 25 </body> 26 <script> 27 var ele= document.getElementsByClassName("indiv")[0] 28 var ele2 = document.getElementsByClassName("outdiv")[0] 29 ele.onclick=function (e) { 30 alert("内标签的事件") 31 e.stopPropagation(); 32 } 33 ele2.onclick=function () { 34 alert("外标签事件") 35 } 36 </script> 37 </html>
node的增删改
增：
createElement(name)创建元素
appendChild();元素添加
删：
先获得父标签，然后通过方法
removeChild()来删除
改：
第一种方式:
使用上面增和删结合完成修改
第二中方式:
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
5、修改HTML DOM
改变元素内容的最简答的方法是使用 innerHTML ，innerText。
document.getElementById("p2").style.color="blue"
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
createElement(name)
elementNode.removeChild(node)
elementNode.className
elementNode.classList.add
elementNode.classList.remove
1、模态对话框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模态对话框练习</title> 6 <style> 7 .total_window{ 8 width: 500px; 9 height: 500px; 10 background-color: aqua; 11 } 12 .hide_window{ 13 position: fixed; 14 top: 7px; 15 left: 7px; 16 width: 500px; 17 height: 500px; 18 background-color: coral; 19 opacity: 0.6; 20 } 21 .hide{ 22 display: none; 23 } 24 .child_window{ 25 float: left; 26 width: 150px; 27 height: 150px; 28 top: 50%; 29 left: 50%; 30 margin-left: 100px; 31 margin-top: 100px; 32 background-color: gold; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="total_window"> 38 <button onclick="window_show()">出现对话框</button> 39 </div> 40 <div class="hide_window hide"> 41 <div class="child_window"> 42 <button onclick="window_hide()">隐藏对话框</button> 43 </div> 44 45 </div> 46 47 </body> 48 <script> 49 var ele = document.getElementsByClassName("hide_window")[0] 50 function window_show() { 51 ele.classList.remove("hide") 52 } 53 function window_hide() { 54 ele.classList.add("hide") 55 } 56 </script> 57 </html>
2、全选反选
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button onclick="select_all()">全选</button> 9 <button onclick="select_cancel()">取消</button> 10 <button onclick="select_reverse()">反选</button> 11 12 <table border="1" id="Table"> 13 <tr> 14 <td><input type="checkbox"></td> 15 <td>111</td> 16 </tr> 17 <tr> 18 <td><input type="checkbox"></td> 19 <td>222</td> 20 </tr> 21 <tr> 22 <td><input type="checkbox"></td> 23 <td>333</td> 24 </tr> 25 <tr> 26 <td><input type="checkbox"></td> 27 <td>444</td> 28 </tr> 29 </table> 30 </body> 31 <script> 32 var eles = document.getElementById("Table") 33 var checkboxs = eles.getElementsByTagName("input") 34 function select_all() { 35 for (var i=0;i<checkboxs.length;i++){ 36 checkboxs[i].checked=true 37 } 38 } 39 function select_cancel() { 40 for (var i=0;i<checkboxs.length;i++){ 41 checkboxs[i].checked=false 42 } 43 } 44 function select_reverse() { 45 for (var i=0;i<checkboxs.length;i++){ 46 checkboxs[i].checked=!checkboxs[i].checked 47 } 48 } 49 </script> 50 </html>
http://www.cnblogs.com/yuanchenqi/articles/5980312.html
标签：list idt history char article efault position 结构化 ati
原文地址：http://www.cnblogs.com/xiaoqianghuihui/p/6902518.html
