setAttribute、getAttribute、removeAttribute

问题：下面两者的区别

box.setAttribute("liang", "456");
box.liang = 789;

<body><div id="box" liang="123"></div>
</body><script>const box = document.getElementById('box');/*// 标签里元素里的自定义属性box.setAttribute('liang', '456');console.log(box.liang); // 输出undefined*//*// JS里对象的 自定义属性box.liang = 789;console.log(box.liang); // 输出789*/console.log(box.liang); // 输出undefined
</script>

setAttribute 设置的是标签里的liang

box.liang 设置的是box这个对象里的属性liang

   它跟标签是没有关系的，既不能修改div标签里的liang，也不能获取输出789，输出的是box这个对象的属性liang被 box.liang这条语句设置为值 789
而不是 div标签里的liang的值 被 box.liang这条语句修改成789

栗子1：

<script>window.onload = function () {let inp = document.getElementById('inp');inp.value = 'liang';};</script>
</head><body><input type="text" id="inp">
</body>

页面立即显示 liang

打开控制台，查看Element

发现并没有value这个属性，也就是说输出的是 box这个对象上的 value属性值，而不是input标签里的value属性值

栗子2：

<script>window.onload = function () {let inp = document.getElementById('inp');inp.value = 'liang';/*inp.setAttribute('value', 'liang');*/};</script>
</head>
<body>
<div id="box" liang="123"><input type="text" id="inp" value="123"><p></p><span></span><img src="#" alt="">
</div>
</body>

立即输出liang
查看Element：

标签内的value 没有改变

栗子3：

/*inp.value = 'liang';*/inp.setAttribute('value', 'liang');

页面也立即输出liang
打开控制台查看Element

发现标签里添加了value属性

栗子4：

<script>window.onload = function () {let inp = document.getElementById('inp');/*inp.value = 'liang';*/inp.setAttribute('value', 'liang');};</script>
</head>
<body><input type="text" id="inp" value="123">
</body>

页面立即输出liang
查看Element：

标签内的value属性改为了 liang

在控制台操作以下输入：
原始状态：

操作1：

无需刷新，立即输出123

操作2：

查看element，已做改变：

页面没有改变，控制台输出undefined

操作3：

无需刷新，直接显示 789

可以看出，当不刷新页面时，setAttribute输出undefined。
原因：
inp.value在修改值的过程中，修改的不是标签内 value属性的值，而是修改input里的值。
而setAttribute 修改的是 value属性的值，但不会触发视图更新

所以只用setAttribute 操作非法的自定义属性的标签属性节点

栗子：

<script>window.onload = function () {let inp = document.getElementById('inp');inp.value = 'liang';/*inp.setAttribute('value', 'liang');*/};</script></head>
<body>
<div id="box" liang="123"><input type="checkbox" id="inp" checked="123"><!--不管checked 的值是什么，复选框都会被选中-->
</div>

控制台输入：

复选框默认选中，就算checked是个空值，也会是选中状态

如何让复选框不选中？

inp.checked = false;

但是 inp.setAttribute(“checked”, false); 还是选中状态
那么可以 inp.removeAttribute(‘checked’);

setAttribute、getAttribute、removeAttribute相关推荐

原生js自定义属性的操作：setAttribute、getAttribute、removeAttribute、hasAttribute
<input type="button" id="btn" a='18' value="按钮"> var btn = docum ...
JS自定义元素节点/属性的使用 createElement、setAttribute、getAttribute、appendChild
文章目录自定义元素节点/属性如何创建创建元素节点自定义元素属性实列:创建一个input框在指定的盒子里如果想要添加到指定的盒子之后可以使用转到父节点追加自定义元素节点/属性顾名思义,自 ...
【转】比较page、request、session、application的使用范围
(1)直接在web contain中进行对象的实例化. 内置对象类型作用域 pageContext javax.servlet.jsp.pageContext page request javax ...
JAVAWEB开发之HttpServletResponse和HttpServletRequest详解(下)（各种乱码、验证码、重定向和转发）
HttpServletRequest获取请求头信息 (1)获取客户机请求头 String getHeader(String name) Enumeration<String> getHe ...
getAttribute()、setAttribute()、removeAttribute()的方法使用以及区别。
1.getAttribute(): 方法返回指定属性名的属性值接受一个参数. 注:通过对象获取属性,只能获取到原始属性: User user = (User) session.getAttribut ...
setAttribute、getAttribute 和 getParameter
一.setAttribute setAttribute这个方法的作用就是保存数据,然后还可以用getAttribute方法来取出,在JSP内置对象session和request中都有这个方法. set ...
深入Jetty源码之Servlet框架及实现(AsyncContext、RequestDispatcher、HttpSession)
概述 Servlet是Server Applet的缩写,即在服务器端运行的小程序,而Servlet框架则是对HTTP服务器(Servlet Container)和用户小程序中间层的标准化和抽象.这一层 ...
JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）...
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
Java 面向对象编程、jQuery、JavaScript、servlet、javabean----理论知识
一.继承 1.继承(优点:代码复用方便修改) 1.1 继承的关键字:extends 1.2 实现继承步骤(1.编写父类 2.编写子类继承父类) 1.3 调用父类方法的关键字:s ...

setAttribute、getAttribute、removeAttribute

setAttribute、getAttribute、removeAttribute相关推荐

最新文章

热门文章