7、JavaScript处理 DOM事件
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>JavaScript基本数据类型</title>
<scripttype="text/javascript">
functionfun(){
alert("点我干嘛");
}
</script>
</head>
<body>
<inputtype="button"value="点我"onclick="fun()"/>
</body>
</html>
8、JavaScript操作DOM节点：修改，添加，删除
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>JavaScript操作DOM节点</title>
<scripttype="text/javascript">
function fun(){
document.getElementById("txt").innerHTML="用户名：";
// 容器
document.getElementById("userName").value="Jack";
// 与非容器的区别
}
functionfun1(){
varpara =document.createElement("p");
varpara2 =document.createElement("p2");
// 创建一个对象，document.createElement()是在对象中创建一个对象，
//要与appendChild()或 insertBefore()方法联合使用。
//其中，appendChild()方法在节点的子节点列表末添加新的子节点。
//insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
varno = document.createTextNode("...前...");
varno2 =document.createTextNode("...后...");
// 创建一个文本
para.appendChild(no);
para2.appendChild(no2);
// 在para后添加上文本节点
var parent= document.getElementById("parent");
var son1 = document.getElementById("son1");
parent.insertBefore(para,son1);
parent.appendChild(para2,son1);
// 在son1前面插入para
}
functionfun2(){
varparent =document.getElementById("parent");
varson1 =document.getElementById("son1");
parent.removeChild(son1);
}
</script>
</head>
<body>
<divid="parent">
<divid="son1">
<fontid ="txt">:</font>
<inputtype="text"id="userName"name="userName"/>
</div>
</div>
<inputtype="button"value="修改DOM节点"onclick="fun()"/>
<inputtype="button"value="添加DOM节点"onclick="fun1()"/>
<inputtype="button"value="删除DOM节点"onclick="fun2()"/>
</body>
</html>
9、修改DOM节点CSS样式
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>JavaScript修改DOM节点CSS样式</title>
<scripttype="text/javascript">
functionfun(){
document.getElementById("girl").style.color="red";
}
</script>
</head>
<body>
<pid="girl">女程序员</p>
<inputtype="button"value="修改DOM节点样式"onclick="fun()"/>
</body>
</html>
此处均使用HBuilder编译。
7、JavaScript处理 DOM事件 <!DOCTYPEhtml> <html> <head> <meta charset="utf-8" /> <title>JavaScript基本数据类型</title> <script type="text/javascript"> function fun(){ alert("点我干嘛"); } </script> </head> <body> <input type="button" value="点我" οnclick="fun()" /> </body> </html> 8、JavaScript操作DOM节点：修改，添加，删除 <!DOCTYPEhtml> <html> <head> <meta charset="utf-8" /> <title>JavaScript操作DOM节点</title> <script type="text/javascript"> function fun(){ document.getElementById("txt").innerHTML="用户名："; // 容器 document.getElementById("userName").value="Jack"; // 与非容器的区别 } function fun1(){ var para = document.createElement("p"); var para2 = document.createElement("p2"); // 创建一个对象，document.createElement()是在对象中创建一个对象， //要与appendChild() 或 insertBefore()方法联合使用。 //其中，appendChild() 方法在节点的子节点列表末添加新的子节点。 //insertBefore() 方法在节点的子节点列表任意位置插入新的节点。 var no = document.createTextNode("...前..."); var no2 = document.createTextNode("...后..."); // 创建一个文本 para.appendChild(no); para2.appendChild(no2); // 在para后添加上文本节点 var parent = document.getElementById("parent"); var son1 = document.getElementById("son1"); parent.insertBefore(para,son1); parent.appendChild(para2,son1); // 在son1前面插入para } function fun2(){ var parent = document.getElementById("parent"); var son1 = document.getElementById("son1"); parent.removeChild(son1); } </script> </head> <body> <div id="parent"> <div id="son1"> <font id = "txt">:</font> <input type="text" id="userName"name="userName"/> </div> </div> <input type="button" value="修改DOM节点" οnclick="fun()" /> <input type="button" value="添加DOM节点" οnclick="fun1()" /> <input type="button" value="删除DOM节点" οnclick="fun2()" /> </body> </html> 9、修改DOM节点CSS样式 <!DOCTYPEhtml> <html> <head> <meta charset="utf-8" /> <title>JavaScript修改DOM节点CSS样式</title> <script type="text/javascript"> function fun(){ document.getElementById("girl").style.color="red"; } </script> </head> <body> <p id="girl">女程序员</p> <input type="button" value="修改DOM节点样式" οnclick="fun()" /> </body> </html> 此处均使用HBuilder编译。
