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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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/01/23 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
php操作xml
2013/10/27 PHP
php读取csc文件并输出
2015/05/21 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
javascript基本语法分析说明
2008/06/15 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
Python脚本实现网卡流量监控
2015/02/14 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Flask框架web开发之零基础入门
2018/12/10 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
销售高级职员求职信
2013/10/29 职场文书
志愿者活动总结报告
2014/06/27 职场文书
硕士学位论文评语
2014/12/31 职场文书
教师读书笔记
2015/06/29 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers