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)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
JS实现九宫格拼图游戏
Jun 28 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 中执行系统外部命令
2006/10/09 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
python语言中有算法吗
2020/06/16 Python
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
应用服务器有那些
2012/01/19 面试题
毕业生的自我评价范文
2013/12/31 职场文书
三八妇女节活动总结
2014/05/04 职场文书
演讲稿的写法
2014/05/19 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
房屋出租委托书格式
2014/09/23 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
幸福来敲门观后感
2015/06/04 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书