原生JS节点获取、Class增删改查、属性操作、Dom操作

本文介绍了如何使用原生JavaScript进行DOM操作,包括节点获取、Class的增删改查以及属性的设置和获取,帮助理解不依赖jQuery的DOM操作方式。

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

HTML内容

<div id="head">
    <div class="head_wrapper">1</div>
    <div class="headBlock">2</div>
</div>

原生JS获取节点

在这里推荐使用element元素的方法
因为节点得到的是一个节点集合

//得到全部子节点childNodes 
document.getElementById('head').childNodes 
//NodeList(5) [text, div.head_wrapper, text, div.headBlock, text]

//得到父节点
document.querySelector('.head_wrapper').parentNode
//下一个兄弟节点
document.querySelector('.head_wrapper').nextSibling
//上一个兄弟节点
document.querySelector('.headBlock').previousSibling
//第一个子节点
document.getElementById('head').firstChild 
//最后一个子节点
document.getElementById('head').lastChild
//是否有子节点
document.getElementById('head').hasChildNodes()

//得到父级元素
document.querySelector('.head_wrapper').parentElement
//<div id="head"></div>

//下一个兄弟元素
document.querySelector('.head_wrapper').nextElementSibling
//<div class="headBlock"></div>

//上一个兄弟元素
document.querySelector('.headBlock').previousElementSibling
//<div class="head_wrapper"></div>

//第一个子元素
document.getElementById('head').firstElementChild
//<div class="head_wrapper"></div>

//最后一个子元素
document.getElementById('head').lastElementChild
//<div class="headBlock"></div>

//是否有子元素
document.getElementById('head').children.length == 0
//false

//获取该节点下的所有文本
document.getElementById('head').textContent
//1,2

//获取该节点下的文本
document.getElementById('head').innerText
//1,2

原生JS Class 增删改查

//添加Class
document.getElementById('head').classList.add('add') //('add1','add2')
//<div id="head" class="add"></div>

//删除Class
document.getElementById('head').classList.remove('add')
//<div id="head"></div>


//切换class toggle
document.getElementById('head').classList.toggle('add')
//打印true 代表添加成功,<div id="head" class="add"></div>
//打印false为删除成功, <div id="head"></div>

//是否存在Class
document.getElementById('head').classList.contains('add')
//返回 true和false

//返回类名在元素中的索引值。索引值从 0 开始。
<div id="head" class="add remove"></div>
document.getElementById('head').classList.item(1)
//remove

原生JS 属性设置和获取

//属性元素
document.getElementById('head').setAttribute('set', 'value');  
//<div id="head" set='value'></div>

//获取属性
document.getElementById('head').getAttribute('set')
//"value"  不存在为null

原生JS DOM增删

//已有元素前插入元素insertBefore
<ul id="box">
  <li>001</li>
</ul>
var newItem=document.createElement("li")
var lis=document.getElementsByTagName("li");
var curItem = document.getElementById('box')
newItem.innerHTML="002";
curItem.insertBefore(newItem,lis[0]);
//<ul id="box">
//  <li>002</li>
//  <li>001</li>
//</ul>

//已有元素内追加元素appendChild
<ul id="box">
  <li>001</li>
</ul>
var newItem=document.createElement("li")
var curItem = document.getElementById('box')
newItem.innerHTML="002";
curItem.appendChild(newItem);
//<ul id="box">
//  <li>001</li>
//</ul>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值