以前学js时做的笔记,其实也没写什么
DOMO事件处理程序 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" > <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>Document</title> </head> <body> <div id="div" > <button type="submit" id="btn" >提交</button> </div> <script> var dtn = document .getElementById("btn" ).onclick = function demo ( ) {alert("DOMO级事件处理程序" );} </script> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" > <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>Document</title> </head> <body> <div id="div" > <button type="submit" id="btn" >提交</button> </div> <script> var dtn = document .getElementById("btn" ).addEventListener("click" ,demo) var dtn = document .getElementById("btn" ).addEventListener("click" ,demo1) function demo ( ) { alert("DOMO2级事件处理程序" ); } function demo1 ( ) { alert("DOMO2事件处理程序" ); } document .getElementById("btn" ).removeEventListener("click" ,demo1) </script> </body> </html>
事件对象 在触发DOM事件的时候都会产生一个对象
1 2 3 4 5 6 事件对象event: 1.type:获取事件类型 2.target:获取事件目标 3.stopPropagation():阻止事件冒泡 4.preventDefault():阻止事件默认行为
DATE对象 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" > <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>Document</title> </head> <body onload="startTime()" > <script type="text/javascript" > function startTime ( ) { var d = new Date (); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); var t = setTimeout (function ( ) { startTime(); }, 500 ); m = checktime(m); s = checktime(s); document .getElementById("asd" ).innerHTML=h+":" +m+":" +s; } function checktime (i ) { if (i<10 ){ i = "0" +i; } return i; } </script> <div id="asd" ></div> </body> </html>
MATH对象
DOM对象控制HTML 1.方法:
getElementsByName() 获取name
getElementsByTagName() 获取元素
getAttribute() 获取元素属性
setAttribute() 设置元素属性
childNodes() 访问子节点
parentNode() 访问父节点
createElement() 创建元素节点
createTextNode() 创建文本节点
insertBefore() 插入节点
removeChild() 删除节点
offsetHeight() 网页尺寸
scrollHeight() 网页尺寸
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" > <title></title> </head> <body> <p name="pn" >Hello</p> <p name="pn" >Hello</p> <p name="pn" >Hello</p> <p name="pn" >Hello</p> <a id="aid" title="得到了A标签的属性" >Hello</a> <a id="aid2" >aid2</a> <ul> <li>1 </li> <li>2 </li> <li>3 </li> </ul> <div id="div" > <p id="pid" >div的p元素</p> </div> <script> function getName ( ) { var count = document .getElementsByTagName("p" ); alert(count.length); var p = count[0 ]; p.innerHTML = "World" ; } function getAttr ( ) { var anode = document .getElementById("aid" ); var attr = anode.getAttribute("title" ); alert(attr); } function setAttr ( ) { var anode = document .getElementById("aid2" ); anode.setAttribute("title" ,"动态设置a的title属性" ); var attr = anode.getAttribute("title" ); alert(attr); } function getChildNode ( ) { var childnode = document .getElementsByTagName("ul" )[0 ].childNodes; alert(childnode.length); alert(childnode[0 ].nodeType); alert(childnode[1 ].nodeType); } function getParentNode ( ) { var div = document .getElementById("pid" ); alert(div.parentNode.nodeName); } function createNode ( ) { var body = document .body; var input = document .createElement("input" ); input.type = "button" ; input.value = "按钮" ; body.appendChild(input); } function addNode ( ) { var div = document .getElementById("div" ); var node = document .getElementById("pid" ); var newNode = document .createElement("p" ); newNode.innerHTML = "动态添加第一个p元素" ; div.insertBefore(newNode,node); } function removeNode ( ) { var div = document .getElementById("div" ); var p = div.removeChild(div.childNodes[1 ]); } function getSize ( ) { var width = document .body.offsetWidth||document .documentElement.offsetWidth; var height = document .body.offsetHeight||document .documentElement.offsetHeight; alert(width+"," +height); } getSize(); </script> </body> </html>