JS选取DOM元素常见操作方法实例分析

本文实例讲述了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

补充：add和remove方法不允许链式操作，因为返回的都是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操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript 获取HTML DOM父、子、临近节点

    在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i

  • 详解JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

  • 在js代码拼接dom对象到页面上的模板总结

    每次在js代码里面想动态的拼个dom,然后append到页面上,都是各种麻烦, 要是可以直接在jsp页面弄个隐藏的model那是很好的,用js方法里面的clone方法也是很好的,还可以给不同部分set值. 为了以后简单点,我就把模板摆着,方便后面用得着的时候,复制粘贴. function fillDialog(dataArray) { var target = $("#dialogTarget"); target.empty(); for (var i = 0; i < data

  • JavaScript学习笔记之DOM基础操作实例小结

    JavaScript学习笔记之DOM基础操作实例小结

    本文实例讲述了JavaScript DOM基础操作.分享给大家供大家参考,具体如下: 一.子节点 1.元素节点.文本节点 实例01 html <body> <ulid="ul1"> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4<li></li> 文本节点5<li></li> 文本节点6&

  • JavaScript学习笔记之DOM操作实例分析

    本文实例讲述了JavaScript学习笔记之DOM操作.分享给大家供大家参考,具体如下: 一.DOM概念 1. "D":Docment,指的是文档 2. "O":Object,指的是对象,在javascript有三种对象:用户定义对象.内建对象(JavaScript语言对象.如Math,Array).宿主对象(浏览器对象) 3. "M":Model,值得是Model,某种事物的表现形式 二.节点 1. 元素节点 :<body> <

  • JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】

    本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属

  • JS实现DOM删除节点操作示例

    JS实现DOM删除节点操作示例

    本文实例讲述了JS实现DOM删除节点操作.分享给大家供大家参考,具体如下: 一 介绍 删除节点通过使用removeChild()方法来实现. removeChild()方法用来删除一个子节点. obj. removeChild(oldChild) oldChild:表示需要删除的节点. 二 应用 删除节点,本示例将通过DOM对象的removeChild()方法,动态删除页面中所选中的文本. 三 代码 <!DOCTYPE html> <html> <head> <t

  • 学习JS中的DOM节点以及操作

    DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!! 一.DOM树的节点 1. DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图

  • JavaScript DOM元素常见操作详解【添加、删除、修改等】

    本文实例讲述了JavaScript DOM元素常见操作.分享给大家供大家参考,具体如下: DOM概念 DOM(Document Object Model):文档对象模型. 通过开发者工具的Elements标签页可以查看 通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点 整个文档是由一系列节点对象组成的一棵树. 节点(Node)包括元素节点(1).属性节点(2).文本节点(3)(1..2..3..代表节点类型)_ var th1= document.getElementByI

  • JS选取DOM元素常见操作方法实例分析

    本文实例讲述了JS选取DOM元素常见操作方法.分享给大家供大家参考,具体如下: JS选取DOM元素的方法 注意:原生JS选取DOM元素比使用jQuery类库选取要快很多 1.通过ID选取元素 document.getElementById('myid'); 2.通过CLASS选取元素 document.getElementsByClassName('myclass')[0]; 3.通过标签选取元素 document.getElementsByTagName('mydiv')[0]; 4.通过NA

  • JS选取DOM元素的简单方法

    摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今天试了下各种选取元素的方法的速度,用原生的方法比jQuery要快差不多8倍,IE8是最慢的,IE9的速度差不多是IE8的3倍,Chrome的表现最好,其次是Firefox) 选取文档元素的方法: 1.通过ID选取元素(getElementById) 1)使用方法:document.getElemen

  • JS添加或删除HTML dom元素的方法实例分析

    本文实例讲述了JS添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <div id="div1"> <p id="p1">这是一个段落.</p> <p id="p2">这是另一个段落.</p> </div> <scr

  • jquery对元素的基本操作实例分析

    jQuery简介 jQuery是JS的一个类库,对JS中的某些功能进行封装,让DOM操作变得简单,使代码简洁,易于使用,且支持链式写法,兼容性好. jQuery的设计思想和主要用法即:选择某个网页元素,然后对其进行一些操作. jQuery的特别之处在于:用jQuery获取对应元素后,,它不返回这些对应的元素,返回的都是jQuery对象(jQuery构造出来的对象),而此对象可以操作这些对应的元素. jQuery能实现的功能JS一定能实现,反之则不一定. 令window.jQuery = wind

  • 使用js获取伪元素的content实例

    使用js获取伪元素的content实例

    在测试过程中有时候会遇到反爬虫机制,一些元素会使用伪元素,这样在定位元素的时候会定位不到,这时候就要使用js来帮助定位,获取到想要的元素 下面是部分代码 //使用js获取伪元素的content String script = "return window.getComputedStyle(document.querySelector('.myTips'),':after').getPropertyValue('content')"; JavascriptExecutor js = (J

  • 封装获取dom元素的简单实例

    示例如下: <script> //函数: 反复执行的代码块 //全局只有一个对象,防止全局变量污染 var itcast = { getElen : { tag : function(tag){ return document.getElementsByTagName(tag); }, id : function(id){ return document.getElementById(id); } }, css : { addStyle : function(){}, removeStyle

  • Js操作DOM元素及获取浏览器高宽的简单方法

    在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaS

  • Vue.js单向绑定和双向绑定实例分析

    本文实例讲述了Vue.js单向绑定和双向绑定.分享给大家供大家参考,具体如下: 1.单向绑定 单向数据绑定的实现思路: ① 所有数据只有一份 ② 一旦数据变化,就去更新页面(只有data-->DOM,没有DOM-->data) ③ 若用户在页面上做了更新,就手动收集(双向绑定是自动收集),合并到原有的数据中. <!DOCTYPE html> <html> <head></head> <body> <div id="ap

  • javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】

    javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】

    本文实例讲述了javascript数组常见操作方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 数组的方法</title> <script> var arr=[1,3,4] var arr1=["a",&quo

随机推荐