JavaScript DOM编程 学习笔记
程序员文章站
2024-03-20 10:37:54
...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//整个HTML文档加载完成之后出发window.onload事件,事件出发后执行function函数体
window.onload = function() {
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
alert("Hello world!!!");
}
}
</script>
</head>
<body>
<button>click me</button>
<!-- HTML代码与JS代码耦合在一起 -->
<button onclick="alert('Hello world')">click</button>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>click me</button>
<!-- HTML代码与JS代码耦合在一起 -->
<button onclick="alert('Hello world')">click</button>
</body>
</html>
<script type="text/javascript">
//整个HTML文档加载完成之后才执行,此时才可以渠道btns
var btns = document.getElementsByTagName("button");
btns[0].onclick = function() {
alert("Hello world!!!");
}
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
alert("1");
//window.onload事件在HTML文档被完全加载后执行
//在其中可以获取到HTML文档的任何元素
window.onload = function(){
alert("3");
}
</script>
</head>
<body>
<button>click me</button>
<!-- HTML代码与JS代码耦合在一起 -->
<button onclick="alert('Hello world')">click</button>
</body>
</html>
<script type="text/javascript">
alert("2");
</script>
转载于:https://blog.51cto.com/shamrock/1564431