[网页编程]-16 JavaScript Document节点获取
元素节点的获取有两种方式,第一种是直接获取,第二种是间接获取
1.直接获取(三种)
1.1方式1
id方式直接获得 获得的是单个对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* 直接获取节点对象的方式 */
function demo1(){
//方式1:id方式直接获得 获得的是单个对象
var username = window.document.getElementById("username");
alert(username);
}
</script>
</head>
<body onload="demo3()">
<form action="" method="post">
用户名:<input type="text" name="username" id="username" value="请输入姓名" /><br />
密 码:<input type="password" name="pwd" id="pwd" /><br />
爱 好:<input type="checkbox" name="hobby" id="hobby" value="music" />音乐
<input type="checkbox" name="hobby" id="hobby" value="sports" />体育
<input type="checkbox" name="hobby" id="hobby" value="art" />美术
职 业:<select name="professional" id="professional">
<option value ="1">社会人</option>
<option value="2" id="p2">公务员</option>
<option value ="3">教师</option>
<option value ="4">医生</option>
</select><br>
<input type="button" value="提交"/>
</form>
</body>
</html>方式2
通过标签名称获取元素对象 获得多个对象(集合)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function demo2(){
//方式2:通过标签名称获取元素对象 获得多个对象(集合)
var inp = document.getElementsByTagName("input")
//获取数组长度
// alert(inp.length)
//获取具体下标元素 下标由0开始
// alert(inp[2])
}
</script>
</head>
<body onload="demo3()">
<form action="" method="post">
用户名:<input type="text" name="username" id="username" value="请输入姓名" /><br />
密 码:<input type="password" name="pwd" id="pwd" /><br />
爱 好:<input type="checkbox" name="hobby" id="hobby" value="music" />音乐
<input type="checkbox" name="hobby" id="hobby" value="sports" />体育
<input type="checkbox" name="hobby" id="hobby" value="art" />美术
职 业:<select name="professional" id="professional">
<option value ="1">社会人</option>
<option value="2" id="p2">公务员</option>
<option value ="3">教师</option>
<option value ="4">医生</option>
</select><br>
<input type="button" value="提交"/>
</form>
</body>
</html>方式3
通过name属性来获得
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function demo3(){
//方式3:通过neme属性来获得
var inp = document.getElementsByName("hobby");
alert(inp.length)
}
</script>
</head>
<body onload="demo3()">
<form action="" method="post">
用户名:<input type="text" name="username" id="username" value="请输入姓名" /><br />
密 码:<input type="password" name="pwd" id="pwd" /><br />
爱 好:<input type="checkbox" name="hobby" id="hobby" value="music" />音乐
<input type="checkbox" name="hobby" id="hobby" value="sports" />体育
<input type="checkbox" name="hobby" id="hobby" value="art" />美术
职 业:<select name="professional" id="professional">
<option value ="1">社会人</option>
<option value="2" id="p2">公务员</option>
<option value ="3">教师</option>
<option value ="4">医生</option>
</select><br>
<input type="button" value="提交"/>
</form>
</body>
</html>完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* 直接获取节点对象的方式 */
function demo1(){
//方式1:id方式直接获得 获得的是单个对象
var username = window.document.getElementById("username");
alert(username);
}
function demo2(){
//方式2:通过标签名称获取元素对象 获得多个对象(集合)
var inp = document.getElementsByTagName("input")
//获取数组长度
// alert(inp.length)
//获取具体下标元素 下标由0开始
// alert(inp[2])
}
function demo3(){
//方式3:通过neme属性来获得
var inp = document.getElementsByName("hobby");
alert(inp.length)
}
</script>
</head>
<body onload="demo3()">
<form action="" method="post">
用户名:<input type="text" name="username" id="username" value="请输入姓名" /><br />
密 码:<input type="password" name="pwd" id="pwd" /><br />
爱 好:<input type="checkbox" name="hobby" id="hobby" value="music" />音乐
<input type="checkbox" name="hobby" id="hobby" value="sports" />体育
<input type="checkbox" name="hobby" id="hobby" value="art" />美术
职 业:<select name="professional" id="professional">
<option value ="1">社会人</option>
<option value="2" id="p2">公务员</option>
<option value ="3">教师</option>
<option value ="4">医生</option>
</select><br>
<input type="button" value="提交"/>
</form>
</body>
</html>间接获取
方式一
通过父节点获取子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* 间接获取元素 */
function demo1(){
//方式1"通过父节点获取子节点"
//1.获得父节点
var professional = document.getElementById("professional");
//2.通过父节点点出子节点 获得的元素节点不仅有元素对象还有 空白的文本对象
var child = professional.childNodes;
alert(child.length);
}
</script>
</head>
<body onload="demo3()">
<form action="" method="post">
用户名:<input type="text" name="username" id="username" value="请输入姓名" /><br />
密 码:<input type="password" name="pwd" id="pwd" /><br />
爱 好:<input type="checkbox" name="hobby" id="hobby" value="music" />音乐
<input type="checkbox" name="hobby" id="hobby" value="sports" />体育
<input type="checkbox" name="hobby" id="hobby" value="art" />美术
职 业:<select name="professional" id="professional">
<option value ="1">社会人</option>
<option value="2" id="p2">公务员</option>
<option value ="3">教师</option>
<option value ="4">医生</option>
</select><br>
<input type="button" value="提交"/>
</body>
</html>方式二
通过子节点获取父节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function demo2(){
//方式2"通过子节点获取父节点"
//获取子节点
var p2 = document.getElementById("p2");
//获取父节点
var parent = p2.parentNode;
console.log(parent)
}
</script>
</head>
<body onload="demo3()">
<form action="" method="post">
用户名:<input type="text" name="username" id="username" value="请输入姓名" /><br />
密 码:<input type="password" name="pwd" id="pwd" /><br />
爱 好:<input type="checkbox" name="hobby" id="hobby" value="music" />音乐
<input type="checkbox" name="hobby" id="hobby" value="sports" />体育
<input type="checkbox" name="hobby" id="hobby" value="art" />美术
职 业:<select name="professional" id="professional">
<option value ="1">社会人</option>
<option value="2" id="p2">公务员</option>
<option value ="3">教师</option>
<option value ="4">医生</option>
</select><br>
<input type="button" value="提交"/>
</body>
</html>方式三
通过一个节点获取上下节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function demo3(){
//方式3"通过一个节点获取上下节点"
var p2 = document.getElementById("p2");
//获得下一个节点(不包含空白文档)
// var next = p2.nextElementSibling;
//获取上一个节点(不包含空白文档)
var up = p2.previousElementSibling;
console.log(up);
}
</script>
</head>
<body onload="demo3()">
<form action="" method="post">
用户名:<input type="text" name="username" id="username" value="请输入姓名" /><br />
密 码:<input type="password" name="pwd" id="pwd" /><br />
爱 好:<input type="checkbox" name="hobby" id="hobby" value="music" />音乐
<input type="checkbox" name="hobby" id="hobby" value="sports" />体育
<input type="checkbox" name="hobby" id="hobby" value="art" />美术
职 业:<select name="professional" id="professional">
<option value ="1">社会人</option>
<option value="2" id="p2">公务员</option>
<option value ="3">教师</option>
<option value ="4">医生</option>
</select><br>
<input type="button" value="提交"/>
</body>
</html>完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* 间接获取元素 */
function demo1(){
//方式1"通过父节点获取子节点"
//1.获得父节点
var professional = document.getElementById("professional");
//2.通过父节点点出子节点 获得的元素节点不仅有元素对象还有 空白的文本对象
var child = professional.childNodes;
alert(child.length);
}
function demo2(){
//方式2"通过子节点获取父节点"
//获取子节点
var p2 = document.getElementById("p2");
//获取父节点
var parent = p2.parentNode;
console.log(parent)
}
function demo3(){
//方式3"通过一个节点获取上下节点"
var p2 = document.getElementById("p2");
//获得下一个节点(不包含空白文档)
// var next = p2.nextElementSibling;
//获取上一个节点(不包含空白文档)
var up = p2.previousElementSibling;
console.log(up);
}
</script>
</head>
<body onload="demo3()">
<form action="" method="post">
用户名:<input type="text" name="username" id="username" value="请输入姓名" /><br />
密 码:<input type="password" name="pwd" id="pwd" /><br />
爱 好:<input type="checkbox" name="hobby" id="hobby" value="music" />音乐
<input type="checkbox" name="hobby" id="hobby" value="sports" />体育
<input type="checkbox" name="hobby" id="hobby" value="art" />美术
职 业:<select name="professional" id="professional">
<option value ="1">社会人</option>
<option value="2" id="p2">公务员</option>
<option value ="3">教师</option>
<option value ="4">医生</option>
</select><br>
<input type="button" value="提交"/>
</body>
</html>网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
赞同 0
评论 0 条
- 上周热门
- 如何使用 StarRocks 管理和优化数据湖中的数据？ 2947
- 【软件正版化】软件正版化工作要点 2867
- 统信UOS试玩黑神话：悟空 2828
- 信刻光盘安全隔离与信息交换系统 2723
- 镜舟科技与中启乘数科技达成战略合作，共筑数据服务新生态 1256
- grub引导程序无法找到指定设备和分区 1221
- 华为全联接大会2024丨软通动力分论坛精彩议程抢先看！ 164
- 点击报名 | 京东2025校招进校行程预告 163
- 2024海洋能源产业融合发展论坛暨博览会同期活动-海洋能源与数字化智能化论坛成功举办 162
- 华为纯血鸿蒙正式版9月底见！但Mate 70的内情还得接着挖... 157
- 本周热议
- 我的信创开放社区兼职赚钱历程 40
- 今天你签到了吗？ 27
- 如何玩转信创开放社区—从小白进阶到专家 15
- 信创开放社区邀请他人注册的具体步骤如下 15
- 方德桌面操作系统 14
- 用抖音玩法闯信创开放社区——用平台宣传企业产品服务 13
- 我有15积分有什么用? 13
- 如何让你先人一步获得悬赏问题信息？（创作者必看） 12
- 2024中国信创产业发展大会暨中国信息科技创新与应用博览会 9
- 中央国家机关政府采购中心：应当将CPU、操作系统符合安全可靠测评要求纳入采购需求 8
热门标签更多
