1、打开编辑工具editplus,点击editplus菜单栏上的File-->New -->HTML page。
2、新建好html页面后,editplus自动帮助我们生成了框架,先把title修改下,然后保存。
3、在body区域里添加了子,父,祖父三级div,代码如下。
4、演示代码写好后,打开浏览器,在浏览器上运行看看效果。
5、下面在head区域里添加实现js获取最高父级的代码,代码具体如下,这样利用了while循环来判断的。
6、实现好后,保存代码,此时再到浏览器上刷新访问,看下,此时d出对话框告诉最后父级是zufu。
JS认为HTML文件会被浏览器解析为文档流,写在HTML里面的所有标签元素都可以从文档流中读取到。基于这个理论,JS定义了一个document对象,专门用来处理文档流。
要想获取一个元素,有两种方式:一种是根据元素的类名(class属性值),另一种是根据元素的ID。假设有一个input元素,JS获取该元素的方式如下:
<input class="isInput" id="input_first">
var element=documentgetElementByClass("isInput")[0];或者
var element=documentgetElementById("input_first");
需要注意的是,根据类名获取到的是一个数组,必须要通过下标才能获取到具体的某个元素。而根据ID获取到的则是具体的元素,所以常用的方式是用ID来获取。
一、获取img标签的src属性值
var imgStr = "<p><img src='>
js获取html添加的元素属性方法:先给这个元素设个ID,再用js获取这个ID的属性,即元素属性,实现案例如下:
<a id="link" href="前端学习" title="测试" blogname="前端开发">Web开发</a>
JS代码:
var ka=documentgetElementByI d("link");
alert(kagetAttribute("id"));//获取到Html标签的自定义属性
alert(kaid);//获取到Html标签常规属性用
<body>
<table class="tbeTarget" id="tbeTarget">
<tr>
<td class="tips1" id="tips1"> 12345abcd </td>
<td class="tips2" id="tips2"> 23456fvbg </td>
</tr>
</table>
<input type="button" onclick="getTdValue();" value="GETTDVALUE">
</body>
获取标签建议还是用ID来获取,简单方便
用getElementById("tbeTarget")可获取table
用getElementById("tips2")可获取到tips2
有ID的话,getElementById("tbeTarget")tips2也能得到你要的 tips2
特殊情况实在不能用ID时,也可用getElementsByTagName
var o=documentgetElementsByTagName("table"); 这个就获取到了所有的table标签,返回值是数组类型的
像你这个代码的话,只有个一个table,那 o[0]就是你要的table标签了
实在要用getElementByClassName的话,
var o=documentgetElementByClassName("tbeTarget");
var ot=ogetElementsByTagName("td"); //直接用ogetElementByClassName("tips2")应该也可以
for(var i=0;i<otlength;i++){
if(ot[i]class=="tips2"){
alert(ot[i]); //在这if里面,用ot[i]调用到的就是你要的 tips2了
}
}
在指定的div内使用getElementsByTagName获取元素的主要代码为:
getElementById(div_id)getElementsByTagName(tag_name);示例如下:
1、HTML结构
<div id="test">id=test: <span>Glen</span><span>Tane</span><span>John</span><span>Ralph</span>
</div>
<div id="test1">
id=test0: <span>Glen1</span><span>Tane1</span><span>John1</span><span>Ralph1</span>
</div>
<input type='button' value='获取id为test的div下的span' onClick="fun()"/>
2、javascript代码
function fun(){obj = documentgetElementById("test")getElementsByTagName("span");
str= [];
for(i=0;i<objlength;i++){
strpush(obj[i]innerHTML);
}
alert(str);
}
3、效果演示
需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:indexhtml,填充问题基础代码。
2、在indexhtml中的<script>标签中,输入js代码:var id = $('div')attr('id');documentbodyinnerText = id;。
3、浏览器运行indexhtml页面,此时取到了div的id并成功打印出了。
以上就是关于js获取父级元素全部的内容,包括:js获取父级元素、js怎么获取一个元素、js正则 获取元素属性值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)