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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 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/09/29 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
python 定时修改数据库的示例代码
2018/04/08 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python2与Python3的区别点整理
2019/12/12 Python
python中有帮助函数吗
2020/06/19 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
如何写早恋检讨书
2014/09/10 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
律师授权委托书范本
2014/10/07 职场文书
教师个人考察材料
2014/12/16 职场文书
教师党员承诺书2015
2015/01/21 职场文书
刑事案件上诉状
2015/05/23 职场文书