js获取某个元素的子元素_js某个节点的子元素_js+获取某个元素得子节点 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

前端day13-JS(WebApi)学习笔记(attribute语法、DOM节点操作)

小技巧：如果API写的是Emement复数的形式，也就是后面加了s（Emements）那么它返回的就是一个伪数组否则就是单个对象，一般只有id才会是单个对象，其他方式获取（标签名类名）都是伪数组.

01

前端入门6-JavaScript客户端api&jQuery

作为一个前端小白，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。

04

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

是的

没有找到

[Vue 牛刀小试]：第十一章 - Vue 中 ref 的使用

在之前的前端开发中，为了实现我们的需求，通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素，得益于 Jquery 对于 DOM 元素优异的操作能力，我们可以很轻易的对获取到的 DOM 元素进行操作。但是，当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后，对于 DOM 的操作我们就应当完全的交给框架，而我们只需要关注于数据。难道，在 Vue 中就不能手动获取到页面上的 DOM 元素了吗，答案当然是可以手动获取到 DOM 元素的，在 Vue 中我们可以通过使用 ref 实现获取 DOM 元素的功能，当然，这也只是 ref 其中一项的功能。本章，我们就来学习 Vue 中 ref 的相关使用。

03

从零开始学 Web 之 DOM（四）节点

页面中的所有内容，包括标签，属性，文本（文字，空格，回车，换行等），也就是说页面的所有内容都可以叫做节点。

04

firstElementChild、firstChild 、childNodes和children方法

123

在上面这段代码中，如果使用以下js代码 var oDiv=document.getElementByTagName("div")[0]; alert(oDiv.firstChild.nodeName) 在ie9以下，alert出来的是p（p标签名字），但是在现代浏览器下，比如Chrome,FF，ie11等等，由于会把

两个标签之间的空白节点也解析出来，所以会alert出#text（由于空白节点是属于text文本节点）如果把h

02

网页|Zepto框架层次选择器

说到选择器，大家可能会想到层叠样式表。在css中，选择器可以获取元素，为其添加css样式；但zepto框架与css选择器相比，它更加强大，因为zepto选择器为元素添加的是行为，行为的添加使得页面的交互更加丰富多彩。今天就来介绍一下zepto的常用选择器——层次选择器、属性选择器。

01

Js如何删除所有子元素以及当前元素

在原生js当中,html的内容元素总是以嵌套的关系存在于网页中,因此,可以通过遍历树的方法访问网页里的每一个元素,当然也是可以删除指定的子元素的

04

JQuery javascript实现父子页面相互调用

如上图，在iframe子页面的<script>元素中，定义了taskStatus全局变量，如果希望在其父页面中获取该全局变量的值，则可在父页面的<script>元素中新增js脚本如下：

02

nodejs cheerio模块提取html页面内容

本文给出使用一个用cheerio模块提取html文件中指定内容的例子，并说明具体步骤、涉及到的API、以及其它模块。 cheerio模块是一个类似jquery的模块，具有相似的API、功能，能够将一个网页解析为DOM，以及通过selector选择元素，设置、获取元素属性。

06

21-jQuery基础+选择器

jQuery是开源软件，使用MIT许可证授权。 jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使jQuery函数库能够创建功能强大的动态网页以及网络应用程序。

04

JQuery 遍历：发现元素的魔法之旅

欢迎来到 JQuery 的奇妙世界，一个充满活力和灵感的地方。在这个世界里，我们将一起探讨 JQuery 的遍历功能，这是一个让你轻松发现和操作网页元素的神奇工具。无需太多前端经验，只要有一颗探险的心，你就能在 JQuery 遍历中找到属于你的宝藏。

01

Vue-透传Attributes使用解析

这个时候self-btn的样式并没有传递出去，因为和这个时候他并不知道要传递给哪一个dom元素，同时会曝这样一条警告

01

JQuery从入门到实战

jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换。

03

JQuery 笔记（一）

JQuery 基础： 1. 概念：一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

01

Web前端基础（07）

引入了jquery-1.4.2.js文件可以从网上下,或者从我这里下,无需积分免费下载:jquery-1.4.2.js

02

一文入门jQuery

一个JavaScript框架。简化JS开发。 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已。

