文档对象模型-DOM(二)
2024-09-08 06:09:56
从NodeList中选择元素
方法一:item()方法,用于返回其中的单一节点,需要在方法的参数中指定所需元素的索引编号。
当其中没有任何元素时,执行代码是对资源的浪费。因此程序员会在执行代码之前,先检查一下在NodeList中是否至少包含一个节点。
可以使用length方法来实现。举例如下:
var elements = document.getElementsByClassName('hot');
if(elements.length>=0){
var firstItem = elements.item(0);
}
方法二:数组语法,可以使用括号语法来访问其中一个元素,就像访问数组中的单一项一样,需要在NodeList后面的中括号里指定所需的索引编号。举例如下:‘
var elements = document.getElementsByClassName('hot');
if(elements.length>=0){
var firstItem = elements[0];
}
使用class属性选择元素
var elements = document.getElementsByClassName('hot'); // 找到class值为'hot'的所有元素
if (elements.length > 2) {
var el = elements[2]; // 选择第三个元素并缓存到el
el.className = 'cool'; // 将第三个元素的值替换为'cool'
5 }
使用标签名选择元素
getElementsByTagName()方法
var elements = document.getElementsByTagName('li'); // 找到<li>标签的多有元素
if (elements.length > 0) {
var el = elements[0];
el.className = 'cool';
}
使用class选择器选择元素
querySelector() //返回第一个匹配的元素;querySelectorAll() //返回匹配的所有元素
var el = document.querySelector('li.hot');
el.className = 'cool';
var els = document.querySelectorAll('li.hot');
els[1].className = 'cool';
循环遍历NodeList
var hotItem = document.querySelectorAll('li.hot');
for(var i=0;i<hotItems.length;i++){
hotItems[i].className='cool';
}
对前后兄弟节点的操作
html代码:
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
js代码:
// Select the starting point and find its siblings.
var startItem = document.getElementById('two');
var prevItem = startItem.previousSibling;
var nextItem = startItem.nextSibling;
// Change the values of the siblings' class attributes.
prevItem.className = 'complete';
nextItem.className = 'cool';
对子节点操作
html代码同上
js代码:
// Select the starting point and find its children.
var startItem = document.getElementsByTagName('ul')[0];
var firstItem = startItem.firstChild;
var lastItem = startItem.lastChild;
// Change the values of the children's class attributes.
firstItem.className = 'complete';
lastItem.className = 'cool';
最新文章
- 海拔高度图*.dem文件的读取—vtkDEMReader
- java 深入技术四(Set)
- Linux TOP命令 按内存占用排序和按CPU占用排序
- LVM在线扩容
- 360浏览器下jquery.validate.unobtrusive的日期验证问题
- RDP协议
- C语言指针总结
- jsPlumb
- BindingFlags说明
- application/x-www-form-urlencoded等字符编码的解释说明
- MEMS陀螺仪(gyroscope)的工作原理
- java.util.Timer类似于闹钟定时做任务
- Unity 粒子系统 特效 移除屏幕外面后再移回来 不会显示问题
- mysql数据类型double和decimal区别详解
- Android的Environment.getExternalStorageState的使用
- 【BZOJ2959】长跑(Link-Cut Tree,并查集)
- 服务部署到Swarm Cluster中
- 20165313 《Java程序设计》第二周学习总结
- 单元测试中用@Autowired 报null (空指针异常)
- Android开发之使用DefaultHandler处理XML数据