无法从前端…获取值“document.querySelector(‘#text’).value；”不工作 - 腾讯云开发者社区

文章/答案/技术大牛

发布

JavaScript 学习-28.元素与节点(HTMLCollection 和 NodeList)

返回整个div 元素text-info">Hello element2 = document.querySelector...('.text-info'); console.log(element4) // text-info">Hello element5 = document.querySelector...(elements[0]); // 下标取值 text-info">Hello // item 根据下标取值 console.log(elements.item...console.log(nodes[0]) // value="yoyo"> // item索引取值 console.log(nodes.item...(nodes[0]) // value="yoyo"> // item索引取值 console.log(nodes.item(0)

2.4K2 1

h5 补白（1）

一定要注重编程思维的培养，不要让机械业务编程充斥自己的所谓“工作经历”中。 1. H5的新特性 h5规范最初的目标就是取代过时的flash。...--推荐--> 这是一个有类的p 此外h5规范不推荐使用自闭合格式。...function(e){ document.querySelector('#aaa').classList.remove('text'); }) 切换类样式（toggle） document.querySelector...document.querySelector('#aaa').classList.contains('text'); }) 非常像jq。...=_e.currentTarget.result; document.querySelector('#text').innerHTML=text; })； })；当你选择一个*

1.2K1 1

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

是的

没有找到

Web安全之CSRF实例解析

