1.创建新的HTML元素
如果需要向HTML DOM添加新元素,必须先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script type="text/javascript">
var para=document.createElement("p");// 创建一个新元素
var node=document.createTextNode("这是新段落。");// 创建一个文本节点
para.appendChild(node);// 向p元素追加创建的文本节点
var element=document.getElementById("div1");// 找到一个已有元素
element.appendChild(para);// 向已有元素追加新创建的元素
</script>
</body>
</html>
2.删除HTML元素
要删除HTML元素,在DOM中需要明确你希望删除的元素,以及所在的父元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
<script type="text/javascript">
var parent=document.getElementById("div1");// 找到div1
var child=document.getElementById("p1");// 找到p1
parent.removeChild(child);// 从父元素中删除子元素
</script>
</div>
</body>
</html>
也可以通过下面的方法来确定父元素:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
3.Window
实用的JavaScript获取浏览器窗口内部宽度、高度的方案(涵盖所有浏览器)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="demo"></p>
<script type="text/javascript">
var w=window.innerWidth
||document.documentElement.clientWidth
||document.body.clientWidth;
var h=window.innerHeight
||document.documentElement.clientHeight
||document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器的内部窗口宽度:"+w+",高度:"+h+"。";
</script>
</body>
</html>
4.Window.screen
Window.screen的可用宽度和可用高度:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
document.write("可用宽度:"+screen.availWidth);
document.write("可用高度"+screen.availHeight);
</script>
</body>
</html>
5.Window location
window.location对象在编写时可以不使用window
- location.hostname返回web主机的域名
- location.pathname返回当前页面的路径和文件名
- location.port返回web主机的端口(80或443)
- location.protocol返回所使用的web协议(http://或者https?/)
实例练习
- location.href属性返回当前页面的URL
<script type="text/javascript">
document.write(location.href);
</script>
- location.pathname属性返回URL的路径名
<script type="text/javascript">
document.write(location.pathname);
</script>
- location.assign()方法加载新的文档。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function newDoc(){
window.location.assign("http://www.baidu.com")
}
</script>
</head>
<body>
<input type="button" value="加载新页面" "newDoc()"/>
</body>
</html>
6.Window History
- history.bakc()与在浏览器点击后退按钮相同
实例,在页面创建后退按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function goBack(){
window.history.back();
}
</script>
</head>
<body>
<input type="button" value="返回" "goBack()"/>
</body>
</html>
- history.forward()与在浏览器点击前进按钮相同
实例,在页面创建前进按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function forward(){
window.history.forward();
}
</script>
</head>
<body>
<input type="button" value="前进" "forward()"/>
</body>
</html>
7.Window Navigtor
window.navigtor对象包含有关访问者浏览器的信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript">
txt = "<p>Browser CodeName:" + navigator.appCodeName + "</p>"
txt += "<p>Browser Name:" + navigator.appName;
txt += "<p>Browser Version: " + navigator.appVersion + "</p>";
txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt += "<p>Platform: " + navigator.platform + "</p>";
txt += "<p>User-agent header: " + navigator.userAgent + "</p>";
txt += "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>
8.JavaScript计时
通过JavaScript我们能够做到经过一个时间间隔,再执行代码,而不是在函数调用后立即执行,称为计时事件。
- 单击按钮后,会在5s后弹出一个警告框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function timeMsg(){
var t=setTimeout("alert('5秒!')",5000);
}
</script>
</head>
<body>
<input type="button" value="显示定时的警告框" "timeMsg()"/>
<p>请点击上面的按钮。警告框会在5秒后显示。</p>
</body>
</html>
- 点击按钮后,会执行2、4、6秒的计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function timedText(){
var t1=setTimeout("document.getElementById('txt').value='2秒'",2000);
var t2=setTimeout("document.getElementById('txt').value='4秒'",4000);
var t3=setTimeout("document.getElementById('txt').value='6秒'",6000);
}
</script>
</head>
<body>
<form>
<input type="button" value="显示计时的文本" "timedText()" />
<input type="text" id="txt" />
</form>
<p>点击上面的按钮,输入框会显示出已经逝去的时间(2、4、6秒)。</p>
</body>
</html>
- 点击按钮后开始运行一个无穷循环的计时器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var c=0;
var t;
function timeCount(){
document.getElementById("txt").value=c;// 给起始值
c=c+1;// 循环的步长
t=setTimeout("timeCount()",1000);// 设定时间,并在1秒后重新调用函数,进行循环
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时" "timeCount()"/>// 开始开关
<input type="text" id="txt" />// 显示框
</form>
<p>请点击上面的按钮。输入框会从0开始一直进行计时。</p>
</body>
</html>
- 带有结束按钮的计时器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var c=0;
var t;
function mytime(){
document.getElementById("txt").value=c;
c=c+1;
t=setTimeout("mytime()",1000);
}
function stoptime(){
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="开始" "mytime()" />
<input type="text" id="txt" />
<input type="button" value="结束" "stoptime()" />
</form>
</body>
</html>
使用计时器制作的钟表:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function start(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10;
m=check(m);
s=check(s);
document.getElementById("txt").innerHTML=h+":"+m+":"+s;
t=setTimeout("start()",500)
}
function check(i){
if(i<10){
i="0"+i;
}
return i;
}
</script>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:skyblue;
text-align: center;
margin-top:100px;
margin-left:100px;
border-radius:50px;
font-size:20px;
color:red;
line-height: 100px;
}
</style>
</head>
<body "start()">
<div id="txt"></div>
</body>
</html>
JavaScript中使用计时器的两个关键方法是:
setTimeout()
未来的某个时间执行代码
clearTimeout()
取消setTimeout()
总结:setTimeout()方法会返回一个值,它的第一个参数是含有JavaScript语句的字符串,这个语句可以使"alert(‘5秒’)";或者对函数的调用,第二个参数是从当前起多少毫秒后执行第一个参数。
1000毫秒等于一秒。
9.cookie
cookie用来识别用户。
- cookie是存储于访问者的计算机中的变量。每当同一台电脑通过浏览器请求某个页面时,就会发送cookie。可以通过JavaScript来创建和取回cookie的值。