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 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
Vue常用指令详解分析
Aug 19 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 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
如何选购合适的收音机
2021/03/01 无线电
PHP面向对象分析设计的经验原则
2008/09/20 PHP
深入php list()函数的详解
2013/06/05 PHP
php画图实例
2014/11/05 PHP
php字符串截取函数用法分析
2014/11/25 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
javascript arguments使用示例
2014/12/16 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Python numpy 常用函数总结
2017/12/07 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
Python实现EM算法实例代码
2020/10/04 Python
一般党员对照检查材料
2014/09/24 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Python基础之函数嵌套知识总结
2021/05/23 Python
Python内置数据类型中的集合详解
2022/03/18 Python