一、事件处理
事件是用户操作html元素的过程,html元素有很多事件,当用户触发了某个事件时,就会执行事件中的javascript 代码
<html lang="en">
<head>
<title>Document</title>
<script>
function btnonclick(){
alert('点击了按钮');
}
function btnonmouseover(){
alert('鼠标悬停在按钮上了');
}
</script>
</head>
<body>
<input type="button" value="确定" onclick="btnonclick();" onmouseover="btnonmouseover();">
<!--二者有冲突-->
</body>
</html>
二、DOM编程
DOM是Document Object Model 文档对象模型。是一种对文档处理的编程思路,也是一种编程接口,提供了一些 API方法对文档进行处理。
DOM把整个的html文档当成了一个对象树结构,实质浏览器在运行html代码时,也是将html中所有的元素、属 性、文本创建在一个对象树中,可以操作对象树上的任何对象、对象的属性、对象的文本等。
DOM是一个编程接口,提供了一些API方法,而javascript就是实现了DOM编程接口的一种语言
常用的API方法包括:
1. document.getElementById("id值") : 通过id获得一个对象
<html lang="en">
<head>
<title>点击按钮交换两个输入框中的值</title>
<script>
function btnonclick(){
var t1 = document.getElementById("text1");
var t2 = document.getElementById("text2");
//所有元素的value属性值 默认都是字符串类型
var temp = t1.value;
t1.value = t2.value;
t2.value = temp;
parseInt(t1.value)
}
</script>
</head>
<body>
<input type="text" id="text1"><input type="text" id="text2" >
<input type="button" value="交换输入框的值" onclick="btnonclick();" >
</body>
</html>
2. document.getElementsByName("name值") :通过名字获得一些对象,应为名字可以重复,这个函数获得 的是数组,数组里存储着通过名字获得的那些对象。
<html lang="en">
<head>
<title>Document</title>
<script>
function btnonclick(){
//通过名字获得输入框对象 数组
var texts = document.getElementsByName("text");
for(var i = 0;i<texts.length;i++){
alert(texts[i].value);
}
}
</script>
</head>
<body>
<input type="text" name="text">
<input type="text" name="text">
<input type="text" name="text">
<input type="text" name="text">
<input type="button" value="获取值" onclick="btnonclick();" >
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<script>
function btnonclick(){
//通过名字获得多选框对象 数组
var texts = document.getElementsByName("text");
//那些checkbox选中了
for(var i = 0;i<texts.length;i++){
//alert(texts[i].checked);
//texts[i].checked = !texts[i].checked;
}
}
</script>
</head>
<body>
<input type="checkbox" name="text">
<input type="checkbox" name="text">
<input type="checkbox" name="text">
<input type="checkbox" name="text">
<input type="button" value="获取值" onclick="btnonclick();" >
</body>
</html>
3. document.getElementsByTagName("元素标记名") :通过一个标记名获得一些元素
<html lang="en">
<head>
<title>Document</title>
<script>
function btnonclick(){
//通过名字获得输入框对象 数组
var texts = document.getElementsByTagName("input");
for(var i = 0;i<texts.length;i++){
alert(texts[i].value);
}
}
</script>
</head>
<body>
<input type="text" name="text">
<input type="text" name="text">
<input type="text" name="text">
<input type="text" name="text">
<input type="button" value="获取值" onclick="btnonclick();" >
</body>
</html>
4. document.write("html代码") : 将一段html 写入到body中
5. 节点对象.parentNode属性: 获得节点对象的父节点对象
6. 节点对象.childNodes : 获得装有子节点的数组 document.getElementById示例