思路:根据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、前后对比效果如下

js如何获取某id的子标签的更多相关文章

  1. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

  2. JS如何获取多个相同class标签并分别再输出各自的文本

    function getClass(boo) { var span = $("span.w");//获取所有的span标签 <span class="w" ...

  3. 原生js通过最外层id获取下面指定的子元素

    需求:在vue中使用v-for循环出来的元素,设置动态id,之后获取下面的所有textarea标签 template: <table cellpadding = 2 v-for="(i ...

  4. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  5. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  6. 总结:如何获取同一个DIV里的多个不同子标签的值,并赋值给input?

    这个问题说起来简单,但对于新手来说,也着实卡了好久,并且我在网上搜了好久没能找到合适的答案, 于是去博问问了一下,得到许多大神们的帮助与回答,接下来我就总结一下能够实现这个效果的几种方法,既为了自己更 ...

  7. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  8. JS如何获取PHP循环中的ID

    JS如何获取PHP循环中的ID  kaalrz 二路公交车    结帖率:83.33%   首先抱歉,因为昨天那帖图片几次都不能用,修改到不能再次修改,今天早上回帖又提示没有这个帖,只好重发一次. 如 ...

  9. JS之获取子节点

    在JS中获取子节点有以下几种方法: firstElementChild.firstChild.childNodes和children 我们通过一个例子来分析这几种方法的区别(获取div下的p标签) 输 ...

随机推荐

  1. 洛谷——P2420 让我们异或吧

    P2420 让我们异或吧 题目描述 异或是一种神奇的运算,大部分人把它总结成不进位加法. 在生活中…xor运算也很常见.比如,对于一个问题的回答,是为1,否为0.那么: (A是否是男生 )xor( B ...

  2. FileInputStream实现读取文件内容并输出到屏幕上

    java输入输出流是站在程序的角度来说的.从文件中读取数据用输入流,向文件中写数据用输出流. package com.janson.day20180827; import java.io.FileIn ...

  3. MySQL练习题及答案(复习)

    新建一个叫做 review 的数据库,将测试数据脚本导进去.(可以使用Navicat查询功能) /* Navicat MySQL Data Transfer Source Server : DB So ...

  4. Error:Cannot find bean: "org.apache.struts.taglib.html.BEAN" in any scope

    原因:html标签和struts标签混用,或者表单元素外面没有<html:form>标签包裹. 解决:统一标签 <html:form action="/login.do&q ...

  5. day21 02 包的进阶

    day21 02 包的进阶 1._init_.py文件的操作---导入包 根据day21 01 包的初识,建立的glance包,直接import glance后通过“包点包..点方法”是不能执行所要的 ...

  6. 51nod 1096 距离之和最小 1108 距离之和最小 V2

    [题解] 很显然在一条坐标轴上到各个点距离之和最小的点就是它们的中位数.怎么证明呢?我们假设现在找的某个点x左边有a个点,右边有b个点(a>b).我们把x向左移动d个单位,并保证x左边依然有a个 ...

  7. ansible plugins简介

    ansible插件是增强ansible的核心功能的代码片段,ansible使用插件架构来实现丰富,灵活和可扩展的功能集. Ansible提供了许多方便的插件,您可以轻松编写自己的插件. 下边简单介绍A ...

  8. RabbitMQ-linux安装rabbitmq(二)

    说明 本地装了个虚拟机模拟集群 所以记下安装步骤 安装Erlang 安装类库 yum -y install ncurses-devel yum -y install openssl-devel yum ...

  9. [luoguP1029] 最大公约数和最小公倍数问题(数论)

    传送门 一.暴力枚举(加了点优化) #include <cstdio> int x, y, ans; inline int gcd(int x, int y) { return !y ? ...

  10. 工资(money)

    (money/money.in/money.out) 时限1000ms 内存256MB 聪哥在暑假参加了打零工的活动,这个活动分为n个工作日,每个工作日的工资为Vi.有m个结算工钱的时间,聪哥可以自由 ...