HTML中获取Dom元素的方法 亦凉 2022-01-27 01:27 608阅读 0赞 ## HTML中获取Dom元素的方法 ## 1.getElementsByTagName()方法:获取标签,获取的值是一个数组形式;然后再通过数组下标来准确得到自己想要的值 //getElementsByTagName 获取标签方法 获取的值是一个数组形式 //通过索引下标获取第一个li 定义变量接收 const xx = document.getElementsByTagName("li")[0]; //打印结果 console.log(xx); **通过索引下标取值的方法不直观 因为以后数据都是从后台动态获取,前台动态生成添加** 2.querySelector()方法: 选择器查询 querySelector(传入的选择器名称 也可以是标签 ),如果参数是标签,其元素值不止一个的话;那么只会返回满足条件的第一个元素值 例如: var pp=document.querySelector("li") ; 传入的参数:如果是类选择器,必须添加" .";如果是id选择器,必须添加" \# ";否则会被当成标签来处理 var pp=document.querySelector(".fous") ; //通过类名准确选择所需要的元素 console.log(pp); 3。querySelectorAll()方法:与getElementsByTagName()方法有点类似;获取满足条件的所有元素—数组形式 ;通过索引下标方式来获取想要得到的值 var rr=document.querySelectorAll("li"); var xpr=document.querySelectorAll("li")[2]; console.log(rr); console.log(xpr); **针对这几个方法,做了一个小小的例子,供参考** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li class="one">JAVA</li> <li class="two">C++</li> <li class="three">HTML</li> <li class="fous">PHP</li> </ul> <script> window.onload=function () { //getElementsByTagName 获取标签方法 获取的值是一个数组形式 //通过索引下标获取第一个li 定义变量接收 const xx = document.getElementsByTagName("li")[0]; //打印结果 console.log(xx); // 通过索引下标取值的方法不直观 因为以后数据都是从后台动态获取,前台动态生成添加 //querySelector 选择器查询 querySelector(传入的选择器名称 也可以是标签 ) //var pp=document.querySelector("li") ; //querySelector 获取单个元素,如果获取的元素不止一个,那么只会返回满足条件的第一个元素 //传入的参数要求:如果是类选择器,必须添加" .";如果是id选择器,必须添加" # ";否则会被当成标签来处理 // querySelectorAll 获取满足条件的所有元素---数组形式 // 通过索引下标方式来获取想要得到的值 var rr=document.querySelectorAll("li"); var xpr=document.querySelectorAll("li")[2]; console.log(rr); console.log(xpr); } </script> </body> </html> 运行结果如: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTk5ODE5_size_16_color_FFFFFF_t_70] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTk5ODE5_size_16_color_FFFFFF_t_70]: /images/20220127/12d035fbb2c5433a9c2732400256d578.png
还没有评论,来说两句吧...