使用Javascript通过className或querySelectorAll获取所有子元素 - 腾讯云开发者社区

文章/答案/技术大牛

发布

JavaScript——DOM基础

获取页面中的元素可以使用以下几种方式：根据ID获取根据标签名获取通过HTML5新增的方法获取特殊元素获取根据ID获取使用 getElementById()方法可以获取带有ID的元素对象。...如果页面中没有这个元素，返回的是一个空的伪数组。还可以获取某个元素（父元素）内部所有指定标签名的子元素。...HTML DOM树中的所有节点均可以通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。...childNode获得的是所有类型的子节点，包含元素节点、文本节点等，如果想要获得里面的元素节点，则需要专门处理，所以我们不提倡使用childNodes。...实际开发中的解决方案，既没有兼容性问题又返回第一个子元素或最后一个元素。

7.4K2 0

整理常见 DOM 操作

} else { el.className += ` ${className}` } } } 元素的属性和值 attr 通过 getAttribute 获取...) 通过 removeAttribute 删除 html 元素的属性 el.removeAttribute(attrName) html 获取元素 html 代码；传入 true 获取 outerHTML...获取元素 contentText，考虑兼容性 innerText el.contentText || el.innerText 通过 contentText 或 innerText 赋值覆盖之前的值...= 8) } 或使用 querySeclectorAll removeChildren 删除元素的所有子元素 function remove(el) { el.firstChild && el.removeChild...(newNode, oldNode) } firstChild 获取元素第一个子节点 parentNode.firstChild lastChild 获取元素第一个子节点 parentNode.lastChild

1.3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

「Web编程API」- 02

获取的是 tbody 里面所有的行 var trs = document.querySelector('tbody').querySelectorAll('tr'); // 2....H5自定义属性自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(‘属性’) 获取。...节点概述网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。...HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。...和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

7733 0

前端成神之路-WebAPIs02

tab栏切换案例能够区分元素节点、文本节点、属性节点能够获取指定元素的父元素能够获取指定元素的所有子元素能够说出childNodes和children的区别能够使用createElement... // 1.获取元素获取的是 tbody 里面所有的行 var trs = document.querySelector('tbody').querySelectorAll...H5自定义属性自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(‘属性’) 获取。...HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。 ? ...实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢

9341 0

【前端基础篇】JavaScript之DOM介绍

使用 element 表示. 节点: 网页中所有的内容都可以称为节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示....document.querySelector(CSS选择器) 通过CSS选择器选择一个元素。 document.querySelectorAll(CSS选择器) 通过CSS选择器选择多个元素。...元素节点.innerText innerText 属性用于获取或设置HTML元素的文本内容。它返回元素及其所有子元素的"可见"文本内容。示例代码：元素节点.innerHTML innerHTML 属性用于获取或设置HTML元素的内容，包括HTML标记。与innerText不同，innerHTML会解析标签并返回元素的所有内容。示例代码：元素节点.属性通过直接访问元素的属性，可以获取或设置元素的属性值。例如，element.id或element.className。示例代码： <!

1K1 2

DOM扩展

示例： var lis = document.querySelectorAll("ul li"); // 获取第一个li lis.item(0); // 等价于：lis[0]; 注意：上述两个函数如果传入不支持的选择符...（1）innerHTML属性读模式：返回调用元素的所有节点（包括元素、注释和文本节点）对应的HTML标记；写模式：根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点...“+=”，因为写模式下，innerHTML的值会被解析为DOM子树，替换调用元素原来的所有子节点。...在删除带有事件处理程序或引用了其他JavaScript对象子树时，就会导致内存占用问题。...在使用innerHTML、outerHTML等方法时，最好先删除要替换的元素的所有事件处理程序和JavaScript对象属性。

1.9K3 1

Web开发tutorial

1 #id #firstname 选择 id=“firstname” 的所有元素。 1 * * 选择所有元素。 2 element p 选择所有元素。...1 element,element div,p 选择所有元素和所有元素。 1 element element div p 选择元素内部的所有元素。...1 element>element div>p 选择父元素为元素的所有元素。 2 element element div p 选择紧接在元素之后的所有元素。...JavaScript可以通过xhr request或ajax request Request和Response的格式如下： ? 一个访问google.com的实例如下： ?...Request Method为GET是获取信息，POST是登陆，PUT是你编辑或更新了某些东西，DELETE删除了某些东西。 ?

1K1 0

JavaScript(十一)

querySelectorAll() 方法 querySelectorAll() 方法接收的参数与 querySelector() 方法一样，都是一个 CSS 选择符，但返回的是所有匹配的元素而不仅仅是一个元素...("em"); //取得类为"selected"的所有元素 var selecteds = document.querySelectorAll(".selected"); //取得所有元素中的所有...getElementsByClassName() 方法 getElementsByClassName() 方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。...innerHTML 属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的 HTML 标记 outerHTML 属性返回调用它的元素及所有子节点的 HTML 标签 scrollIntoView...() 方法 scrollIntoView() 可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。

1.1K1 0

