Hello world -JavaScript
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HelloWorld<title/>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
alert("Hello World");
}
}
<script/>
<head/>
<body>
<button>ClickMe<button/>
<body/>
<html/>
获取元素节点
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素结点</title>
<script type="text/javascript">
window.onload = function(){
var bjNode = document.getElementById("bj");
alert(bjNode);
var liNode = document.getElementsByTagName("li");
alert(liNode.length);
var bjNode2 = document.getElementsByName("BeiJing");
alert(bjNode2.length);
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li id="sh" name="ShangHai">上海</li>
<li id="js" name="JiangSu">江苏</li>
</ul>
</body>
</html>
操作属性节点
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作属性节点</title>
<script type="text/javascript">
window.onload = function () {
var nameNode = document.getElementById("name");
alert(nameNode.value);
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>南京</li>
<li>杭州</li>
</ul>
<br />
name: <input type="text" name="username"
id="name" value="hello"/>
</body>
</html>
读写文本节点
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>读写文本节点</title>
<script type="text/javascript">
window.onload = function(){
var bjNode = document.getElementById("bj");
var bjTextNode = bjNode.firstChild;
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue("hello");
alert(bjTextNode);
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>南京</li>
<li>杭州</li>
</ul>
<br />
name: <input type="text" name="username"
id="name" value="Hello"/>
</body>
</html>
练习
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<script type="text/javascript">
window.onload = function () {
var liNodes = document.getElementsByTagName("li");
for(var i=0;i<liNodes.length;i++){
liNodes[i].onclick = function () {
var val = this.firstChild.nodeValue;
var reg = /^\^{2}/g;
if(reg.test(val)){
val = val.replace(reg,"");
}else{
val = "^^" + val;
}
this.firstChild.nodeValue = val;
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>南京</li>
<li>杭州</li>
</ul>
<br />
name: <input type="text" name="username"
id="name" value="Hello"/>
</body>
</html>