当innerHTML遇上document.getElementById

最新推荐文章于 2024-04-19 10:18:52 发布
最新推荐文章于 2024-04-19 10:18:52 发布
阅读量4.5k 收藏 1
点赞数
分类专栏： Web2.0 文章标签： javascript function button html 文档 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SoS1437/article/details/4142785
版权

      不知在通常的开发中，大家有没有遇到过这样的问题。

      例如现在有一个控件 ,如果想取这个控件的值有很多中方法，其中document.getElementById('name').value既是其中的一种。但是在实际的开发中可能碰到使用这个方法取不到值的情况。为了解决这个问题，我们有必要明白document.getElementById()这个函数的原理。

      这个函数是基于DOM树模型的，其中的id必须是唯一的。如果，id不唯一，取得是DOM树模型中第一个具有该标识的对象。因此，当使用这个函数取不到值时，因该检查一下在使用这个函数之前，是否有这个id，是否有同名的标识。

      innerHTML通常用来更改小区间的文档内容，可以和动态语言相结合达到很好的动态显示内容的效果。从DOM树模型来看，使用innerHTML可能对文档模型发生修改。这个时候使用JS来操作被修改区域的对象的时候，就需要从整体出发，尤其要注意ID是否重复。

      下面介绍一个让人迷惑的实例。

      

       这个HTML的基本思路是，由一个Div层作为container，动态的控制Div层中的内容。但是在浏览这个页面的时候，你会发现，使用alertAOutSide()和alertBOutSide()函数都取不到对应的填入的值,同时取到的值总是为空。

      通过这个现象，我们可以发现，在函数alertAOutSide()中所取到的对象和直接onclick后alert语句中的对象不一样。那么这是为什么呢？

      通过仔细分析文档结构，可以发现，当对container的div的innerHTML赋值完以后，innerHTML中就想到也增加了一个a<input type="text" id="Aname" name="Aname" οnclick="alert('AName='+this.value);alertAOutSide()"/>这样的语句，于是这个文档中就有两个id为Aname的对象。我们所填入的值是在第二个里，而我们用document.getElementById的时候取得是第一个值，第一个的值总是空，所以总是取不到值。

      明白了原因也就好解决了。解决的思路就是避免名称冲突。解决方法有很多种。基本都是使用display来控制，或者style.visibility来控制。下面给出一种解决方法。

     

