javascript基础之查找元素的详细介绍(访问节点)

当然这些选择器都是jQuery扩展的一些方法,那么使用原生js时要怎样来查找元素呢?今天就来简单梳理下。

DOM定义了多种查找元素的方法,除了我们常用的getElementById(),还有getElementsByTagName()和getElementsByName()。使用这几种方法方法我们可以查找html文档中的任意html元素。

getElementById()
首先来看下getElementById(),这个方法很简单,只需在参数中传入html标签的id属性值即可,由于html页面中的id具有唯一性,因此该方法返回的是单个元素对象。例如:


复制代码 代码如下:

<span id="span1">span标签</span>
 <script>
     var oSpan = document.getElementById('span1'); //查找span元素
     alert(oSpan.innerHTML); //弹出span标签中的内容
 </script>

getElementsByTagName()
getElementsByTagName()参数需传入的是一个html标签名,它返回的是html文档中所有与之匹配的元素列表,这个列表具有部分数组的特性,因此也称其为类数组。当我们想操作某个特定的元素时,我们可以使用数组索引或item()来实现,例如:


复制代码 代码如下:

<script>
     var oDiv = document.getElementsByTagName('div'); //查找所有div元素,返回一个元素列表
     /* 操作特定元素 */
     alert(oDiv[0].innerHTML) //弹出第一个div中的内容
     alert(oDiv.item(1).innerHTML) //弹出第二个div中的内容
 </script>

当然我们还可以通过length属性来循环遍历节点:


复制代码 代码如下:

<script>
     var oDiv = document.getElementsByTagName('div');
     for(var i = 0; i < oDiv.length; i++){
         //do something
     }
 </script>

getElementsByName()
getElementsByName()常用来查找表单元素,参数中传入html标签的name属性值,由于文档中多个html标签的name值可能相同(如单选按钮),因此该方法返回的也是一个元素列表。具体操作方法与getElementsByTagName()类似,这里不在赘述。


复制代码 代码如下:

<script>
     var oIpt= document.getElementsByName('city'); //查找name值为city的元素
     alert(oIpt[0].value);
     alert(oIpt.item(1).value);
 </script>

getByClass()
虽然使用上面的几种方法已经可以满足常见需求,但是为了更方便的访问元素节点,我们一般会自己封装一个通过class来查找元素的方法:


复制代码 代码如下:

<script>
     /** getByClass **/
     function getByClass(oParent, sClass){
         var aEle = oParent.getElementsByTagName('*');
         var re = new RegExp('\\b' + sClass + '\\b');
         var aResult = [];
         for(var i = 0; i < aEle.length; i++){
             if(re.test(aEle[i].className)){
                 aResult.push(aEle[i]);
             }
         }
         return aResult;
     }
 </script>

getByClass需传入两个参数,其中oParent为参考节点,即在oParent节点中查找元素,sClass为要查找的元素class的值。通过循环将oParent内的html标签的class值与传入的sClass值一一对比,符合条件的会存入到数组aResult中,最后再返回这个数组。

另外这里之所以用正则来匹配而没有直接用aEle[i].className == sClass,是避免标签的class值为多个时,出现匹配失效的情况。

时间: 2013-07-02

javascript删除一个html元素节点的方法

本文实例讲述了利用原生javascript实现删除一个指定的html元素的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们

JS获取节点的兄弟,父级,子级元素的方法

先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 复制代码 代码如下: <div id="test"><div></div><div></div></div> 原生的JS获取ID为test的元素下的子元素.可以用: var a = docuemnt.getElementByI

用JavaScript实现用一个DIV来包装文本元素节点

当你的应用需要依赖某个特定的JavaScript类库时,你无意中总会试图解决某些类库自身的问题,而不是语言的问题.就比如当我试图将文本(可能也包含HTML元素)用一个DIV元素包起来时.假设有以下HTML: This is some text and <a href="">a link</a> 这时候如果想把它转换为下面这样: <div>This is some text and <a href="">a link&l

javascript删除元素节点removeChild()用法实例

