js获取元素方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js获取元素方法相关的知识,希望对你有一定的参考价值。

<div>
<ul id="star">
<li><img src="images/star1.jpg" /></li>
<li><img src="images/star1.jpg"/></li>
<li><img src="images/star1.jpg"/></li>
<li><img src="images/star1.jpg"/></li>
<li><img src="images/star1.jpg"/></li>
</ul>
</div>
我想获取img,更改它的src,目前JS只写到这步
var i=document.getElementById('star')
var light=i.getElementsByTagName('li')
不会获取里面的img,敢问高手如何做?
鄙人菜鸟,初学JS

js获取元素方法有:
1、getElementById :根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象,则返回该组对象中的第一个。
2、getElementsByName:getElementsByName(name)该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
另外,因为一个文档中的 name 属性可能不唯一(如 html 表单中的单选按钮通常具有相同的 name 属性),所以getElementsByName() 方法返回的是所有匹配元素组成的数组,而不是一个元素。
3、getElementsByTagName:getElementsByTagName() 方法会使用指定的标签名返回所有的元素(作为一个节点列表),这些元素是您在使用此方法时所处的元素的后代。
getElementsByTagName() 可被用于任何的 HTML 元素
如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
参考技术A 第一种:根据ID获取document.getElementById("id");
第二种:根据class名获取document.getElementsByClassName("className");
第三种:根据标签名获取document.getElementsByTagName("TagName");
如果你是真心想学习JS、以后想朝着这个方向发展,那么你一定要来这个企鹅裙,前面前面是二9六,中间是五9一,最后面就是2九零,连起来就是完整的,来这里可以这里学习经验,得到专人解答,这样你可以成长的更快,期待你的加入!!!
第四种:h5新增2种方法获取,参数是css选择器
document.querySelector(".class");
参考技术B <div>
<ul id="star">
<li><img src="images/star1.jpg" /></li>
<li><img src="images/star1.jpg"/></li>
<li><img src="images/star1.jpg"/></li>
<li><img src="images/star1.jpg"/></li>
<li><img src="images/star1.jpg"/></li>
</ul>
</div>
<script language="javascript">
var i=document.getElementById('star')
var light=i.getElementsByTagName('img')
var str='';
for(var i=0;i<light.length;i++)

str=str+light[i].src+",";

alert(str);
</script>追问

str=str+light[i].src+",";
这句是什么意思啊?

追答

light[i].src是第i个img的地址,i从0开始,str=str+light[i].src+",";是把所有img的地址合并,并用逗号分开

本回答被提问者采纳
参考技术C getelementbyid

JS获取HTML DOM元素的方法

在JS中获取元素的方法有很多,可以根据实际需要选择合适的方法

一、JS获取元素的方法

     1)根据id获取标签元素
            var div1=document.getElementById("div1");

        2)根据标签名获取标签列表
               var divs=document.getElementsByTagName("div")
        
        3)根据className获取标签列表
            var div0=document.getElementsByClassName("div0");
        console.log(div0)

        4)获取id必须使用document调用getElementById
            var diva=document.getElementById("diva");
            var div1=diva.getElementById("div1")//错误写法,
            
        5)下面两个方法获取的都是HTMLCollection HTML列表,getElementByTagNames这个方法处理可以使用document以外,还可以使用元素调用,如果使用元素调用,就是指当前这个元素的子元素的中的标签名是div的
          var diva=document.getElementById("diva");
          var divs=diva.getElementsByTagName("div");
          var divs=document.getElementsByTagName("div");//这个比上面多
          console.log(divs)

        6) 可以根据元素获取子元素中class是div0的所有元素,如果可以使用document.getElementsByClassName就是获取整个文档中class是div0的
            var diva=document.getElementById("diva");
            var div0=diva.getElementsByClassName("div0");
            console.log(div0)

        7)根据name获取节点列表,NodeList节点列表,getElementByName不可以通过父元素获取
            var form1=document.getElementById("form1");
            var sex=document.getElementsByName("sex");
            console.log(sex)

以下方法适用于IE8以下

        8)根据选择器获取到第一个找到的元素
            var div=document.querySelector("div");//根据选择器获取到所有的div
            var div1=document.querySelector("#div1");
            var div0=document.querySelector(".div0");
            var div0=document.querySelector("#diva>.div0");
            var ps=document.querySelector("[name=password]")
            console.log(ps)

二、获取子元素和子节点

      9)子节点和子元素
        var diva=document.querySelector("#diva");
        console.log(diva.childNodes);//子节点,是NodeList,包含文本节点,注释节点等等
        console.log(diva.children);//子元素 是HTMLCollection,只包含元素

      10)父节点和父元素
        console.log(diva.parentNode);//父节点
        console.log(diva.parentElement)//父元素
    
      11)第一个子节点和第一个子元素
        console.log(diva.firstChild);//第一个子节点
        console.log(diva.firstElementChild);//第一个子元素

      12)最后一个子节点和最后一个子元素
        console.log(diva.lastChild);//最后一个子节点
        console.log(diva.lastElementChild);//最后一个子元素

      13)下一个兄弟节点和下一个兄弟元素
        console.log(diva.nextSibling);//下一个兄弟节点
        console.log(diva.nextElementSibling);//下一个兄弟元素

      14)上一个兄弟节点和上一个兄弟元素
        console.log(diva.previousSibling);//上一个兄弟节点
        console.log(diva.previousElementSibling);//上一个兄弟元素

 

以上是关于js获取元素方法的主要内容,如果未能解决你的问题,请参考以下文章

js获取元素高度怎么写呢?

js 如何获取class的元素

怎么按元素id 使用js为页面元素绑定click()方法?

js怎么获取元素的class名

JS获取HTML DOM元素的方法

关于js获取元素实际高度的问题