JS选取DOM元素常见操作方法实例分析


Posted in Javascript onDecember 10, 2018

本文实例讲述了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

补充:addremove方法不允许链式操作,因为返回的都是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 相关文章推荐
JScript的条件编译
May 29 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 Javascript
微信小程序分享海报生成的实现方法
Dec 10 #Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 #jQuery
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 #Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 #jQuery
微信小程序与后台PHP交互的方法实例分析
Dec 10 #Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 #Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 #jQuery
You might like
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PDO::getAttribute讲解
2019/01/28 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python常用小技巧总结
2015/06/01 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
创建Django项目图文实例详解
2019/06/06 Python
python脚本开机自启的实现方法
2019/06/28 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python的缺点和劣势分析
2019/11/19 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
python opencv实现图像配准与比较
2021/02/09 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
酒店个人求职信范文
2014/01/25 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书