JS获取DOM节点的几种方式

前端小li

于 2022-06-06 10:26:11 发布

阅读量989

点赞数

分类专栏： HTML 前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/HTML5_student/article/details/125141828

版权

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

HTML

17 篇文章

订阅专栏

这篇博客介绍了如何通过JavaScript处理HTML数据，特别是当内容包含@某人的情况。作者复习了多种DOM操作方法，如getElementById、getElementsByClassName等，来定位到含有@的span标签并修改其样式，以此实现留言中被@名字高亮显示的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做的一个功能是显示留言需要将被@人的名字变成蓝色，但是返回的数据都是html形式，然后我想到通过dom节点获取到innerText带有@的span标签并改变样式，正好复习一下js获取dom节点的几种方式
在这里插入图片描述

1.getElementById() — id选中元素
    var getid=document.getElementById('id名字')
2.getElementsByClassName() — 类名选中元素
    var getclass=document.getElementsByClassName('类名')
3.getElementsByTagName() — 标签名选中元素
 	var gettag=document.getElementsByTagName('标签名')
4.getElementsByName() — 通过name属性获取元素
    var getname=document.getElementsByName('name名') 

	下面获取元素括号中的写法和css的选择器写法相同
5.querySelector() — 精准的获取某个元素 
    var f=document.querySelector("#tabelList li:nth-child(2)")
6.querySelectorAll()获取符合类名或者标签名等条件的的所有元素
    var g=document.querySelectorAll('.box p>span')