<!DOCTYPE html>
<html>
<head>
<title>javascript_dom编程</title>
<meta charset="utf-8">
<script type="text/javascript">
function getPWD(){
//DOM中第一个常用的方法是getElementById表示通过id来获取某个特定的标签，获取的是一个值
var pwd = document.getElementById("pwd");
alert(pwd.value);
var pc = document.getElementById("showPWD");
pc.innerHTML = pwd.value;
}
function getUsers(){
//根据标签的name的属性获取一组标签对象，这个方法一般只用于表单的获取
var users = document.getElementsByName("users");
for(var i = 0;i<users.length;i++){
alert(users[i].value);
}
}
function getInputs(){
/**
* 根据标签的名称获取一组元素
* 这个非常有用，一般用于获取
* 各种标签
*/
var is = document.getElementsByTagName("input");
for(var i=0;i<is.length;i++){
alert(is[i].value);
}
}
function getAllH1(){
var ah = document.getElementsByTagName("h1");
for(var i=0;i<ah.length;i++){
//获取节点中的文本的内容
alert(ah[i].innerHTML);
//获取节点的名称
alert(ah[i].nodeName);
//获取节点的类型
alert(ah[i].nodeType);
//获取节点中的值：节点中的值只是在针对文本节点时有用
alert(ah[i].nodeValue);
//获取某个节点的文本节点
alert(ah[i].firstChild.nodeType);
//获取某个节点的文本节点的值
alert(ah[i].firstChild.nodeValue);
}
}
function getConH2(){
var con = document.getElementById("content");
var h2 = con.getElementsByTagName("h2");
//得到h2元素是一个数组
alert(h2[0].innerHTML);
//通过h2这个节点来找到h3中span中的值
//1:找到父节点
var pn = h2.parentNode;
var h3 = pn.getElementsByTagName("h3")[0];
var s = h3.getElementsByTagName("span")[0];
alert(s.innerHTML);
}
</script>
</head>
<body>
<div id="content">
<h1>
aaaaaa
<span>aaaaassssss</span>
</h1>
<h2>
bbbbb
<span>bbbbbssssss</span>
</h2>
<h3>
ccccc
<span>cccccssssss</span>
</h3>
<input type="button" value="操作" onclick="getAllH1()">
<input type="button" value="获取h3中的内容" onclick="getConH2()">
</div>
</body>
</html>
时间： 2024-10-25 15:20:56