js删除添加div,判断判断DOM节点是否存在

最新推荐文章于 2022-08-19 19:38:50 发布
最新推荐文章于 2022-08-19 19:38:50 发布
阅读量3.3k 收藏 1
点赞数
分类专栏： javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42553433/article/details/87985474
版权

解析：JavaScript原生函数没有提供判断DOM节点是否存在方法，我们通常获取DOM节点几乎都是document.getElement…方法，会返回一个object数组合集，我们可以通过object[0]，object[1]这样来访问这个合集的每一个对象。既然返回的是数组合集，那么就有length属性，而length大于等于1即表示DOM节点存在页面中

在这里插入图片描述
图中红线部分是自己反复测试后总结的！

！！！更新！！！！

上面解析有缺陷，就是用length判断时，不适用于没有子节点的div.
如：判断这个div是否存在：<div id="div>这里空空
解决方法：判断是否为null
在这里插入图片描述

YDLwordpython
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS的确认DIV
underpersimmon的专栏
04-18 746
function $(a){  return document.getElementById(a)}function calculateOffset(field, attr){ var offset = 0; var count = 0;   while(field) {     offset += field[attr];     field = field.offsetParent;   } 
JavaScript DOM节点添加示例
01-19
<div id=div1> 这是一个段落。 这是另一个段落。 </div> [removed] var para=document.createElement(h1); var node=document.createTextNode(这是新段落。); para.appendChild(node); //将node里面的str放到h1段落...
JS判断元素是否含有子元素
weixin_44589374的博客
05-08 7649
JS判断元素是否含有子元素 Element.childNodes.length 获取元素子节点数组的长度 var r=document.getElementsByTagName("div"); for(var i=0;i<r.length;i++) { if(r[i].childNodes.length==0) {
js,jquery判断一个id对象是否存在
请告诉他
09-29 966
假如我们页面中一个div块是根据数据有无决定是否显示在页面，那么当我们js执行需要这个div的id获取这个对象时候，怎么判断呢 如下 var titelObj = $("#divId"); if (titelObj.attr("id") == undefined) { return; } ...
在 JavaScript 中检查元素是否存在于 DOM 中
six6de6的博客
08-19 3275
在 JavaScript 中检查元素是否存在于 DOM 中
JQuery------判断拥有某个class或id的div是否存在
weixin_30878361的博客
10-17 401
if ($(".Btn,#Show").length > 0) { alert("存在"); } else { alert("不存在"); } 转载于:https://www.cnblogs.com/tianhengblogs/p/5969207.html
javascript原生DOM知识总结
Buddha_ITXiong的博客
03-16 577
DOM是什么？dom是Document Object Model的缩写，也就是文档对象模型的意思，它是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。上面对dom的解释比较官方不易理解，用我自己的话来解释的话：网页是由一系列的html组成，如果把每一个页面当成一棵树的话，那页面里面的html就是数的分支。同样把dom也当成一棵树的话，那么d...
DOM基础+domReady+元素节点类型判断
qq_35382207的博客
08-08 476
DOM节点类型 nodeType element 1 Node.ELEMENT_NODE 元素节点 attr 2 Node.ATTRIBUTE_NODE 属性节点 text 3 Node.TEXT_NODE 文本节点(标签之间的空白区域也属于文本节点） comment 8 Node.COMMENT_NODE 注释节点 document 9 Node.DOCUMENT_NODE 文档节点（所有文档之上，即一个页面中最最前面的位置，在文...
js Node.contains()方法 判断是否含有某子节点
衣乌安、随笔
04-19 6663
Node.contains()返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。 下面的函数用来检查一个元素是否是body元素的后代元素且非body元素本身. function isInPage(node) { return (node === document.body) ? false : document.body.contains(node); } node...
js 判断一个属性是否存在
weixin_42810470的博客
06-02 361
这里直接上例子： <div id="inputCpy" hidden="hidden"></div> 判断div 有没有hidden 属性： if（typeof($("#inputCpy").attr("hidden"))!="undefined"）{ // Hidden 属性存在 }else{ // Hidden 属性不存在 } $("#inputCpy").attr("hidden")的值是“hidden”,typeof($("#inputCpy").att
js 判断某个元素在页面上是否存在的方法
qq_33019839的博客
11-10 4857
前端的JS脚本的运行，大多离不开DIV元素，比如在网页的某个区域显示一些内容或改变一些DIV元素的背景颜色等等，但如果在操作DIV时，不确定指定的DIV元素是否存在怎么办？那么飞鸟慕鱼博客的小编就给大家说一说，在js中如何判断一个div元素是否存在。 jquery 判断DIV元素是否存在 示例代码： <script> if($('#div').length > 0){ ...
利用vue.js插入dom节点的方法
12-29
本文主要介绍的是vue.js插入dom节点的方法，下面话不多说，来看看详细的介绍吧。 html代码： <div id=app></div> js代码： var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var ...
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
angular动态删除ng-repaeat添加的dom节点的方法
01-21
本文介绍了angular动态删除ng-repaeat添加的dom节点的方法，分享给大家供大家参考，具体如下： 通过点击删除按钮删除数据库信息以及当前行 html代码如下: <div class=row> <div class=col-xs-12> <!-- PAGE ...
react.js 获取真实的DOM节点实例(必看)
11-26
为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput....
java正则校验，密码必须由字母和数字组成
热门推荐
wordpython
11-04 1万+
登陆注册需要验证用户名和密码是否合法，如：由数字和字母组成，并且要同时含有数字和字母，且长度要在6-16位之间。 1，不能全部是数字 2，不能全部是字母 3，必须是数字或字母 只要能同时满足上面3个要求就可以了，写出来如下： ^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$ 注释一下： ^ 匹配一行的开头位置 (?![0-9]+$) 预测该位置后面不全...
org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].Standard
wordpython
03-03 8371
先来报错的截图： 很明显，我这里报错的提示是：两个servlet文件都映射到了同一个urp-pattern[/mail],这是不允许的！我用的是注解，明显上面两个注解一样 ...
mybatis一对多查询 Cause: java.lang.IndexOutOfBoundsException: Index: 3, Size: 3
wordpython
10-28 7394
报错信息：The error occurred while handling results ### Error querying database. Cause: java.lang.IndexOutOfBoundsException: Index: 3, Size: 3 ### The error may exist in file [C:\major\IntelliJ IDEA 2019...
javaweb项目上传后，连接不上数据库的原因分析
wordpython
03-11 6377
1.没有修改配置文件，连接本地数据库是：jdbc:mysql://localhost:3306/数据库名 连接云数据库：jdbc:mysql://ip:3306/数据库名 2.云数据库登录的用户名和密码和本地不一样的话也要该 测试方法：可以在本地配置成：jdbc:mysql://ip:3306/数据库名，然后启动本地的to...
h5判断div中的内容超出两行
最新发布
05-20
可以通过以下方式来判断一个 div 中的内容是否超出了两行： 1. 获取该 div 的高度和行高，计算出它可以显示的最大行数。 2. 获取该 div 中的文本内容。 3. 将文本内容插入到一个隐藏的 span 元素中，并设置其宽度为该 div 的宽度。 4. 获取该 span 元素的高度和行高，计算出它实际占据的行数。 5. 判断实际占据的行数是否大于最大行数，如果是，则说明内容超过了两行。 以下是一个示例代码： ```html <div id="myDiv">这里是一些内容...</div> ``` ```javascript var div = document.getElementById('myDiv'); var lineHeight = parseInt(getComputedStyle(div).lineHeight); var maxHeight = lineHeight * 2; // 最大高度为两行 var span = document.createElement('span'); span.style.width = div.offsetWidth + 'px'; span.style.visibility = 'hidden'; span.innerHTML = div.innerHTML; document.body.appendChild(span); var actualHeight = span.offsetHeight; document.body.removeChild(span); if (actualHeight > maxHeight) { console.log('内容超过两行'); } else { console.log('内容不超过两行'); } ``` 以上代码中，我们首先获取了 div 的行高和最大高度，然后创建了一个 span 元素，并将 div 中的内容插入到其中。接着，我们设置了 span 元素的宽度和可见性，并将其插入到 body 中，然后获取了其实际高度。最后，我们将 span 元素从 body 中删除，并判断实际高度是否超过了最大高度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值