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 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
JavaScript设置FieldSet展开与收缩
May 15 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
浅析Angular2子模块以及异步加载
Apr 24 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
vue+element实现打印页面功能
May 20 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 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的ZipArchive类用法实例
2014/10/20 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
js输出列表实现代码
2010/09/12 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
js数组实现权重概率分配
2017/09/12 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
详解React 元素渲染
2020/07/07 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
python文件操作整理汇总
2014/10/21 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
对python中list的五种查找方法说明
2020/07/13 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
生物科学专业个人求职信范文
2013/12/07 职场文书
实习单位接收函
2014/01/11 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
品德评语大全
2014/05/05 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书