HTML中获取Dom元素的方法

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);

针对这几个方法,做了一个小小的例子,供参考




    
    Title


  • JAVA
  • C++
  • HTML
  • PHP

运行结果如:

HTML中获取Dom元素的方法_第1张图片

你可能感兴趣的