本文摘自PHP中文网,作者逆旅行人,侵删。

JS中
的DOM
是JavaScript学习中的重要组成部分,DOM元素
的获取更是打通HTML
与J
S
的重要桥梁,本文带大家一起来看一看传统的方式获取DOM
元素。
1.getElementById() 方法
返回对拥有指定 id 的第一个对象的引用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
</ head >
< body >
< ul id = "list" onclick="getValue()>
< li class = "item" >item1</ li >
< li class = "item" >item2</ li >
< li class = "item" >item3</ li >
< li class = "item" >item4</ li >
< li class = "item" >item5</ li >
</ ul >
</ body >
</ html >
|
1 2 3 4 5 6 7 8 | <script>
function getValue()
{
var x=document.getElementById( "id" )
alert(x.innerHTML)
}
</script>
</script>
|
2.getElementsByName()方法
返回带有指定名称的对象的集合。
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html>
< html >
< body >
< ul >
< li class = "item" name = "item" >item1</ li >
< li class = "item" name = "item" >item2</ li >
< li class = "item" name = "item" >item3</ li >
< li class = "item" name = "item" >item4</ li >
< li class = "item" name = "item" >item5</ li >
</ ul >
</ body >
</ html >
|
1 2 3 4 5 6 | <script>
var x=document.getElementsByName( "item" );
alert(x.length);
</script>
|
3.getElementsByTagName() 方法
返回带有指定标签名的对象的集合。
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html>
< html >
< body >
< ul >
< li >item1</ li >
< li >item2</ li >
< li >item3</ li >
< li >item4</ li >
< li >item5</ li >
</ ul >
</ body >
</ html >
|
1 2 3 4 5 6 | <script>
var x=document.getElementsByTagName( "li" );
alert(x.length);
</script>
|
推荐:《2021年js面试题及答案(大汇总)》
以上就是如何利用传统的方式在HTML中获取DOM元素的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
Html可以引入Html吗
Html添加遮罩效果
Html空格代码怎么写
Html文件的中文乱码问题与在浏览器中的显示问题
图文详解Html中有序列表、无序列表和自定义列表的区别
Html和asp之间的区别是什么
Html怎么修改文件
Html中的短语标签是什么?有哪些?
jquery实现带弹窗和次数的转盘抽奖(代码)
Html怎么点击按钮跳转页面
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何利用传统的方式在HTML中获取DOM元素