webAPIs04-页面尺寸和位置、时间

Web APIs - 第4天进一步学习 DOM 相关知识，实现可交互的网页特效能够插入、删除和替换元素节点能够依据元素节点关系查找节点日期对象掌握 Date 日期对象的使用，动态获取当前计算机的时间...ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。实例化 // 1....回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等。...-- 获取 ul 的子节点 --> HTML CSS JavaScript 基础 Web APIs...> // 获取所有 li 节点 const lis = document.querySelectorAll('ul li') // 对所有的

7881 0

DOM&BOM

HTML DOM 教程 | 菜鸟教程 (runoob.com) DOM树获取页面元素慕课：3-8 图文节-慕课网体系课 (imooc.com) 从页面中获取要操作的标签： getElementById... // 获取标签id var pDOM = document.getElementById('one'); // 打印出获取的标签对象（元素）...（元素）格式：document.getElementsByTagName('标签名') 特点：一次性可获取多个标签 JavaScript修仙之旅欲练此功，必现脱发元素)(根据标签类值获取标签对象(元素) 格式：document.getElementsByClassName('类名') 特点：一次性可获取多个标签数钱数到手抽筋querySelectorAll 和querySelector用法一样，querySelectorAll一次性可获取多个标签对象盗墓笔记 <p class="title

1.5K2 0

【Java 进阶篇】JavaScript DOM Element 对象详解

获取Element对象在JavaScript中，您可以使用多种方式获取Element对象。...最常用的方法是通过以下几种方式：使用document.getElementById方法：通过元素的id属性获取元素。...以下是一些常用的Element对象属性和方法：属性 tagName：获取元素的标签名，如"DIV"或"P"。 id：获取或设置元素的id属性。 className：获取或设置元素的class属性。...children：获取元素的子元素集合。 attributes：获取元素的所有属性集合。方法 getAttribute(name)：获取指定属性的值。...querySelectorAll(selector)：选择匹配指定选择器的所有子元素。 addEventListener(event, handler)：添加事件监听器。

6323 0

JavaScript 教程「9」：DOM 元素获取、属性修改

JavaScript 对象 let btn = document.querySelector('button'); // 打印所有属性 console.dir(btn); //...，此时我们就可以使用如下语法来获取匹配的多个元素。...出了修改文本内容，我们还可以实现对元素样式的控制，主要可以通过以下三种方式：通过 style 属性操作 CSS 通过类名 className 操作 CSS 通过 classList 操作类控制 CSS...className 操作 CSS 当设计修改的样式较多时，如果直接通过 style 属性修改比较麻烦，此时就可以通过操作 CSS 类名的方式来进行批量修改，其语法结构如下：元素.className...通过 classList 来操作 CSS 针对通过类名 className 操作 CSS 会覆盖以前类名的问题，JavaScript 中又提供了 classList 的方式来追加和删除类名。

3.6K4 1

webapi（一）初识DOM&定时器

初识作用使用js去操作html和浏览器分类 DOM：文档对象模型 BOM：浏览器对象模型 DOM（文档对象模型）用来呈现，以及与任意 HTML 或 XML文档交互的作用：实现网页特效实现用户交互...，并按子节点的顺序依次遍历。...} 伪数组 querySelectorAll() 方法获取到的元素是伪数组，有length,索引号等。...无论有无获取到元素，querySelectorAll() 始终获取的是伪数组伪数组与数组最大的不同，就是伪数组不能使用数组的pop , push等方法例如： // 没有div元素 let divs...通过类名操作CSS 1. className 属性语法：元素.className = 'css类名' 例如： div { width: 200px;

7832 0

一文解读JavaScript中的文档对象（DOM）

1)).获取元素 document.getElementById() #通过id查找HTML元素 document.getElementsByName() #通过name...HTML元素 document.querySelector(".h") #第一个类名为 "h" 的元素 document.querySelectorAll("div.no, div#h"...这里我们获取到了所有的Div元素，我们可以针对性的获取一个ID下的Div的子元素以及它的兄弟和父，子元素，如下： 6)).创建节点我们可以自定义节点并添加值，不过要将它添加到文档中去，所以必须添加节点...获取当前元素的id a.className 获取当前元素的class a.classList 获取当前元素的class列表 a.accessKey='w' 设置或返回元素的快捷键 a.namespaceURI...获取或者设置表单元素的值总结这篇文章主要介绍了JavaScript的文档对象。

1.1K2 0

使用原生 JavaScript 进行开发

很多的 JavaScript 开发人员，包括我在内，都很喜欢 jQuery。...因为它的简单，因为它有很多丰富的插件可供使用，和其它优秀的工具一样，jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用。　　...其实如果你只是针对现代浏览器，很多功能使用原生的 JavaScript 就可以实现，即使是拖后腿的低版本 IE 浏览器，兼容性也是很容易处理的。 ? 　　...下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能。如果你打算自己开发一个小的基础框架，可以好好参考一下这些代码的实现。 ...('beforebegin', htmlString); parent.appendChild(el); el.insertAdjacentHTML('afterend', htmlString); 获取子节点

