13DOM编程API（一） 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>Document</title>
  7     <script>
  8         /*
  9             DOM编程就是用document对象API完成对网页HTML文档进行动态修改，以实现网页数据和样式动态变化效果的编程
 10                 1 获得document dom树
 11                     window.document
 12                 2 从document中获取要操作的元素
 13                     1.直接获取
 14                         var el1 = document.getElementById("username")  //根据元素的id值获取页面上唯一的一个元素
 15                         var el2 = document.getElementsByTagName("input")  //根据标签名获得多个元素
 16                         var el3 = document.getElementsByName("aaa")  //根据元素的name属性值获得多个元素
 17                         var el4 = document.getElementsByClassName("a")  //根据class属性值获得多个元素
 18                     2.间接获取
 19                         var cs = div01.children  //通过父元素获取子元素
 20                         console.log(div01.firstElementChild)  //获取第一个子元素
 21                         console.log(div01.lastElementChild)  //获取最后一个子元素
 22                         console.log(pinput.parentElement)  //通过子元素获取父元素
 23                         console.log(pinput.previousElementSibling)  //获取前面的第一个元素
 24                         console.log(pinput.nextElementSibling)  //获取后面的第一个元素
 25                 3 对元素进行操作
 26                     1.操作元素的属性
 27                     2.操作元素的样式
 28                     3.操作元素的文本
 29                     4.增删元素
 30         */
 31 
 32         function fun1(){
 33             //获得document，通过document获得元素
 34             var el1 = document.getElementById("username")  //根据元素的id值获取页面上唯一的一个元素
 35             console.log(el1)
 36         }
 37         function fun2(){
 38             var el2 = document.getElementsByTagName("input")  //根据标签名获得多个元素
 39             for(var i = 0 ; i < el2.length ; i++){
 40                 console.log(el2[i])
 41             }
 42         }
 43         function fun3(){
 44             var el3 = document.getElementsByName("aaa")  //根据元素的name属性值获得多个元素
 45             for(var i = 0 ; i < el3.length ; i++){
 46                 console.log(el3[i])
 47             }
 48         }
 49         function fun4(){
 50             var el4 = document.getElementsByClassName("a")  //根据class属性值获得多个元素
 51             for(var i = 0 ; i < el4.length ; i++){
 52                 console.log(el4[i])
 53             }
 54         }
 55         function fun5(){
 56             //先获取父元素
 57             var div01 = document.getElementById("div01")  //通过父元素获取子元素
 58             //获取所有子元素
 59             var cs = div01.children
 60             for(var i = 0 ; i < cs.length ; i++){
 61                 console.log(cs[i])
 62             }
 63             //获取第一个子元素
 64             console.log(div01.firstElementChild)
 65             //获取最后一个子元素
 66             console.log(div01.lastElementChild)
 67         }
 68         function fun6(){
 69             //获取子元素
 70             var pinput = document.getElementById("password")
 71             console.log(pinput.parentElement)  //通过子元素获取父元素
 72         }
 73         function fun7(){
 74             var pinput = document.getElementById("password")
 75             console.log(pinput.previousElementSibling)  //获取前面的第一个元素
 76             console.log(pinput.nextElementSibling)  //获取后面的第一个元素
 77         }
 78 
 79     </script>
 80 </head>
 81 <body>
 82     <div id="div01">
 83         <input type="text" class="a" id="username" name="aaa" >
 84         <input type="text" class="b" id="password" name="aaa" >
 85         <input type="text" class="a" id="email">
 86         <input type="text" class="b" id="address">
 87     </div>
 88     <input type="text"><br>
 89     <hr>
 90 
 91     <input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05">
 92     <input type="button" value="通过子元素获取父元素" onload="fun6()" id="btn06">
 93     <input type="button" value="通过当前元素获取兄弟元素" onclick="fun7()" id="btn07">
 94 
 95     <hr>
 96     <input type="button" value="根据id获取指定元素" onclick="fun1()" id="btn01">
 97     <input type="button" value="根据标签名获得多个元素" onload="fun2()" id="btn02">
 98     <input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03">
 99     <input type="button" value="根据class属性值获得多个元素" onclick="fun4()" id="btn04">
100 </body>
101 </html>

 

posted @ 2024-03-27 20:26  白茶花约  阅读(33)  评论(0)    收藏  举报