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 相关文章推荐
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
input框中的name和id的区别
Nov 16 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 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
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python使用filetype精确判断文件类型
2017/07/02 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
儿童python练习实例
2018/05/27 Python
Python requests模块实例用法
2019/02/11 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
2013英文求职信模板范文
2013/11/15 职场文书
项目专员岗位职责
2013/12/04 职场文书
驾驶员岗位职责
2014/01/29 职场文书
总经理司机职责
2014/02/02 职场文书
财务会计自荐信范文
2014/02/21 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫
Mysql 一主多从的部署
2022/05/20 MySQL