原生js里的DOM操作,首先要获取待操作的元素,而初学者对获取元素所使用的getElement的几个方法是不是经常容易混呢?看了本文就全明白了!
一般说明:
1、注意大小写!
2、注意其中Element的单、复数!
方法一:getElementById
通过Id来取得元素,Id是唯一的,示例如下:
<div id="cat"></div><script> a = document.getElementById('cat'); a.innerHTML = "hello cat!";</script>
说明:在这个代码中,a为id是cat的元素,操作a把它的内容改成 hello cat!
getElementById 这个方法是最常用的,通常记住这个就够你用的了!
方法二:getElementsByName
通过NAME来获得元素,
注意,因为NAME可以重复,所以Element是复数,要加个s,所以这个方法是取得一个数组。IE不支持。示例如下:
<div name="dog">第一个</div><div name="dog">第二个</div><script> a = document.getElementsByName('dog'); a[1].innerHTML = "hello dog!";</script>
说明:在这个代码中,a为所有name是dog的元素集合,操作其中的第2个,把内容改成 hello dog!
方法三:getElementsByTagName
通过TAGNAME(HTML的标签名字)来获得元素,
注意,因为标签可以重复,所以Element是复数,要加个s,所以这个方法也是取得一个数组。示例如下:
<div> <span>第一个</span> <span>第二个</span></div><script> a = document.getElementsByTagName('span'); a[1].innerHTML = "hello span!";</script>
说明:在这个代码中,a为所有标签是span的元素集合,操作其中的第2个,把内容改成 hello span!
方法四:getElementsByClassName
通过class(样式名)来获得元素,
注意,因为样式引用可以重复,所以Element是复数,要加个s,所以这个方法也是取得一个数组。示例如下:
<div class="apple">第一个</div><div class="apple">第二个</div><script> a = document.getElementsByClassName('apple'); a[1].innerHTML = "hello apple!";</script>
说明:在这个代码中,a为所有样式class是apple的元素集合,操作其中的第2个,把内容改成 hello apple!
至此四个方法都搞定了!再也不会混淆了吧?
本文发布于:2023-02-28 20:03:00,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/zhishi/a/167765247177675.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:document.getelementbyid(document.getelementbyid.value).doc
本文 PDF 下载地址:document.getelementbyid(document.getelementbyid.value).pdf
留言与评论(共有 0 条评论) |