SoS1437
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
轻量级模板引擎SodaRender.zip
07-17
SodaRender 是轻量级的模板引擎。当前只支持 IE9，Chrome 和移动端的所有浏览器。SodaRender语法源自于AngularJS，前端框架Abstract.js已经内置SodaRender引擎，SodaRender引擎应用于腾讯手机QQ中，已被证实是一款优秀的模板引擎用法示例：Exampleshtml>head>title>SodaRender Examapletitle>head>div>ul id="targetUl">script type="text/soda" id="dataList">li soda-repeat="item in list" soda-if="item.show">{{item.name}}li>script>ul>div>html>var templateStr = document.getElementById("dataList")[removed];var target = document.getElementById("targetUl"); var data = {  list: [  {name: "A"},        {name: "B"}     ] };  var result = sodaRender(templateStr, data);target.appendChild(result);APIs Of SodaRendersodaRenderUSING :   SodaRender(String templateStr, Object data)DESCR :   Using templateStr with data to render templateRETURN: DOM Fragmentthe DOM Frament Object has a method innerHTML which will return the rendered HTML code.Meanwhile, you can use it like a common DOM Node, such as appending it to your target node.sodaFilterUSING :   SodaFilter(String filterName, Function func(input, args...))DESCR :   Defining Filters, so you can use filters in templateTemplate Language (AngularJs Template Like)More directives have been added{{}}out put expressions{{item.name 1}}soda-repeatsoda-repeat="item in array"soda-repeat="item in array track by index"soda-repeat="(key, value) in object"USING :   SodaRender(String templateStr, Object data)DESCR :   Using templateStr with data to render templatesoda-ifsoda-if="item.show"soda-classsoda-class="currItem === 'list1' ? 'active' : ''"soda-srcsoda-src="hello{{index}}.png"soda-bind-htmlsoda-bind-html="click"soda-stylesoda-style="style"soda-*soda-rx="{{rx}}%"filters{{input|filte1:args1:args2...|filter2:args...}} how to define filters? Just using sodaFilter Method as methioned above. Here is an example.sodaFilter('shortTitle', function(input, length){ return (input || '').substr(0, length); });Template belowdiv soda-repeat="item in list">div class="title">{{item.title|shortTitle:10}}div>div> 标签：SodaRender
innerHTML和innerText的用法（动态改变网页内容）
walsh_bupt的博客
11-04 2034
最近在学习JavaScript，觉得innerHTML和innerText太有用了，利用它们，我们可以试自己的网页实现动态化。不过在使用的过程中，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态内容了，不可错过哦！ [b]一:动态改变文本和Html [/b] [code="html"] ...
document.getElementById(‘xxx‘).innerHTML = lineLink解释
fury的博客
02-02 163
在这个特定的例子中，`document.getElementById('xxx')` 方法获取了 ID 为 `xxx` 的元素，然后将该元素的 `innerHTML` 属性设置为变量 `lineLink` 的值。这意味着该元素将显示 `lineLink` 变量的值。这段代码使用 `document.getElementById()` 方法获取了一个 ID 为 `xxx` 的元素，并将该元素的 `innerHTML` 属性设置为 `lineLink` 变量的值。
document.updateDOM:随时更新DOM
05-03
关于 document.updateDOM()在CALL上更新DOM 。 遍历对DOM所做的更改。 这样您就不必担心浏览器意外接触DOM 。 我实际上还没有建立任何东西。 我想尝试用它做点什么，但是玩起来会很有趣。 同样，这很容易使人厌烦 用法 特性 document . body . id = 'body' ; // doesn't set the actual id attribute on the body element document . body . innerHTML = '<h1>Hello World</h1>' ; // doesn't change the actual inner HTML of the body element document . updateDOM ( ) ; // now all the changes above actually ch
document.getElementById()报错处理
cnds123的专栏
09-15 8014
本文介绍document.getElementById()报错原因及处理
document getElementById innerHTML
weixin_43726152的博客
05-06 7044
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如： 这是内容 ，我们可以通过 document.getElementById(‘demo’).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById(‘demo’).innerHTML=‘这是被插入的内容’; 这样就能向id为abc的对象插入内容...
js中document.getElementById()用法
热门推荐
lyhmyway的专栏
03-03 6万+
dom标准里面的  获取当前文档中指定id的元素 if (document.getElementById("regjm").value != document.getElementById("regjm1").value ) {    alert("提示：请输入有效的认证码");    document.getElementById("regjm1").focus();    retur
使用innerHTML属性创建动态内容
tycsl的专栏
11-16 2219
如果将服务器响应作为简单文本来访问，则灵活性欠佳。简单文本没有结构，很难用JavaScript进行逻辑性的表述，而且要想动态地生成页面内容也很困难。如果结合使用HTML元素的innerHTML属性，responseText属性就会变得非常有用。innerHTML属性是一个非标准的属性，最早在IE中实现，后来也为其他许多流行的浏览器所采用。这是一个简单的串，表示一组开始标记和结束标记之间的内容。
element-plus form的自定义验证（嵌套element-plus中的动态标签）
q1025387665a的博客
10-11 3070
前言： 进入正题之前请确保你已经学会element中的表单基本验证方法，如果不，这篇文章可能会让你感觉到有点吃力。 首先先讲明白思路 第一，把验证规则的trigger选项置空，防止它重复触发验证， 我们需要在我们自己的函数内手动触发验证。 第二，了解一点、关于动态标签的生成时，handlerInputConfirm与handlerClose 都会 触发一遍，这个是不可避免的。 第三，我们需要标签的长度，以作0个标签让表单不能通过。 rules 如下 technologyStack: [
vue3+element-plus+ts elplus table 实现表格动态列 表格列显示与隐藏的动态控制
yuey0809的博客
05-26 7515
工作接了个需求，需要实现表格的动态列，但是后端又不参与，全权交给前端，百度搜了一下，大多都是的for循环，我觉得用起来不爽，还得改变的书写方式，用对象保存列的相关信息，所以搞了一个这玩应话不多讲，上代码哦，不对，先上效果 动态图没做过，见谅吧简介： ProjectTable组件内容 store仓库 index.ts文件 getters.ts文件 table.ts文件 Home页面 总结 这玩应在使用时除了引用ColumnControl和ProjectTable两个组件以外，与你普通书写el-
document.getElementById(…).innerHTML is not a function解决方案
weixin_44246036的博客
09-23 2207
document.getElementById(…).innerHTML is not a function解决方案
innerHTML 和 getElementsByName 在IE下面的bug 的解决
09-05
innerHTML 真的一个麻烦的东西。IE 和 firefox 对dom 处理的方式不是很一样。IE 对动态加载的很多dom 不支持动态更新。
关于innerHTML后丢失动态绑定的EVENT问题解决方法
01-19
script: 代码如下: document.getElementById(‘d1’).onclick=function(){alert(1)}; var html=document.body[removed]; document.body[removed]=html; 这段代码执行后点击d1是没有任何反应的。 解决方法：...
innerHTML的使用
06-14
innerHTML的使用document.getElementById("id").innerHTML = "contenttext";
innerHTML-outerHTML-innerTEXT.txt
12-08
innerHTML-outerHTML-innerTEXT
使用 Fetch API 执行 GraphQL 查询和变体
ikxin的博客
04-15 1117
GraphQL 是从远程服务器查询数据的强大工具，也是我构建 API 的首选方式。对一些人来说，学习它可能有一定难度，因为教程通常使用 Apollo 或 Relay 等工具进行编写。这些工具很不错，但通常更适用于复杂项目。在某些情况下，最好选择更轻量级的方法，并且不要通过添加额外的库增加包大小。在这种情况下，你可以直接使用浏览器中提供的工具，在本快速教程中，我们将使用在你的浏览器中通常可用的fetch。让我们首先简单地回顾一下fetch。
JEECG表格选中状态怎么去掉
最新发布
weixin_39031037的博客
04-19 145
官网代码（在取消选中状态的时候不生效）
PLSQL的下载与安装
code袁的博客
04-18 300
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
js的filter函数
xiaohua0708day的博客
04-14 289
这个函数接收数组中的每个元素作为参数，并检查该元素是否是偶数。如果是偶数，函数返回。是一个数组方法，它创建一个新数组，其包含通过提供的函数实现的测试的所有元素。函数遍历数组中的每个元素，并只将那些使测试函数返回。在这个箭头函数版本中，我们直接返回了表达式。在上面的代码中，我们传递了一个匿名函数给。方法就会将该元素包含在新数组中。，则该元素会被包含在新数组中。在JavaScript中，的元素包含在新数组中。
// 全局水印 let setWatermark = str => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let can = document.createElement('canvas') can.width = 200 can.height = 200 let cans = can.getContext('2d') cans.rotate((-15 * Math.PI) / 150) cans.font = '14px Vedana' cans.fillStyle = 'rgba(200, 200, 200, 0.40)' cans.textAlign = 'left' cans.textBaseline = 'middle' cans.fillText(str, can.width / 8, can.height / 2) let div = document.createElement('div') div.id = id div.style.pointerEvents = 'none' div.style.top = '0px' div.style.left = '0px' div.style.position = 'fixed' div.style.zIndex = '100000' div.style.width = document.documentElement.clientWidth + 'px' div.style.height = document.documentElement.clientHeight + 'px' div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat' document.body.appendChild(div) return id } const set = str => { let id = setWatermark(str) setInterval(() => { if (document.getElementById(id) === null) { id = setWatermark(str) } }, 500) window.onresize = () => { setWatermark(str) } } const outWatermark = id => { if (document.getElementById(id) !== null) { const div = document.getElementById(id) div.style.display = 'none' } } const out = () => { outWatermark('1.23452384164.123412415') } const reset = str => { out() set(str) } export default { set, out, reset, } 帮我优化代码
06-01
以下是对代码的简要优化： 1. 去除重复代码 将 `setWatermark` 函数和 `outWatermark` 函数中的重复代码提取出来，作为一个单独的函数。 2. 使用箭头函数 将所有函数都改为箭头函数，以简化代码。 3. 使用 const 和 let 将所有变量声明方式都改为 `const` 或 `let`，以便更好地控制变量的作用域。 4. 简化代码逻辑 将 `set` 函数中的定时器逻辑改为判断页面是否有水印，如果没有则添加水印。 优化后的代码如下： ``` const setWatermark = str => { const id = '1.23452384164.123412415' const watermarkDiv = document.getElementById(id) if (watermarkDiv !== null) { document.body.removeChild(watermarkDiv) } const canvas = document.createElement('canvas') const context = canvas.getContext('2d') canvas.width = 200 canvas.height = 200 context.rotate((-15 * Math.PI) / 150) context.font = '14px Vedana' context.fillStyle = 'rgba(200, 200, 200, 0.40)' context.textAlign = 'left' context.textBaseline = 'middle' context.fillText(str, canvas.width / 8, canvas.height / 2) const div = document.createElement('div') div.id = id div.style.pointerEvents = 'none' div.style.top = '0px' div.style.left = '0px' div.style.position = 'fixed' div.style.zIndex = '100000' div.style.width = document.documentElement.clientWidth + 'px' div.style.height = document.documentElement.clientHeight + 'px' div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat' document.body.appendChild(div) return id } const outWatermark = id => { const watermarkDiv = document.getElementById(id) if (watermarkDiv !== null) { watermarkDiv.style.display = 'none' } } const set = str => { setWatermark(str) window.onresize = () => { setWatermark(str) } } const out = () => { outWatermark('1.23452384164.123412415') } const reset = str => { out() set(str) } export default { set, out, reset, } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值