js如何获取某id的子标签? 65
里的class属性并修改?
document.getElementById('father').getElementsByTagName('a').className='style2'这样好像不对吧
强调:是想要获取子标签的方法。不要告诉我直接给a标签里付个id 展开
1、var a = document.getElementById("test").getElementsByTagName("div");
代码的test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。
2、var b =document.getElementById("test").childNodes;
使用childNodes获取子节点的时候,childNodes返回的是子节点的集合,是一个数组的格式。他会把换行和空格也当成是节点信息。
扩展资料:
js获取父节点的方式:
1、parentNode获取父节点
获取的是当前元素的直接父元素。parentNode是w3c的标准。
var p = document.getElementById("test").parentNode
2、parentElement获取父节点
parentElement和parentNode一样,只是parentElement是ie的标准。
var p1 = document.getElementById("test").parentElement;
3、offsetParent获取所有父节点
一看offset我们就知道是偏移量 其实这个是于位置有关的上下级 ,直接能够获取到所有父亲节点, 这个对应的值是body下的所有节点信息。
var p2 = document.getElementById("test").offsetParent;
思路:根据id获取父对象,然后使用childNodes获取所有子对象数组,关键代码:
1 | document.getElementById(div_id).childNodes; // 子对象数组 |
实例演示:点击按钮将为id为test的div标签的所有子标签添加red类,即字体显示为红色
1、HTML结构
1 2 3 4 5 6 | < div id = "test"> < a href = "#" >我是超链接</ a > < input type = "text" value = "我是文本框" > < div >我是子div</ div > </ div > < input type = 'button' value = '设置子元素样式' onclick = "fun()" /> |
2、css样式
1 | . red { color : red !important ;} |
3、javascript代码
1 2 3 4 5 | function fun(){ objs = document.getElementById( "test" ).childNodes; for (k in objs) objs[k].className = "red" ; } |
4、前后对比效果如下
你这样取到的是一个数组啊,数组没有className属性啊,是这个数组中的<a>标签的属性,取哪个数组元素就直接连[n]就可以了
另外问一下:楼上的考虑到这个<div id="father">下还有别的标签了吗?
这个语句就可以获取到class了,得到的就是“style1”,修改这个属性也是可以的。
希望能帮助到你