在JavaWeb中, 常见的JS语法与Java大同小异.
我在这里主要总结一下JavaScript有关DOM操作和其内置对象的用法.
1. DOM
DOM(Document Object Model): 文档对象模型, 是JS动态操作HTML标签的依据.
a) 元素节点的获取
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
示例代码:
<!DOCTYPE html>
<html>
<head>
<title>dom1.html</title>
<meta charset="UTF-8">
</head>
<body>
用户名:<input type="text" name = "username" id="userid"/>
<br/>
性别:<input type="radio" name="sex" value="male"/> 男
<input type = "radio" name="sex" value="female"/>女
<button>点击</button>
<script type="text/javascript">
// var nameInput = document.getElementById("userid"); // 根据id获取元素节点
// nameInput.type = "checkbox"; // 将文本框变成复选框
// alert(nameInput.name);
// //根据标签名来获取元素节点, 得到的是一个对象数组
// var inputArr = document.getElementsByTagName("input");
// alert(inputArr[1].value);
document.getElementsByTagName("button")[0].onclick = function() {
alert("按钮被点击了");
}
//根据name属性值来获取
var arr = document.getElementsByName("sex");
for(var i = 0; i < arr.length;i++){
alert(arr[i].value);
}
</script>
</body>
</html>
b) 动态增加内容
如在<ul>标签下动态地增加一个<li>标签:
<!DOCTYPE html>
<html>
<head>
<title>dom2.html</title>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>狗娃</li>
<li>狗剩</li>
<li>铁蛋</li>
</ul>
<input type = "button" value="点击领取翠花" onclick="add()"/>
<script type="text/javascript">
function add(){
//添加翠花
//创建li元素节点
var liElement = document.createElement("li");
//创建 “翠花” 文本节点
var textNode = document.createTextNode("翠花");
//将文本节点添加到元素节点: 父节点.appendChild(子节点)
liElement.appendChild(textNode);
//获取ul元素节点
var ulElement = document.getElementsByTagName("ul")[0];
ulElement.appendChild(liElement);
}
</script>
</body>
</html>
c) 操作元素节点的属性
即改变一个HTML标签的属性
<!DOCTYPE html>
<html>
<head>
<title>dom3.html</title>
<meta charset="UTF-8">
</head>
<body>
<input type = "text" name = "username" value = "gouwa" />
<script type="text/javascript">
/*
1. 元素对象.属性名 获取属性值
2. 元素对象.getAttribute("属性名") 获取属性值
3. 元素对象.setAttribute("属性名","属性值"); 添加或者设置属性名和对应的属性值
4. 元素对象.removeAttribute("属性名");
*/
alert(document.getElementsByTagName("input")[0].getAttribute("name"));//获取属性值
//设置属性值
document.getElementsByTagName("input")[0].setAttribute("value","狗剩");
//移除属性
document.getElementsByTagName("input")[0].removeAttribute("value");
</script>
</body>
</html>
2. JS常见内置对象
window
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。(在使用时, window对象可以省略)
alert(); 弹出框
confirm(); 警告框
prompt(); 输入框
示例代码:
<!DOCTYPE html>
<html>
<head>
<title>window_01.html</title>
<meta charset="UTF-8">
</head>
<body>
<button onclick="delete_()">删除</button>
<script type="text/javascript">
function delete_(){
var flag = confirm("一定要删除吗 ？不能后悔的！！");
if (flag == true) {
alert("删除成功");
}
}
// prompt() 输入框
// function delete_() {
// var itemsID = window.prompt("请输入要删除的商品的id", "默认id");
// alert(itemsID);
// }
</script>
</body>
</html>
补充: 使用window对象实现定时器
<!DOCTYPE html>
<html>
<head>
<title>window_02.html</title>
<meta charset="UTF-8">
</head>
<body>
<button onclick="clear_()">清除定时任务</button>
<script type="text/javascript">
//定义函数
function aaa(){
alert("helloworld");
}
//定时器的实现
// window.setTimeout("aaa()", 3000);//只会执行一次
var interval = window.setInterval("aaa()", 2000);//循环执行
function clear_(){
window.clearInterval(interval);//清除定时任务
}
</script>
</body>
</html>
location
location对象的href 属性, 一般用来作为页面的跳转
<!DOCTYPE html>
<html>
<head>
<title>location.html</title>
<meta charset="UTF-8">
</head>
<body>
<button onclick="change_()">跳转到百度页面</button>
<script type="text/javascript">
function change_(){
location.href = "http://www.baidu.com";
}
</script>
</body>
</html>
history
历史记录中前进/后退
<!DOCTYPE html>
<html>
<head>
<title>history_01.html</title>
<meta charset="UTF-8">
</head>
<body>
<input type = "button" value="向前" onclick="forword_()"/>
<input type = "button" value="退后" onclick="back_()"/>
<a href="history_02.html">跳转到第二个页面</a>
<script type="text/javascript">
/*
history对象
back()
go()
forward()
*/
function forword_(){
history.forward(); // 返回到上一个页面
// history.go(1);
}
function back_(){
//history.back();
history.go(-1);
}
</script>
</body>
</html>