02

前端基础-JQuery(一)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

02

Ajax第三节

举例来说，这个网址http://www.example.com/dir/page.html协议是http://，

02

CSS Layout API初探：瀑布流布局实现

因为这篇文章前戏很长，所以将结果放在了最前面呈现，完整的示例可以前往 https://masonry.daidr.me 查看。

03

JQuery第一节

jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

03

Web前端基础（06）

###JavaScript中对象分类内置对象: number/string/boolean等浏览器相关对象BOM: Browser Object Model浏览器对象模型页面相关对象DOM: Document Object Model文档对象模型 ###BOM浏览器相关内容 window: 该对象的属性和方法称为全局属性和全局方法,访问时可以省略掉window. window中常见的方法: window.isNaN() 判断变量是否是NaN window.alert() 弹出提示框 window.c

02

【Java Web_09】JQuery

一、JQurey 1. 概述 * 是 javaScript 的框架 2. js与jq的互转 * js ---> jq $(js) * jq ---> js jq[索引]、jq.get(索引) # jq 可以看成是 js 的数组对象 3. jq选择器 ① 基本选择器 * $("#id") id选择器 * $(".class") 类选择器 * $("body") 元素选择器 ② 层级选择器 * $("A

01

JavaScript Array（数组）对象中指定元素的删除

js在前台界面中举足轻重，在使用js删除数组时遇到一些问题（详见删除元素），参考很多大神的资料，现把常用的函数总结出来，以备不时之需。

01

从零开始学 Web 之 Vue.js（六）Vue的组件

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

04

jQuery事件

1. 常用事件 click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） ready() DOM加载完成示例代码: <script> $(function(){ var $li = $('.list li'); var $button = $('#button1') var $text = $("#text1");

08

<jQury动态布局>浮动子元素均分布局对应的完整源码,以及jQuery在这里

在前端页面的布局过程中,作者遇到了,这样一个问题当子元素为浮动元素时,父元素设置相应属性后可以被子元素撑开,但无法实现子元素的均分布局,在网络上找了半小时的资料,没有符合要求的布局示例, 今天自

常用的web方法 web API(二)

在上一篇《常用的web方法 web API(一)》中我们学习了：绑定事件的几种方式、解绑事件的几种方式、创建元素的几种方式、获取节点的几种方式本篇我们将继续学习：轮播图的js方法、offset系列相关属性、scroll系列属性、client系列以及获取元素计算后的样式属性值。好了，接下来我们接着学习：

03

jQuery选择器总结

不得不说，jq是写代码是替代js的一种超级棒的选择。对于刚入门的小白都知道，一般学前端，都要用js写tab切换，大图滚动之类的效果，同样的效果，js大概20-40行不等。jq只需要10行左右。你还在犹豫吗？赶紧学起来！先说选择器，要知道js里，也有，就是你给标签起了id，class名，在js里需要获取是一个意思。在jq中很方便，不用写很长的xxx=document.getElementById(‘xxx’)

05

vue父子组件传值

父组件可以在引用子组件的时候，通过属性绑定（v-bind:）的形式, 把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用。

01

总结了Vue组件通信方式，别再说不会组件通信了

如果父组件传递了一些属性到子组件，但子组件并没有声明这些属性，则它们称之为attribute，这些属性会直接附着在子组件的根元素上

03

jQuery操作DOM元素

作为一个后端程序员，也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。实现上述两个功能当然可以使用原生js来完成，但在实际开发过程中很少这样做，通常会使用一些别人封装好的js库来辅助我们的工作，jQuery就是这些辅助库中的一员。

04

jQuery选择器总结

本文主要介绍了jQuery选择器的使用，包括基本选择器、层次选择器、过滤选择器、内容过滤器、可见选择器、属性选择器和子元素选择器等。通过实例讲解了如何在JavaScript中使用这些选择器，以及如何使用表单元素过滤选择器。

05

第50次文章：JQuery基础

tips：window.onload 和 $(function)异同：两者的功能相同，都是等到页面加载结束之后，再执行内部的代码。但是有一定的区别，主要是window.onload只能定义一次，如果定义多次，后边的会将前边的覆盖掉，$(function)可以定义多次的。

03

vue系列教程之微商城项目|分类

本文需要实现的页面如下，点击左侧导航栏按钮，右侧自动滑动到对应位置。当滑动右侧内容，左侧导航栏也要做出相应变动。

01

与Ajax同样重要的jQuery（1）

jQuery框架 jQuery 1.4 是企业主流版本，从jQuery1.6 开始引入大量新特性。最新版本 2.1.1，这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性) jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js jquery-1.8.3.js jQuery框架源码，没有被精简，体积较大（主要用来研究 jQuery源码），企业开发时，需要导入 jquery-1.8.3.min.js （精简过） 1.jQuery程序快速入门 window.

06

【JavaScript】获取对应的节点总结

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>

第一个
第二个
第三个
第四个
第五个

04

Vue实用手册

1. Vue.js－是国内开发者尤雨溪开发的js框架，它是实现UI层的渐进式框架, Vue借鉴了Angular的指令、React中组件和props等优点进行设计，从最简单的数据处理，到数据交互，到DOM操作，到路由处理等，VueJS都有完整的解决方案。

02

JavaWeb18-jquery学习笔记（Java全栈开发）

jquery一.筛选筛选与之前的选择器雷同,筛选提供的都是函数. 1. 过滤 eq(index|-index):获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始. first():第一个 last():最后一个 hasClass(...):判断元素是否含有特定的样式 filter(...):筛选出与指定表达式匹配的元素集合 is(...):判断元素是否符合指定的选择器 has(...):含有特定后代的元素 not(...):删除与指定表达式匹配的元素 slice(start

09

java学习与应用（4.6）--过滤器、监听器、JQuery、AJAX、JSON等

Filter过滤器：客户端在请求服务器资源前和返回响应，会通过过滤器，以拦截请求完成特殊功能。登录校验、统一编码校验等一些通用操作放置到过滤器。定义类实现接口Filter（javax.servlet），复写方法（init（服务器启动调用），doFilter（写入FilterChain.doFilter进入方法放行，之后的代码为返回响应执行的信息），destory（服务器关闭前执行）），配置拦截路径（@WebFilter（/*为所有资源都拦截））。 web.xml配置（WEB_INF下），配置filter标签下的filter-name，filter-class。配置filter-mapping标签下url-pattern，filter-name。也可直接用注解@WebFilter配置即可。配置详解：拦截路径配置（具体资源路径、目录/xxx/*、后缀*.jsp，所有资源/*等）。配置符合请求方式访问资源前进行的拦截（REQUEST浏览器直接请求，FORWARD转发访问资源，INCLUDE包含访问资源，ERROR跳转资源，ASYNC异步访问资源），使用注解的dispatcherType（可传入数组）。也可配置web.xml的dispatcher标签拦截符合条件的资源被访问方式。过滤器链（多个过滤器），资源进入通过的过滤器和返回的顺序相反。使用注解：过滤器执行的先后使用类名字符串比较（如AFilter，BFilter等）顺序执行。使用web.xml：filter-mapping的先后顺序执行设置登录校验，可以在Filter中对指定页面校验session值判断放行和跳转等。敏感词汇过滤：使用装饰模式、代理模式等来增强request。在代理模式中使用代理对象代理真实对象达到增强真实对象，代理中增强返回值为。静态代理使用类文件描述代理模式，动态代理在内存中形成代理类。代理对象和真实对象实现相同接口，使用Proxy的newInstance获取代理对象（传入如：lenovo. getClass(). getClassLoader(), lenovo. getClass(). getInterfaces(), new InvocationHandler( )，然后重写invoke），使用代理对象获取真实。 proxy为代理对象，method为代理对象被调用的方法，args为被调用时传递的参数。invoke中写入Object obj=method.invoke(xxx,args);return obj方式增强真实对象。通过修改代理传入的参数，返回值，和方法体，进行增强和修改。

01

JQuery中DOM操作[续]

10、设置和获取HTML、文本和值示例代码

选择你喜欢的水果？

<form action=”” method=”post”> 用户输入<input name=”title” id=”myinput” value=”请输入内容” /> </form> <script language=”javascript”> var p_html=$(“p”).html();//获取p元素的html代码，注意这里包含了 //如果需要重新设置，只需

06

Vue.js最佳实践（五招让你成为Vue.js大师）

对大部分人来说，掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发，成为Vue.js大师，那下面我要传授的这五招你一定得认真学习一下了。第一招：化繁

07

JavaScript-事件委托（事件代理）

今天给自己的知识结构填个坑，再复习下JS的事件代理。事件代理可以给JS批量生成的DOM元素添加事件，并且还可以提高效率，因为你确实不用给每个DOM节点添加事件监听了。事件的监听器，是被添加到了它们的父元素上，监听器会分析从新生成的子元素上冒泡上来的事件，并找到是哪个子元素的事件。现在，有一个ul、li的列表了，，

Vue之ref详解与实例原

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 特性为这个子组件赋予一个 ID 引用。ref可以用在普通的Dom元素上，也可以用在父级组件上，还可以用在子组件上，通过this.$refs对象访问，

03

【前端基础】javascript笔记

浏览器在加载显示一个网页时，会对页面html代码解析，并在内存中创建一个描述该页面的模型（树形结构）。

01

vue组件通信总结

以下这些通信方式，有的在开发中几乎用不到，不用去背，所以不用太纠结，也不要有太多心里负担，有个印象就行了，之所以整理纯粹是为了面试过程中可能会问到：「vue组件之间有哪些通信方式？」回答的时候把名字一说就行了😚 👳👶 父子组件通信绝大部分vue本身提供的通信方式，都是父子组件通信 prop 最常见的组件通信方式之一，由父组件传递到子组件。 event 最常见的组件通信方式之一，当子组件发生了某些事，可以通过event通知父组件。 style和class style和class通信范围比较窄，是传递样式

02

JavaScript之firstChild属性、lastChild属性、nodeValue属性学习

1.数组元素childNodes[0]有更直观易读的优点,这边在介绍一个有同样功能的属性,且更加语义化-------->firstChild属性假设我们需要目标元素节点下的所有子元素中的第一个子元素我们可以这样做: 目标元素节点下的子元素节点数组.firstChild 这句代码等价于目标元素节点下的子元素节点数组[0]; 目标元素节点.childNodes[0] 这句代码等价于目标元素节点.firstChild; 与此类推当我们需要目标元素节点下的所有子元素节点中的最后一个元素我们可以这样做: 目标

09

Vue 2.0实用手册

Vue是国内开发者尤雨溪开发的JavaScript框架，它是实现UI层的渐进式框架, Vue借鉴了Angular的指令、React中组件和props等优点进行设计，从最简单的数据处理，到数据交互，到DOM操作，到路由处理等，Vue都有完整的解决方案。

02

学习纲要：DOM

学习条件了解 JS 的基础写法。学习目标知道什么是DOM。知道如何选择元素。知道如何遍历元素。知道如何新建和复制元素。知道如何插入元素。插入元素会有四个位置：元素的前面和后面；元素的第一个子元素或最后一个子元素。知道如何删除元素。知道如何获取元素的属性。知道如何获取和设置元素的文本内容和HTML内容。知道文本内容和HTML内容的区别。知道如何获取和设置表单元素的值。知道如何获取和设置元素的宽高。知道如何获取和设置元素的样式。事件知道有哪些事件。知道如何给元素绑定事件。知道事

02

【JS】JS/JQ iframe与父级之间相互通讯

JS在iframe中获取父窗口的元素 window.parent.document.getElementById("id").innerText = "string"; jquery在父窗口中获取iframe中的元素 //调用子frame中的元素； $("#iframeMain").contents().find("#id").click(); //调用子frame中的方法； $("#iframeMain")[0].contentWindow.FunctionName(); jquery在iframe中获

02

前端自动化测试实践04—jest-vue项目之TDD&BDD

本节将以 TDD 的方式来搭建一个 TodoList 的 vue 项目。如何搭建包含 jest 的 vue 项目已经在第一节 jest-vue前端自动化测试实践01 中已经进行过介绍，其中，在 jest 的配置文件 jest.config.js 中，需要注意 testMatch 配置项，它指定了测试用例文件的路径，这里我们习惯性设置为 __tests__ 文件夹下的以 .test 加多种后缀结尾的文件。

07

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