安小琪's blog

少年有梦,不应止于心动

JavaScript

以前学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对象

1
例: Math.round(2.5)    //得到3  把数四舍五入为最接近的整数。

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>