HTML之JavaScript DOM编程获取元素的方式
1.获得document DOM树window.document(是window的属性)2.从document中获取要操作的元素1.直接获取var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个var bbb = document.getElementsByTagName("input")var ccc = document.getElementsByName("aaa")var ddd = document.getElementsByClassName("a") 2.间接获取var cs = div01.children // 获取全部子元素var firstc = div01.firstElementChild// 通过父元素获取第一个子元素var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素var parentE = mmm.parentElement // 通过子元素获取父元素var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小标题</title><script>function fun1() {var aaa = document.getElementById("username") console.log(aaa)}function fun2() {var bbb = document.getElementsByTagName("input")for (i = 0; i < bbb.length; i++) {console.log(bbb[i])}}function fun3() {var ccc = document.getElementsByName("aaa")for (i = 0; i < ccc.length; i++) {console.log(ccc[i])}}function fun4() {var ddd = document.getElementsByClassName("a")for (i = 0; i < ddd.length; i++) {console.log(ddd[i])}}function fun5() {var div01 = document.getElementById("div01")var cs = div01.children for (i = 0; i < cs.length; i++) {console.log(cs[i])}console.log(div01.firstElementChild)console.log(div01.lastElementChild) }function fun6() {var mmm = document.getElementById("username")console.log(mmm.parentElement) }function fun7() {var nnn = document.getElementById("username")console.log(nnn.previousElementSibling) console.log(nnn.nextElementSibling) }</script>
</head>
<body><div id="div01"><input type="text" class="a" id="username" name="aaa" /><input type="text" class="b" id="password" name="aaa" /><input type="text" class="a" id="email" /><input type="text" class="b" id="address" /></div><input type="text" /><hr><input type="button" value="根据id获得指定元素" onclick="fun1()" id="btn01" /><input type="button" value="根据标签名获得多个元素" onclick="fun2()" id="btn02" /><input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03" /><input type="button" value="根据class属性获取多个值" onclick="fun4()" id="btn04" /><hr><input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05" /><input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06" /><input type="button" value="通过当前元素获取前面的兄弟元素" onclick="fun7()" id="btn07" /><input type="button" value="通过当前元素获取后面的兄弟元素" onclick="fun8()" id="btn08" />
</body>
</html>
