js如何获取某id的子标签？

Posted 2023-04-03

比如获取<div id=father><a class="style1" href="#"></a></div>
里的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;

参考技术A

思路：根据id获取父对象，然后使用childNodes获取所有子对象数组，关键代码：

document.getElementById(div_id).childNodes;   // 子对象数组

实例演示：点击按钮将为id为test的div标签的所有子标签添加red类，即字体显示为红色

1、html结构

<div id = "test">
<a href="#">我是超链接</a>
<input type="text" value="我是文本框">
<div>我是子div</div>
</div>
<input type='button' value='设置子元素样式' onclick="fun()"/>

2、css样式

.redcolor:red !important;

3、javascript代码

function fun()
objs = document.getElementById("test").childNodes;
for(k in objs)
objs[k].className = "red";

4、前后对比效果如下

参考技术B document.getElementById('father').getElementsByTagName('a')
你这样取到的是一个数组啊，数组没有className属性啊，是这个数组中的<a>标签的属性,取哪个数组元素就直接连[n]就可以了
另外问一下：楼上的考虑到这个<div id="father">下还有别的标签了吗？ 参考技术C document.getElementById("father").childNodes[0].className

这个语句就可以获取到class了，得到的就是“style1”，修改这个属性也是可以的。

希望能帮助到你 参考技术D 教你个JQuery的，简单实用$("#father a").addClass("style2");

js如何获取某id的子标签

思路：根据id获取父对象，然后使用childNodes获取所有子对象数组，关键代码：

document.getElementById(div_id).childNodes;   // 子对象数组

实例演示：点击按钮将为id为test的div标签的所有子标签添加red类，即字体显示为红色

1、HTML结构

<div id = "test">
	<a href="#">我是超链接</a>
	<input type="text" value="我是文本框">
	<div>我是子div</div>
</div>
<input type=‘button‘ value=‘设置子元素样式‘ onclick="fun()"/>

2、css样式

.red{color:red !important;}

3、javascript代码

function fun(){
	objs = document.getElementById("test").childNodes;
	for(k in objs)
		objs[k].className = "red";
}

4、前后对比效果如下