1.4K1 0

获取DOM节点的方法汇总

1.2 通过父节点获取： parentObj.firstChild：获取父节点下的第一个子节点（会将空格和换行计入），这个属性是可以递归使用的，即支持parentObj.firstChild.firstChild...parentObj.lastElementChild：获取父节点下的最后一个子元素节点 parentObj.childNodes：获取父节点下的所有直接子节点（会将空格和换行计入） parentObj.children...：获取父节点下的直接子元素节点。...parentObj.getElementsByTagName("tagName") parentObj.getElementsByClassName("className") 1.3 通过子节点获取：...HTMLCollection比NodeList多一项方法：NamedItem，可以通过传递id或name属性来获取节点信息规定返回结果： node.childNodes 结果返回类型是 NodeList

4.8K1 0

jQuery VS JavaScript原生API

在jQuery的温柔乡里，是否还能记得原生她javascript原生？如果仅为使用个选择器($)或者类似的东西，是否真的有必要加载jQuery？故此了解下JS常用原生写法还是蛮有必要的。...Show me the code.直接看代码；以下是jQuery和JavaScript实现相同操作的等价代码：选择元素 // jQuery var els = $('.el'); //===...'); $('.el').has('.className'); //也可以用来判断是否包含某个元素 //===============================================...{ var toRemove = document.querySelector(el); toRemove.parentNode.removeChild(toRemove); } 获取父元素...Javascript修改和检索CSS属性，这样会比使用jQuery CSS函数更加简单快速，并且没有任何不必要的代码。

2K6 0

JS基础第二课（元素篇）

（因此DOM与元素紧密相连）二、获取元素的五种方式1、根据ID获取返回元素对象（仅获取到匹配的第一个元素的标签）图片（3）获取子级对象（querySelector也可以直接获取标签名）JavaScript的DOM操作可以改变网页内容、结构和样式，通过利用Dom操作元素来改变元素里面的内容、属性等注意：事件和操作元素都是对标签进行操作的2、改变获取元素的内容（1）修改获取文本内容...className修改样式属性获取所有的子节点

9722 0

（JavaScript）前端JS不知道怎么理解网页？本专栏从0开始教学！（十二）：关于DOM元素的操作-获取元素节点；元素系欸但的属性、使用CSS选择器进行查询、获取父节点和兄弟节点...

getElementById() 通过id属性获取一个元素节点对象 getElementsByTagName() 通过标签名获取一组元素节点对象 getElementsByName() 通过name属性获取一组元素节点对象...通过具体的元素节点调用 getElementsByTagName() 方法，返回当前节点的指定标签名后代节点 childNodes 属性，表示当前节点的所有子节点 firstChild 属性，表示当前节点的第一个子节点...获取：元素对象.属性名 var box = document.getElementById('box') box.value box.id box.className 设置：元素对象.属性名=新的值..." 其他属性 nodeValue 文本节点可以通过nodeValue属性获取和设置文本节点的内容 innerHTML 元素节点通过该属性获取和设置标签内部的html代码\ console.log(box.id...不同的地方是 querySelector() 只会返回找到的第一个元素，而 querySelectorAll() 会返回所有符合条件的元素。

1831 0

JS获取富文本(HTML)的摘要

]; // 例如要移除 div 标签 // 获取父级元素下的所有子节点 const childNodes = parentElement.childNodes; // 创建一个新的...DocumentFragment 元素，用于保存处理后的子节点 const divNew = document.createElement('div'); // 遍历所有子节点，将不是要移除的标签添加到新的...; // 例如要移除包含的样式 // 获取父级元素下的所有子节点 const childNodes = parentElement.childNodes; // 创建一个新的 DocumentFragment...元素，用于保存处理后的子节点 const divNew = document.createElement('div'); // 遍历所有子节点，将不是要移除的标签添加到新的 DocumentFragment...+className); // 获取所有标题元素 const headings = showDom.querySelectorAll('h1, h2, h3, h4, h5, h6');

1.9K1 0

点击加载更多

JavaScript——DOM基础

整理常见 DOM 操作

「Web编程API」- 02

前端成神之路-WebAPIs02

【前端基础篇】JavaScript之DOM介绍

DOM扩展

Web开发tutorial

JavaScript(十一)

webAPIs04-页面尺寸和位置、时间

DOM&BOM

【Java 进阶篇】JavaScript DOM Element 对象详解

JavaScript 教程「9」：DOM 元素获取、属性修改

webapi（一）初识DOM&定时器

一文解读JavaScript中的文档对象（DOM）

使用原生 JavaScript 进行开发

获取DOM节点的方法汇总

jQuery VS JavaScript原生API

JS基础第二课（元素篇）

（JavaScript）前端JS不知道怎么理解网页？本专栏从0开始教学！（十二）：关于DOM元素的操作-获取元素节点；元素系欸但的属性、使用CSS选择器进行查询、获取父节点和兄弟节点...

JS获取富文本(HTML)的摘要

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