('.userName').value; currentName = userName; var password = document.querySelector('...." name="userName" value="xiaoming"> text" name="money" value="100">..." name="userName" value="xiaoming"> text" name="money" value="100">...第三方网站发出去的请求是无法获取到 CSRF Token的值的。其他知识点补充 1....平常写一些简单的例子，从很多细节问题上也能补充自己的一些知识盲点。参考前端安全系列（一）：如何防止XSS攻击？[4] 前端安全系列之二：如何防止CSRF攻击？

1.7K2 0

Web APIs第三天

检测用户输入字数 let text = document.querySelector('textarea') let useCount = document.querySelector('.useCount...0 let send = document.querySelector('#send') send.addEventListener('click', function () { if (text.value.trim...() === '') { text.value = '' useCount.innerHTML = 0 return alert('内容不能为空') } // 4....发布于 ${new Date().toLocaleString()} ${text.value...重置表单域内容为空 text.value = '' useCount.innerHTML = 0 }) ---- 本节单词: parentNode children nextElementSibling

8075 0

JavaScriptJQuery基本使用

前言这是前端的JavaScript和JQuery的基础使用，对于日常使用来说，这些代码足够了。我写代码的时候经常忘记，写下常用的代码，用的时候直接看这些，免得再去百度了。...个人不建议使用click/mouse或者keypress来触发事件 focus： //js原生 object.addEventListener("focus", myFunc); //jq $(selector...object.addEventListener("change", myFunc); function myFunc(){} //jquery $(selector).change(function) $("#text_input...以下是获取select的列表项的选中的项的值 $("#select").children('option:selected')是select元素的选中的子元素 // js var select = document.querySelector...： document.querySelector("select").value ---- js模拟点击元素 //js var btn = document.getElementById("btn");

8643 0

【JS】328- 8个你不知道的DOM功能

为了帮助解释每个功能的工作原理，我将为您用代码来演示这些功能。这些方法没有陡峭的学习曲线，并且可以为你的项目所用。...浏览器中对 options 对象支持的非常好：除了IE11及更早的版本外，所有浏览器都支持它，因此如果你不担心微软浏览器，那就可以使用它。...因此，这是一种将元素从DOM中的一个位置传输到另一个位置的简单方法。这是一个使用 insertAdjacentElement() 的代码演示。...正如MDN指出的那样，这个接口上的许多特性被弃用或不标准化。但最有趣和最有用的是 detail 属性，它是官方规范的一部分。...${document.querySelector('.col1').offsetHeight}px Right column offsetHeight value: ${document.querySelector

2K1 0

最易理解的VUE双向绑定原理不足70行代码搞定，逐行注释！

VUE双向绑定原理是前端小伙伴很难绕过的一道面试题！本篇文章对其原理进行了最大程度的精简，希望对面试VUE开发的前端小伙伴有所帮助！...z-on:click="fn"> text" style="width:400px" z-model="site"> text="...$el=document.querySelector(options.el);// 指定挂载元素 this.$data=options.data;// 存放你的数据内容 this....$data,key,{// 开始设置劫持 get(){ return value;// 读取值为value },...==value){// 当设置的值与当前值不相等时 value=v;// 将读取值更新为v binding.forEach

6963 0

AI 入侵编程界，此次 “大变革”下，程序员的焦虑与突围之路

一、前端开发从 “代码匠人” 到 “AI 设计师”：以前做前端开发，那真的是靠一行行代码 “搬砖”。就拿做一个简单的网页登录界面来说，得先用 HTML 搭建基本的结构，像这样： <!...) { const username = document.querySelector('input[type="text"]').value; const password = document.querySelector...但现在，AI 设计工具层出不穷。...要是真有一天，AI 能把大部分常规的前端工作都包揽了，那我们这些前端程序员该怎么办？难道真的只能转型去做更偏向创意和审核的工作？...首先，我们要认识到 AI 虽然强大，但它目前还无法完全取代人类程序员。它只是一种工具，能帮助我们提高工作效率，完成一些重复性、规律性的工作。

2820 0

Web 多线程开发利器 Comlink 的剖析与思考

前言 JavaScript 属于单线程语言，所有任务都跑在主线程上，若主线程阻塞，后续任务将无法执行。既然是单线程，那为何我们在使用过程中主观感知却是“多线程”？...如果不这样做，很显然可以通过异步请求方式达到。对于问题 2，如果在独立工作线程中声明多个 onmessage 函数，根据变量提升规则，只会有最后一个生效。...那么，这个函数必然在工作线程中，我们怎么去调用工作线程中的函数进行操作呢？...break; default: return; } } catch (value) { returnValue = { value,...通常技术实现由后端返回文件流，前端生成文件并下载，这也是考虑到性能问题。事实上，在多线程的加持下，纯前端也完全可以实现，以下为 Comlink 的代码写法（10 万数据）： main.js <!

1.1K2 0

重新认识下网页水印

ctx.globalAlpha = 0.2; ctx.rotate(Math.PI / 180 * 20); ctx.drawImage(img, 0, 16, 180, 100); canvasRef.value.style.backgroundImage...fill="none" transform="rotate(-20)" font-weight="100" font-size="16"> 前端小书童</...}`; const waterHeight = 100 const waterWidth = 100 const { clientWidth, clientHeight } = document.querySelector...0~255 g: Green取值范围0~255 b：Blue取值范围0~255 a：Alpha 透明度取值范围0~1，0代表全透明可以理解为每个像素都是通过红、绿、蓝三个颜色金额透明度来合成颜色方案一...：低透明度方案的暗水印当把水印内容的透明度 opacity 设置很低时，视觉上基本无法看到水印内容，但是通过修改画布的 rgba 值，可以使水印内容显示出来。

6304 0

微前端框架chunchao(春潮)开源啦

写在开头为了让大家更能理解微前端的工作模式，微前端的最佳实践应该还需要探索乞丐版微前端框架chunchao源码开源,仅仅为了让大家学习微前端的工作模式而已，实际项目中，我们有使用Paas模式，web...，可以加入我们的专业微前端交流群/技术交流群往期我的原创推荐: 深度：从零编写一个微前端框架微前端框架是怎么导入加载子应用的【3000字精读】在上篇文章基础上修改，加载子应用方式首先修改插入...dom.innerHTML = text; const subapp = document.querySelector('#subApp-content'); subapp...dom.innerHTML = text; const entryPath = App.entry; const subapp = document.querySelector...我们今天主要是实现乞丐版，为了让大家能了解微前端如何工作的，这里也是开放了源码写在最后本文gitHub源码仓库:https://github.com/JinJieTan/chunchao,记得给个

9283 0

Web APIs第一天

设置/修改DOM元素属性表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框正常的有属性有取值的跟其他的标签属性没有任何区别获取: DOM对象.属性名, 设置:...DOM对象.属性名 = 新值 text" value="请输入密码"> // 可取值/设置值 num1.value = '请输入' num1.type = 'password...作用：每隔一段时间调用这个函数, 间隔时间单位是毫秒函数名字不需要加括号, 定时器返回的是一个id数字 setInterval(function () { document.write('前端...') }, 200) function fn() { document.write('前端工程师') } let num = setInterval(fn, 100) 2....获取图片/文字 let num1 = document.querySelector('.img') let num2 = document.querySelector('.text') // 2.

2.1K3 0

记好这24个ES6方法，用于解决实际开发的JS问题

({4 ...acc,5 [key]: value6 }),7 {}8 );910 // 事例11 formToObject(document.querySelector...为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30 天挑战学习计划》，内容如下：HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发...从学习一开始就进入工作状态，省得浪费时间。...只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路！过程中不涉及任何费用和利益，非诚勿扰。如果你没有添加助理老师微信，可以添加下方微信，说明要参加 30 天挑战学习计划，来自腾讯云社区！...30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程

1.6K0 0

关于 JavaScript 错误处理的最完整指南(上半部)

如果异常未被捕获，也就是说，程序员不采取任何措施来捕获它，程序将崩溃。何时何地捕获代码中的异常取决于特定的用例。例如，我们可能想在堆栈中传递一个异常，以使程序完全崩溃。...要从生成器中提取值，我们可以使用两种方法: 使用 next() 方法通过 for...of 遍历如下所示，要想在生成器中获取值，我们可以这样做： function* generate() { yield...= go.next().value; // 99 成器也可以采用其他方法工作：它们可以接收调用者返回的值和异常。...除了next()之外，从生成器返回的迭代器对象还具有throw()方法。...当执行到 setTimeout回调时，try/catch 早已跑完了，所以异常就无法捕获到。

2.4K3 0

ChatGPT协助我完成博客代码块添加复制代码和显示代码语言功能

如果不创建元素，就无法将文本放入剪贴板中，因此不能实现复制操作。...PS：能问出这个问题很明显我就不是搞前端的，但是这也就是为什么我觉得作为一个对前端一知半解的人也能做出一个完整项目的原因，那就是多发问，多思考。...在执行完复制操作后，需要将其从文档中移除，以免对页面造成影响。... 将语言类型提取后显示后端渲染后的 html 里面终于有的了语言类型的信息，这个时候要实现在前端展示就很容易了，只需要使用 js 从原来的 code...在我看来，ChatGPT 对编程人员来说还是非常好用的，完全可以当作一个工作上面的助手，我现在豪不夸张的说就是面向 ChatGPT 编程了，很多工作和个人的编程都会参考 ChatGPT 给的方案，小到一个

2.1K1 0

深入讲解 Vue 中实现原理

前言随着 Vue2.0 的发布，前端入门的要求也越来越低，已至于 Vue 已经成为一个前端的标配，最近也面了很多前端开发工程师，发现大部分都停留在用的阶段上，建议大家看看源码，学学 Vue 的思想...Vue 的双向数据绑定是通过数据劫持 + 发布订阅模式（不兼容低版本）+ 数据代理的方式来实现的。...今天主要讲 Vue Vue 不兼容低版本，是因为低版本浏览器不兼容 Object.defineProperty 这个属性，我们首先了解一下正常情况下定义的对象。...的形式来获取值。遇到再复杂的数据结构就会更乱。然而我们想要通过mvvm.msg 方式来获取数据（去掉_data）。...$el = document.querySelector(el); var Fragment = document.createDocumentFragment(); //把模板放入内存当中 while

9642 0

01_Cookie&WebStorage

Cookie是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。...1.1 Cookie的作用对于前端来讲，Cookie可以存储一些临时数据，在页面之间共享，并且可以在页面关闭后，再开打开，还可以继续获取。...key=value 注：Cookie需要借助Web服务器，以文件形式打开的页面，无法使用Cookie。...借助浏览器的缓存，整个页面和数据都可以保存在本地，从本地读数据比通过网络从服务器获得数据快得多，可以立即显示网页中的缓存的内容。数据可以临时存储。...从硬件方面理解，localStorage的数据是存储在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取localStorage保存的数据。

7190 0

vue之Cookie

7040 0

面试官：Vue3响应式系统都不会写，还敢说精通？

前言都说今年是最惨工作年，大厂裁员，小厂跟风，简历投了几百封回信的寥寥无几，金三银四怕是成了铜三铁四，冷冷清清，凄凄惨惨。... const $app = document.querySelector('#app') let state = { text...，只要拦截state对象，在对text进行取值时，收集effect函数依赖，然后text设置值时，把收集的effect函数执行一波就可以。...('#app1') const $app2 = document.querySelector('#app2') const state = { text: 'hello fatfish',...= target[ key ] // activeEffect无值意味着没有执行effect函数，无法收集依赖，直接return掉 if (!

5543 0

跨域

callback=showData"> 前端提前定义好showdata这个函数。...如果我不用json.stringify传递的news就是一个字符串，html里面就无法当成数组使用 ?...，这时我们无法拿到响应数据。...(selector) } 4、执行结果用http://127.0.0.1:8080/index.html，不跨域的打开index.html发送请求时，请求头内部没有...('.main input').addEventListener('input', function(){ console.log(this.value); window.frames[0].document.querySelector

2.6K2 0

点击加载更多

JavaScript 学习-28.元素与节点(HTMLCollection 和 NodeList)

h5 补白（1）

Web安全之CSRF实例解析

Web APIs第三天

JavaScriptJQuery基本使用

【JS】328- 8个你不知道的DOM功能

最易理解的VUE双向绑定原理不足70行代码搞定，逐行注释！

AI 入侵编程界，此次 “大变革”下，程序员的焦虑与突围之路

Web 多线程开发利器 Comlink 的剖析与思考

重新认识下网页水印

微前端框架chunchao(春潮)开源啦

Web APIs第一天

记好这24个ES6方法，用于解决实际开发的JS问题

关于 JavaScript 错误处理的最完整指南(上半部)

ChatGPT协助我完成博客代码块添加复制代码和显示代码语言功能

深入讲解 Vue 中实现原理

01_Cookie&WebStorage

vue之Cookie

面试官：Vue3响应式系统都不会写，还敢说精通？

跨域

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