首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在父div内单击按钮时获取多个子div文本

,可以通过以下步骤实现:

  1. 首先,给父div添加一个唯一的id,例如id="parentDiv"。
  2. 在父div内部,添加多个子div,并给每个子div添加一个共同的class,例如class="childDiv"。
  3. 在父div内部,添加一个按钮元素,例如<button id="btn">点击获取子div文本</button>。
  4. 使用JavaScript代码,在按钮的点击事件中获取多个子div的文本。

以下是一个示例代码:

代码语言:txt
复制
<div id="parentDiv">
  <div class="childDiv">子div1</div>
  <div class="childDiv">子div2</div>
  <div class="childDiv">子div3</div>
</div>

<button id="btn">点击获取子div文本</button>

<script>
  document.getElementById("btn").addEventListener("click", function() {
    var childDivs = document.getElementsByClassName("childDiv");
    var texts = [];
    for (var i = 0; i < childDivs.length; i++) {
      texts.push(childDivs[i].textContent);
    }
    console.log(texts);
  });
</script>

在上述代码中,通过getElementById方法获取按钮元素,并使用addEventListener方法添加点击事件监听器。在点击事件中,通过getElementsByClassName方法获取所有class为"childDiv"的子div元素,并使用textContent属性获取每个子div的文本内容。将文本内容存储在一个数组中,最后打印输出。

这样,当点击按钮时,就可以获取到多个子div的文本内容。你可以根据实际需求对获取到的文本进行进一步处理或使用。

注意:以上示例代码中没有提及具体的腾讯云产品,因为获取多个子div文本与云计算领域的专业知识、云服务等没有直接关联。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

C1能力认证训练题解析 _ 第四部分 _ Web进阶「建议收藏」

获取元素节点信息常用属性: 名称 描述 innerHTML 返回元素内包含的所有HTML内容(文本和标签),类型为字符串 parentNode 返回指定节点的节点 children 返回指定元素的子元素节点集合...(4)获取div所有p元素和span元素,请补全横线处代码。...('div').________ console.log(word) 答案:innerText sky分别对应div三个span元素中的文本,所以这里只需要获取到元素文本内容...一些浏览器实现仅在框架或内置框架接收到用户手势或交互才显示对话框 resize 窗口大小改变触发 scroll 元素发生滚动触发 (1)实现窗口大小发生变化时,重置div元素高度为当前窗口高度的一半...class="box"> 答案:1 add方法中,只有获取到box节点才会对num加1; box节点在JS代码下方,只有load事件中的add方法才能获取到box节点,所以最终num

