javascript基础之查找元素的详细介绍(访问节点)
2023-06-13 09:15:03 时间
当然这些选择器都是jQuery扩展的一些方法,那么使用原生js时要怎样来查找元素呢?今天就来简单梳理下。
DOM定义了多种查找元素的方法,除了我们常用的getElementById(),还有getElementsByTagName()和getElementsByName()。使用这几种方法方法我们可以查找html文档中的任意html元素。
getElementById()
首先来看下getElementById(),这个方法很简单,只需在参数中传入html标签的id属性值即可,由于html页面中的id具有唯一性,因此该方法返回的是单个元素对象。例如:
复制代码代码如下:
DOM定义了多种查找元素的方法,除了我们常用的getElementById(),还有getElementsByTagName()和getElementsByName()。使用这几种方法方法我们可以查找html文档中的任意html元素。
<spanid="span1">span标签</span>
<script>
varoSpan=document.getElementById("span1");//查找span元素
alert(oSpan.innerHTML);//弹出span标签中的内容
</script>
<script>
varoDiv=document.getElementsByTagName("div");//查找所有div元素,返回一个元素列表
/*操作特定元素*/
alert(oDiv[0].innerHTML)//弹出第一个div中的内容
alert(oDiv.item(1).innerHTML)//弹出第二个div中的内容
</script>
当然我们还可以通过length属性来循环遍历节点:
<script>
varoDiv=document.getElementsByTagName("div");
for(vari=0;i<oDiv.length;i++){
//dosomething
}
</script>
<script>
varoIpt=document.getElementsByName("city");//查找name值为city的元素
alert(oIpt[0].value);
alert(oIpt.item(1).value);
</script>
<script>
/**getByClass**/
functiongetByClass(oParent,sClass){
varaEle=oParent.getElementsByTagName("*");
varre=newRegExp("\\b"+sClass+"\\b");
varaResult=[];
for(vari=0;i<aEle.length;i++){
if(re.test(aEle[i].className)){
aResult.push(aEle[i]);
}
}
returnaResult;
}
</script>
getByClass需传入两个参数,其中oParent为参考节点,即在oParent节点中查找元素,sClass为要查找的元素class的值。通过循环将oParent内的html标签的class值与传入的sClass值一一对比,符合条件的会存入到数组aResult中,最后再返回这个数组。
另外这里之所以用正则来匹配而没有直接用aEle[i].className==sClass,是避免标签的class值为多个时,出现匹配失效的情况。
相关文章
- JavaScript 数组常用属性和方法(下)
- JavaScript 闭包
- JavaScript学习总结(十七)——Javascript原型链的原理详解编程语言
- JavaScript学习总结(九)——Javascript面向(基于)对象编程详解编程语言
- javascript-TreeView父子联动效果保持节点状态一致
- javascript下查找父节点的简单方法
- 兼容FireFox用javascript写的一个画图函数
- Javascript常用运算符(Operators)-javascript基础教程
- Javascript阻止javascript事件冒泡,获取控件ID值
- Asp.net页面调用javascript变量的值
- javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
- JavaScript中实现块作用域的方法
- Javascript中的&&和||使用小结
- javascript得到变量类型的函数
- 扩展javascript的Date方法实现代码(prototype)
- JavaScript类型的包装对象(TypedWrappers)
- JavaScript中常用的运算符小结
- 常用一些Javascript判断函数
- JavaScript高级程序设计阅读笔记(十六)javascript检测浏览器和操作系统-detect.js
- javascript中节点的最近的相关节点访问方法
- javaScript(JS)替换节点实现思路介绍
- JavaScript中使用ActiveXObject操作本地文件夹的方法
- javascript中HTMLDOM操作详解
- Javascript基础教程之JavaScript语法
- 用javascript读取xml文件读取节点数据