当前位置:网站首页>JS操作dom元素(一)——获取DOM节点的六种方式
JS操作dom元素(一)——获取DOM节点的六种方式
2022-07-06 12:51:00 【viceen】
JS操作dom元素(一)——获取DOM节点的六种方式
js获取Dom节点常见的方法:元素节点,属性节点,文本节点。
- 通过ID获取(getElementById)
- 通过name属性(getElementsByName)
- 通过标签名(getElementsByTagName)
- 通过类名(getElementsByClassName)
- 通过选择器获取一个元素(querySelector)
- 通过选择器获取一组元素(querySelectorAll)
- 获取html的方法(document.documentElement)
document.documentElement是专门获取html这个标签的 - 获取body的方法(document.body) document.body是专门获取body这个标签的。
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')
1、getElementById() — 通过id选中元素
上下文必须是document。
必须传参数,参数是string类型,是获取元素的id。
返回值只获取到一个元素,没有找到返回null。
function func() {
var selectId = document.getElementById("id名字");
selectId.style.color = "blue";
}
func();
2、getElementsByName — 通过name属性获取元素
一般使用在表单元素中
上下文必须是document。内容
必须传参数,参数是是获取元素的name属性。
返回值是一个类数组,没有找到返回空数组。
function funa() {
var selectDiv = document.getElementsByName("status");
selectDiv[0].checked = true;
// 此时selectDiv是NodeList节点对象
// console.log(selectDiv)
}
funa()
document.getElementsByName('name')
3、getElementsByTagName() — 通过标签名选中元素
上下文可以是document,也可以是一个元素,注意这个元素一定要存在。
参数是是获取元素的标签名属性,不区分大小写。
返回值是一个类数组,没有找到返回空数组
function func() {
var selectTag = document.getElementsByTagName("标签名");
selectTag.style.color = "blue";
}
func();
var obj = document.getElementsByTagName('div');
for(let i = 0; i<obj.length; i++){
obj[i].onclick = function(e){
console.log(i)
}
}
4、getElementsByClassName() — 通过类名选中元素
上下文可以是document,也可以是一个元素。
参数是元素的类名。
返回值是一个类数组,没有找到返回空数组。
function func() {
var selectClass = document.getElementsByClassName("类名");
selectClass.style.color = "blue";
}
func();
var obj1 = document.getElementsByClassName('animated')
// console.log
0:div.app.animated
1:div#login.login.animated.rubberBand
2:div#reg.reg.animated.shake
3:div#kefu.kefu.animated.swing
4:div#LoginState.state.animated.bounce
5:div.loginState.animated
6:div.regState.animated
7:div.pop.animated
4、querySelector和queryselectorAll
获取元素括号中的写法和css的选择器写法相同
5-1 querySelector() — 精准的获取某个元素
上下文可以是document,也可以是一个元素。
参数是选择器,如:”div .className”。
返回值只获取到第一个元素。
function funb() {
var selectDiv = document.querySelector("#list li:nth-child(3)");
selectDiv.style.color = "red";
// console.log(selectDiv)
}
funb()
document.querySelector('.animated')
5-2 queryselectorAll() —通过选择器获取一组元素
获取符合类名或者标签名等条件的的所有元素
上下文可以是document,也可以是一个元素。
参数是选择器,如:”div .className”。
返回值是一个类数组。
function func() {
var selectDiv = document.querySelectorAll(".text ul>li");
//此时selectDiv是一个数组,存放着li
selectDiv[0].style.color = "red";
//打印出为NodeList对象 -- 是节点的集合,可以使用 Array.from() 将其转换为数组
console.log(selectDiv)
}
func()
document.querySelector('.animated')
6、document.title和document.body
function fund() {
document.title = "这是title元素";
document.body.innerHTML = "<p style='color: red'>这是body元素</p>";
}
注:getElementByTagName可以操作动态创建的Dom,而getElementById不可以
边栏推荐
- (work record) March 11, 2020 to March 15, 2021
- Logic is a good thing
- Use of OLED screen
- C # use Oracle stored procedure to obtain result set instance
- Select data Column subset in table R [duplicate] - select subset of columns in data table R [duplicate]
- [asp.net core] set the format of Web API response data -- formatfilter feature
- Intel 48 core new Xeon run point exposure: unexpected results against AMD zen3 in 3D cache
- OneNote 深度评测:使用资源、插件、模版
- Distributed ID
- 966 minimum path sum
猜你喜欢
##无yum源安装spug监控
【OpenCV 例程200篇】220.对图像进行马赛克处理
【深度学习】PyTorch 1.12发布,正式支持苹果M1芯片GPU加速,修复众多Bug
PHP saves session data to MySQL database
基于深度学习的参考帧生成
Interviewer: what is the internal implementation of ordered collection in redis?
No Yum source to install SPuG monitoring
Mécanisme de fonctionnement et de mise à jour de [Widget Wechat]
use. Net drives the OLED display of Jetson nano
3D人脸重建:从基础知识到识别/重建方法!
随机推荐
Utilisation de l'écran OLED
Activiti global process monitors activitieventlistener to monitor different types of events, which is very convenient without configuring task monitoring in acitivit
2022 portal crane driver registration examination and portal crane driver examination materials
硬件开发笔记(十): 硬件开发基本流程,制作一个USB转RS232的模块(九):创建CH340G/MAX232封装库sop-16并关联原理图元器件
使用.Net分析.Net达人挑战赛参与情况
Word bag model and TF-IDF
The biggest pain point of traffic management - the resource utilization rate cannot go up
Le langage r visualise les relations entre plus de deux variables de classification (catégories), crée des plots Mosaiques en utilisant la fonction Mosaic dans le paquet VCD, et visualise les relation
华为设备命令
967- letter combination of telephone number
Common doubts about the introduction of APS by enterprises
Spark SQL chasing Wife Series (initial understanding)
Tips for web development: skillfully use ThreadLocal to avoid layer by layer value transmission
LLVM之父Chris Lattner:为什么我们要重建AI基础设施软件
Reviewer dis's whole research direction is not just reviewing my manuscript. What should I do?
如何实现常见框架
[DIY]如何制作一款个性的收音机
C # use Oracle stored procedure to obtain result set instance
Comment faire une radio personnalisée
每个程序员必须掌握的常用英语词汇(建议收藏)