JS选取DOM元素常见操作方法实例分析
本文实例讲述了JS选取DOM元素常见操作方法。分享给大家供大家参考,具体如下:
JS选取DOM元素的方法
注意:原生JS选取DOM元素比使用jQuery类库选取要快很多
1、通过ID选取元素
document.getElementById('myid');
2、通过CLASS选取元素
document.getElementsByClassName('myclass')[0];
3、通过标签选取元素
document.getElementsByTagName('mydiv')[0];
4、通过NAME属性选取元素(常用于表单)
document.getElementsByName('myname')[0];
JS修改CSS样式
document.getElementById('myid').style.display = 'none';
JS修改CLASS属性
document.getElementById('myid').className = 'active';
如果有多个CLASS属性,即用空格隔开
document.getElementById('myid').className = 'active div-1';
移除该元素上的所有CLASS
document.getElementById('myid').className = '';
注意:使用classList会优于使用className
document.getElementById('myid').classList.item(0);//item为类名的索引 document.getElementById('myid').classList.length;//只读属性 document.getElementById('myid').classList.add('newClass');//添加class document.getElementById('myid').classList.remove('newClass');//移除class document.getElementById('myid').classList.toggle('newClass');//切换,有则移除,没有则添加 document.getElementById('myid').classList.contains('newClass');//判断是否存在该class
补充:add
和remove
方法不允许链式操作,因为返回的都是undefined,其次,也不允许同时添加或删除多个class,可以自行扩展一下
DOMTokenList.prototype.adds = function(tokens){ tokens.split(' ').forEach(function(token){ this.add(token); }).bind(this)); return this; }; var clList = document.body.classList; clList.adds('a b c').toString(); //a b c
JS修改文本
document.getElementById('myid').innerHTML = '123';
JS创建元素并向其中追加文本
var newdiv = document.createElement('div'); var newtext = document.createTextNode('123'); newdiv.appendChild(newtext); document.body.appendChild(newdiv);
同理:removeChild()
移除节点,并返回节点
cloneNode()
复制节点
insertBefore()
插入节点(父节点内容的最前面)
注意:insertBefore()
有两个参数,第一个是插入的节点,第二个是插入的位置
例子:
var list = document.getElementById('myList'); list.insertBefore(newItem,list.childNodes[1]); //插入新节点newItem到list的第二个子节点
JS返回所有子节点对象childNodes
var mylist = document.getElementById('myid'); for(var i=0,i<mylist.childNodes.length;i++){ console.log(mylist.childNodes[i]); }
firstChild返回第一个子节点
lastChild返回最后一个子节点
parentNode返回父节点对象
nextSibling返回下一个兄弟节点对象
previousSibling返回前一个兄弟节点对象
nodeName返回节点的HTML标记名称
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
- TensorFlow-3: 用 feed-forward neural network 识别数字
- TensorFlow-4: tf.contrib.learn 快速入门
- TensorFlow-5: 用 tf.contrib.learn 来构建输入函数
- 前后端分离之vue2.0+webpack2 实战项目 -- html模板拼接
- 抛弃vue-resource拥抱axios
- TensorFlow-6-TensorBoard 可视化学习
- TensorFlow-7-TensorBoard Embedding可视化
- windows下nginx的安装及使用方法入门
- Scala Turtuial-容器(集合)类型
- Scala Turtuial-基本语法
- C++ Virtual And Pure Virtual Explained
- 搭建分布式Spark计算平台
- 像tomcat容器那样自定义一个 Classloader
- react+redux+webpack教程5
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Anaconda使用命令
- 最大连续子数组
- markdown编辑器实现代码高亮
- LeetCode - 198 简单动态规划 打家劫舍
- Jaskson精讲第7篇-JsonTypeInfo注解在类继承关系下的使用
- 《剑指Offer 1.二维数组中的查找》2019-03-25
- Elasticsearch:Dynamic mapping
- 设计模式《单例设计模式》
- 《0-1 背包问题》
- 使用分治思想 求数组中的最大和最小值
- python 入门笔记[语法基础(下)]
- Java 成员变量和属性的区别
- xmuC语言程序实践week 1 大作业
- 《01-背包问题-点菜》
- 模拟赛 2018 Benelux Algorithm Programming Contest (BAPC 18)(部分题)