本文实例讲述了javascript删除元素节点removeChild()用法.分享给大家供大家参考.具体分析如下: 操作DOM节点的方法:removeChild(),移除子节点,那么可以变通一下来实现移除指定的节点,我们可以先去找到要删除节点的父节点,然后在父节点中运用removeChild来移除我们想移除的节点. function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentEleme

JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法.分享给大家供大家参考,具体如下: /** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型,上一个(1)or下一个(0) * @return 返回查找到的元素Dom对象,无则返回null */ function getNearEle(ele, type) { type = type == 1 ? "previousSibling" : "nextSi

js创建元素(节点)示例

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

Js 获取HTML DOM节点元素的方法小结

如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过)1. 通过顶层document节点获取:          (1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点.             如今,已经出现了如proto

js遍历子节点子元素附属性及方法

复制代码 代码如下: // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); var childs = usernameEle.childNodes; for(var i = childs.length - 1; i >= 0; i--) { usernameEle.removeChild(childs[i]); } var username = document.createTextNod

一个获取第n个元素节点的js函数

一个获取第n个元素节点的函数,现在只能通过html标签获取元素,功能还不完善 演示:html <ul id="list"> <li>1<button>a</button></li> <li>2<button>b</button><button>o</button></li> <p>test</p> <li>3<bu

JS 使用for循环遍历子节点查找元素

这篇文章主要介绍了JS 使用for循环配合数组遍历子节点查找元素 function nextChildNode(node,clazz,tagName){ var count= node.childElementCount; for(var i=0;i<count;i++){ if(node==undefined || node.children[i]==undefined){ continue; } if(clazz){ if(node.children[i].getAttribute('cla

jQuery循环遍历子节点并获取值的方法

本文实例讲述了jQuery循环遍历子节点并获取值的方法.分享给大家供大家参考,具体如下: Html代码部分: <div class="left_tree_ad_btn_container"> <ul> <li class="tree_ad_btn_bg"><img src="/images/insurance/3lianad_small.jpg" /> </li> </ul>

js数组循环遍历数组内所有元素的方法

例,for(){}遍历数组 复制代码 代码如下: <script type="text/javascript"> <!--var arr = new Array(13.5,3,4,5,6);for(var i=0;i<arr.length;i++){ arr[i] = arr[i]/2.0;}alert(arr); //--> </script> 例,for in循环遍历数组 复制代码 代码如下: <html><body>

JS使用for循环遍历Table的所有单元格内容

JS遍历Table的所有单元格内容思路是遍历Table的所有Row,遍历Row中的每一列,获取Table中单元格的内容 function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row for (var j

聊聊python中的循环遍历

python之循环遍历 关于循环遍历大家都知道,不外乎for和while,今天我在这写点不一样的循环和遍历.在实践中有时会遇到删除列表中的元素,那么循环遍历列表删除指定元素该怎么做呢? 还是直接上代码看案例吧: import time # 删除下面列表中所有张姓元素,输出的结果应该是['李老大','李老二'] lst = ['张老大', '张老二', '李老大', '张老三', '李老二']*10000 # 直接for循环遍历列表,remove需要删除的元素 def del1(lst): for

jquery的父、子、兄弟节点查找,节点的子节点循环方法

jQuery.parent(expr)           //找父元素 jQuery.parents(expr)          //找到所有祖先元素,不限于父元素 jQuery.children(expr)        //查找所有子元素,只会找到直接的孩子节点,不会返回所有子孙 jQuery.contents()            //查找下面的所有内容,包括节点和文本. jQuery.prev()                //查找上一个兄弟节点,不是所有的兄弟节点 jQue

JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS节点插入</title> <script> function showinsert(){ //添加子节点 var str=document.getElem

JS中appendChild追加子节点无效的解决方法

JS中appendChild追加子节点无效 有这么一段代码: let divs = document.getElementsByClassName('test'); let btn = document.createElement('div'); for(let i=0;i<divs.length;i++){ divs[i].appendChild(btn); } 表面上这段代码为每个 class属性为 test的元素添加一个 div子元素. 看起来没有什么问题,但是执行完之后却发现子元素并没有

JS获取子节点、父节点和兄弟节点的方法实例总结

本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要按数组的形式访问. var a = document.getElementById("test").getElementsByTagName("div"); 2. 通过childNo