第一次记录

js的 attribute的作用

emm attribute的属性 是返回一个指定节点的属性集合 还可以用length属性来确定属性的数量
代码示例:

<!DOCTYPE html>
<html>
<body><p>点击按钮来查看 button 元素拥有多少属性。</p><button id="myBtn" onclick="myFunction()">试一下</button><p id="demo"></p><script>
function myFunction() {var x = document.getElementById("myBtn").attributes.length;document.getElementById("demo").innerHTML = x;
}
</script><p>结果应该是 2(button 元素的 id 和 onclick 属性)。</p><p><b>注释:</b>Internet Explorer 8 以及更早的版本中,attributes 属性将返回元素所有可能的属性的集合,在本例中,会返回大于 2 的数字。</p>
</body>
</html>

然后 attribute还有一些方法 然后 这次接触到了removeNamedIten()方法
可以删除指定dom节点的type属性

代码示例:


<!DOCTYPE html>
<html>
<body><input type="button" value="OK"><p id="demo">点击按钮来删除 input 元素的 type 属性。</p><button onclick="myFunction()">试一下</button><script>
function myFunction()
{var btn=document.getElementsByTagName("INPUT")[0];
btn.attributes.removeNamedItem("type");
}
</script><p><b>注释:</b>当删除 input 元素的 type 属性后,此元素的类型将是 <em>text</em>,即默认值。</p><p><b>注释:</b>在 Internet Explorer 8 以及更早的版本中,removedNamedItem 不会返回属性。</p></body>
</html>

还有 一个就是 onchange事件

onchange事件的话 是在 切换时才会发生改变 和点击事件不同
有些时候时候需要点击来弹出类型 在选择不同类型进行数据的渲染 使用点击事件的话就直接触发了 就会数据渲染慢一步 所以就可以用onchange事件进行代替 只有发送改变了之后才会触发

js的attribute相关推荐

  1. 原生js中attributes属性

    原生js中attribute属性 <div id="box" title="盒子" class="big"></div&g ...

  2. attribute attr prop 区别

    attr 与 prop的区别是什么? 这篇微博解释的很清楚 那么,什么时候使用attr(),什么时候使用prop()? *添加属性名称该属性就会生效应该使用prop(); *是有true,false两 ...

  3. 小黑小波比.点击头像直接上传的实现

    2019独角兽企业重金招聘Python工程师标准>>> Client/Views/Admin/person.tpl 1.html页面代码,上传文件控件和头像叠放重合,并且把上传控件设 ...

  4. 19-7-14 学习笔记

    一.什么是DOM 文档对象模型 (DOM) 是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容.DOM 将文 ...

  5. Web前端——JavaScript(dom文档对象模型)

    >JS的Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 对象的方法: ...

  6. html5 图片羽化,html5+webgl仿ps羽化笔刷液态动画特效

    html5 canvas基于webgl制作的仿ps羽化笔刷液态动画特效,羽化笔刷跟随鼠标移动绘画,很有梦幻效果. 查看演示 下载资源: 5 次 下载资源 下载积分: 20 积分 js代码 attrib ...

  7. JavaScript小记(持续更新)

    注意:(2020.01.14) 后续将都在我的学习笔记文档 - JavaScript小记中进行更新,该文章不再更新,请持续关注上述网页 学习js遇到的疑问和js基础都记录在这里,持续更新中. 2019 ...

  8. Web 加载速度优化清单,让你的网站快上加快

    网页加载速度是衡量一个网页好坏的重要标准,网页遗弃率随网页加载时间的增加而增加.据说近一半的用户希望网页加载时间不超过 2s,超过 3s 一般就放弃该网页.时间就是生命,干等着,谁愿意平白无故地 +1 ...

  9. webgl不同图像不同纹理_WebGL教程:图像处理

    webgl不同图像不同纹理 In this tutorial you will learn how to use WebGL for image processing. We will cover b ...

最新文章

  1. nginx+keepalived高可用web架构
  2. 神经网络中的批量归一化Batch Normalization(BN)原理总结
  3. codility上的问题(26) Hydrogenium 2013
  4. vlan、三层交换机、网关、DNS、子网掩码、MAC地址
  5. composer update 的时候提示the requested PHP extension pcntl is missing from your system.的方法处理
  6. matchers依赖_Hamcrest Matchers,Guava谓词和Builder设计模式
  7. wepy 父调用子组件方法_wepy踩坑小记(一)
  8. js学习(node.js环境)
  9. 将本地项目上传到gitLab操作
  10. Typora 快捷键设置
  11. 配置nginx+wordpress的https
  12. eclipse svn插件安装_eclipse 2020-03 (4.15.0) SVN 插件在线安装教程
  13. 使用SHELLEXECUTEINFO 和 ShellExecuteEx
  14. 论文阅读_TASE: Reducing Latency of Symbolic Execution with Transactional Memory
  15. 专访杨翰深先生 | Mockplus企业版为什么能获得贵州银行的青睐?
  16. ps打开图片的三种方式 同步部分基本操作方式
  17. 劳动者可以拒绝加班吗
  18. 倒角距离(Chamfer distance)
  19. 【转载】:Autolisp:利用AuoCAD之Lisp编程案例之智能加工齿轮的演示程序-----一个处女座程序猿
  20. 微信中下载app无反应 微信浏览器无法apk下载链接方案

热门文章

  1. 计算机系求职信英语作文,计算机专业求职信英文
  2. 在线拼接图片工具HTML源码
  3. 关于数字证书数字签名以及CA的关系梳理
  4. OpenGL: OpenGL实现立体显示
  5. 网页设计如何排成一列_制作网页该怎么做排版
  6. python什么是面向对象编程_python面向对象编程
  7. Xposed框架的简单使用
  8. 苹果博客解读iPhone上的人脸识别深度神经网络
  9. 面向Java开发者的ChatGPT提示词工程(5)
  10. 论文阅读:MAVL: Multiresolution Analysis of Voice Localization