2K20
  • DOM 又是个什么鬼?

    1.3 Element    HTML DOM 中,Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。...firstChild 返回元素的首个子元素 lastChild 返回元素的最后一个子元素 parentNode 返回元素的节点 getAttribute() 返回元素节点的指定属性值 setAttribute...() 把指定属性设置或更改为指定值 removeAttribute() 元素中移除指定属性 innerHTML 设置或返回元素的内容 注意 innerHTML 获取/设置标签体内容 【该标签会刷新标签所有内容...table元素 var table = document.getElementById("table"); //获取按钮元素 var but = document.getElementById...("but"); //设置按钮单击事件 but.onclick = function () { //追加一行数据

    1.2K30

    JS事件篇

    属性可以获取到当前元素所有子元素,不包括文本节点 区分概念: 节点包括文本节点,而元素不包括文本节点 firstChild获取当前元素第一个子节点 VS firstElementChild获取当前元素第一个子元素...抽离出按钮点击函数的小案例 parentNode :获取一个元素的元素 innertext :获取到一个标签里面的文本内容 获取兄弟节点,也可能会获取到空白节点 获取兄弟元素 节点的属性 通过nodevalue...节点.appendChild()----向一个节点中添加一个子节点 整合上面操作的小案例 节点.insertBefore(新节点,旧节点): 指定子节点前插入新的子节点 节点.replaceChild...childNodes属性会获取包括文本节点在内的所有节点,注意DOM标签与标签之间的空白也会被当成文本节点 IE8一下的浏览器中,不会将空白文本当成子节点,所以该属性再IE8中会返回4个子元素...,而其他浏览器都是9个 ---- children属性可以获取到当前元素所有子元素,不包括文本节点 ---- 区分概念: 节点包括文本节点,而元素不包括文本节点 ---- firstChild获取当前元素第一个子节点

    12.6K10

    学习jQuery这一篇就够了

    需求描述:为按钮添加单击事件,然后再解绑,这时候你点击按钮看看是不是不会输出信息了 按钮 $('button').on('click',function () {...需求描述:当文本获取焦点,设置其背景为红色,当文本框失去焦点,设置其背景为绿色 $(':text').focus(function () { $(...需求描述:为按钮绑定一个单击函数,然后点击按钮控制台输出 “按钮单击了” 按钮 $('button').click(function () { console.log...'); }); # 9. mousemove() 方法描述:当鼠标指针元素移动, mousemove 事件就会被触发,任何 HTML 元素都可以接受此事件。...需求描述:鼠标 div 移动,获取当前鼠标相对 div 的位置坐标 .outer { width: 200px; height: 200px; background: black

    99450

    前端成神之路-WebAPIs02

    、属性节点 能够获取指定元素的元素 能够获取指定元素的所有子元素 能够说出childNodes和children的区别 能够使用createElement创建页面元素 1.1....节点概述 ​ 网页中的所有内容都是节点(标签、属性、文本、注释等),DOM 中,节点使用 node 来表示。 ​...最后1个子节点 ? 第1个子元素节点 ? 最后1个子元素节点 ? ​...实际开发中,firstChild 和 lastChild 包含其他节点,操作不方便,而 firstElementChild 和 lastElementChild 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢...('div'); // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等 console.log(div.nextSibling);

    73810

    JS快速入门(二)

    ,提供操作其他节点的方法 节点的分类:元素节点、文本节点、属性节点 节点之间的层级关系:(parent)、子(child)和同胞(sibling)等术语用 于描述这些关系。...children 返回指定元素的子元素节点集合 parentNode 返回指定节点的节点 firstElementChild 返回指定元素的第一个子元素节点 lastElementChild 返回指定元素的最后一个子元素节点...焦点在按钮并按了 Enter 键,也会触发 contextmenu 右键点击(右键菜单显示前触发) dblclick 双击左键触发 mouseenter 指针移至元素范围触发一次 mouseleave...一些浏览器实现仅在框架或内置框架接收到用户手势或交互才显示对话框 resize 窗口大小改变触发 scroll 元素发生滚动触发 load事件示例 /* 输出 div...class="box">主要内容 此处 JS 代码元素之前,所以应该将代码放在 load 事件中,等待元素加载完成后再 获取其内容; 使用 onload 绑定事件,注意一个页面不要存在多个

    6.6K30

    Vue3学习笔记(六)—— 作业

    要求如下: (1) 用户实验图3-1的文本框中输入需要记事的内容,然后按Enter键把输入的内容加入记事本中。 (2) 单击某一条记录后面的“删除”按钮可以删除对应记录。...2.1.2、实验要求 使用 Vue.js 制作购物车,要求单击 “+”  “-” 按钮对应数量可改变,相对应的总价也会重新 计算可改变;当某个商品数量减为0,其 “-” 按钮为不可用状态, 如实验图4...4.2、创建三个子路由,分别是“待付款”“待发货”“待收货”页面,个子路由页面单独写出相应的内容。...(2)单击1次按钮后,按钮的内容和浏览器控制台显示的内容。 (3)单击6次按钮后,按钮的内容和浏览器控制台显示的内容。...当单击“全选"按钮,复选框全部被选中;当 单击“取消全选"按钮,复选框全部被取消选中,如实验图8-1所示。

    4.5K30

    HTML DOM 学习

    中创建新的HTML事件 DOM的特性: 整个HTML页面文档就是一个文档节点(只存在一个 根元素) 每一个HTML的标签是一个元素节点 每一个HTML元素中的文本文本节点 每一个HTML...,例如: 我们获取的内容div中的table中的th标签中的元素,那么我们使用 getElementsByTagName()方法获取所有th标签,那么HTML页面中无数的th标签都会被获取 我们可以使用...getElenemtsById()先定位目标div标签,再通过getElementsByTagName()方法获取th标签元素 对象元素读写特性: innerHTML 表示对象元素所包含的文本和HTML...键盘、鼠标、blur方法 onfocus 获得焦点 键盘、鼠标、focus方法 onchange 修改内容 键盘、鼠标、赋值语句 onclick 鼠标单击 键盘、鼠标、click方法 ondblclick...、ctrlKey、shiftKey 是否按下Alt、Ctrl、Shift键 键盘鼠标 button 鼠标按钮是否按下 鼠标 keyCode 键盘按键unicode值 键盘 clientX、clientY

    96920

    3-DOM

    createTextNode() 创建文本节点。 Element元素对象 通过document获取和创建 方法 removeAttribute() 删除指定的属性。...节点可以是元素节点、属性节点、文本节点,或者也可以是任何一种节点。 注意 虽然所有的对象均能继承用于处理节点和子节点的属性和方法,但是并不是所有的对象都拥有节点或子节点。...replaceChild() 用新节点替换一个子节点。 属性 parentNode 返回节点的节点。...(事件)后,触发某些代码(监听器)执行 事件 某些操作,如单击,双击,鼠标移动,键盘操作等 事件源 被监听的组件,如文本输入框,按钮等 监听器 一段代码 注册监听 将事件,事件源和监听器绑定在一起 常见事件...onselect 文本被选中。 表单事件 onsubmit 确认按钮被点击。 onreset 重置按钮被点击。 演示网址

    1.3K20

    深入JavaScript之BOM、DOM和事件

    创建(获取):html dom模型中可以使用window对象来获取 方法: Element:元素对象 获取/创建:通过document来获取和创建 方法 Node:节点对象,其他5个的对象...:文档对象 创建(获取):html dom模型中可以使用window对象来获取 1. window.document 2. document 方法: 获取Element对象: getElementById...replaceChild():用新节点替换一个子节点。 属性 parentNode 返回节点的节点。...如: 单击,双击,键盘按下了,鼠标移动了 事件源:组件。如: 按钮 文本输入框… 监听器:代码。 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。...onselect 文本被选中。 表单事件 onsubmit 确认按钮被点击。 onreset 重置按钮被点击。 事件简单学习 功能: 某些组件被执行了某些操作后,触发某些代码的执行。

    2.9K30

    事件高级

    当你单击一个div,同时你也单击div元素,甚至整个页面。 ​ 那么是先执行元素的单击事件,还是先执行div单击事件 ??? 事件流描述的是从页面中接收事件的顺序。...比如:我们给页面中的一个div注册了单击事件,当你单击div,也就单击了body,单击了html,单击了document。 ?... IE6~8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找。 ?...常情况下terget 和 this是一致的, 但有一种情况不同,那就是事件冒泡(父子元素有相同事件,单击子元素,元素的事件处理函数也会被触发执行), 这时候this指向的是元素,因为它是绑定事件的元素对象...事件委托也称为事件代理, jQuery 里面称为事件委派。 说白了就是,不给子元素注册事件,给元素注册事件,把处理代码元素的事件中执行。 生活中的代理: ? js事件中的代理: ?

    1.4K20

    【Java 进阶篇】深入理解 JavaScript DOM Node 对象

    什么是DOM Node对象 DOM中,所有的内容都是以节点的形式存在。节点是DOM的基本构建块,文档中的每个元素、属性、文本均以节点的形式表示。...访问子节点 DOM中,节点可以包含子节点,可以使用以下属性来访问和操作子节点: childNodes:获取包含元素的所有子节点的NodeList。 firstChild:获取第一个子节点。...lastChild:获取最后一个子节点。 parentNode:获取节点。 下面是一个示例,演示如何使用这些属性: 元素)的引用。 2. 创建新节点 除了访问现有的节点,我们还可以创建新的节点并将其添加到文档中。...当用户单击列表项,我们查找其子列表并切换其hidden类,以控制子列表的显示或隐藏。同时,我们还切换了展开/折叠按钮的图标。 总结 JavaScript DOM Node对象是DOM操作的核心。

    25310

    C1 能力认证——Web进阶

    返回指定元素的第一个子元素节点 lastElementChild 返回指定元素的最后一个子元素节点 名称 描述 getAttribute() 返回元素一个指定的属性值 直接使用属性名称获取 适用于部分属性...,这里需要使用DOM属性获取元素级节点 获取div所有p元素和span元素,请补全横线处代码 </span...焦点在按钮并按了Enter键,也会触发 contextmenu 右键点击(右键菜单显示前触发) dblclick 双击左键触发 mouseenter 指针移至元素范围触发一次 mouseleave...一些浏览器实现仅在框架或内置框架接收到用户手势或交互才显示对话框 resize 窗口大小改变触发 scroll 元素发生滚动触发 实现窗口大小发生变化时,重置div元素高度为当前窗口高度的一半...class="box"> 1 # add方法中,只有获取到box节点才会对num加1 # box节点在JS代码下方,只有load事件中的add方法才能获取到box节点,所以最终num

    3.2K30
    领券