javascript innerHTML累加值问题~~求解

Posted 2023-05-06

我想实现innerHTML的累加，做了个框架，是将所有获取的元素存到数组里的，然后在使用innerHTML += ""便会出现问题：问题如下： 它们用的是统一的HTML代码<div class="div">         <div>AAA</div>         <div>BBB</div>        <div>CCC</div>    <div>DDD</div></div> /*********************************一、传统方法，可以通过**********************************/var dom = document.getElementsByTagName("div");    for(var i =0;i<dom.length;i++)       dom[i].innerHTML += "append";    /*********************************二、数组方法，只能累加第一个**********************************/    var temp = [];    var dom = document.getElementsByTagName("div");    for(var i =0;i<dom.length;i++)  //先把每个元素存到数组里       temp.push(dom[i]);        for(var j =0;j<dom.length;j++)  //然后从数组里调用       temp[j].innerHTML += "append";      //请分开测试，我求方法二的数组方式，应该如何实现方法一的功能？

参考技术A 发现问题所在了，因为你的Div写的不对。

你的DIV结构如下：
<div class="div">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<div>DDD</div>
</div>

通过document.getElementsByTagName("div")取到的对象有5个，而不是你期待的4个
temp[0] 其实等于 在外层的那个Div，因此上 temp[0].innerHTML += "append"; 已经把
整个第一层Div内部的元素全部改变了，成为以下：

<div class="div">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<div>DDD</div>
append
</div>

再往下的循环 temp[1] - temp[4] 实际上在页面上已经不存在了（在你保存的数组中存在，但是和页面上的不再是同一个Dom对象了），所以画面的表象就成了上面的样子，好像只累加第一个似的。如果去掉外面的那个Div，有以下的结果：

<div>AAAappend</div>
<div>BBBappend</div>
<div>CCCappend</div>
<div>DDDappend</div>

我的学习之路_第二十六章_javaScript

Javascript

【DOM操作】

获取元素
var obj = document.getElementById("id值");
获取值
obj.value;
设置值
obj.value=值;
获取标签体内容
obj.innerHtml;
设置标签体内容
obj.innerHtml=值;
使用正则表达式校验数据
1.编写正则表达式
1.用户名的正则 : /^[a-z0-9_-]{3,16}$/
2.密码:/^[a-z0-9_-]{6,18}$/
3.电子邮箱:/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
4.空字符串:/^\s*$/
2.使用正则表达式的test()方法
reg.test(value);

事件总结:
必须掌握
onsubmit:表单提交事件
onclick:单击事件
onload:页面加载成功事件
onfocus:获取焦点
onblur:丢失焦点
需要了解
跟鼠标相关:
onmouseup:鼠标弹起
onmousedown:鼠标按下
onmouseover:鼠标悬停
onmouseout:鼠标离开
onmousemove:鼠标移动
ondblclick:鼠标双击
跟键盘相关:
onkeyup:按键弹起
onkeydown:按键按下
onkeypress:按键按下并弹起
跟表单相关:
onreset:重置表单事件
onchange:改变事件

案例一:隔行换色
页面加载成功事件
获取元素
var arr = document.getElementsByTagName("xx")//获取到一组标签名字为xx的标签集合(多个)

遍历获得的名字数组
for循环 数组的属性:length(长度)

获取每一个tr arr[index] 获取元素
//变色
tr.style.backgroundColor="red"//变成红色

DOM:
文档对象模型
document 节点
元素节点
属性节点
文本节点
查询操作:
获取元素:
1.document.getElementById("X");//获取标签的id属性值为x的一个标签
2.document.getElementByTagName("y");//获取标签名为y的一组标签(多个)
3.document.getElementByName("z");//获取标签的name属性为z的一组标签
4.document.getElementsByClassName("w");//获取标签的class属性为w的一组标签(多个)
//获取值:
obj.value
//设置值:
obj.value=值
//获取标签体的内容
obj.innerHtml;
//设置标签体:
obj.innerHtml="<a href=‘#‘>点我试试</a>";
//获取样式
obj.style.css属性名:如果有-去掉 驼峰式命名
//设置
obj.style.css属性名=css属性值
扩展-其他的api:
document:
createAttribute(name):创建一个属性节点
createElement():创建一个元素节点
createTextNode(data):创建一个文本节点
element:
appendChild():添加子节点

编写函数的时候,在事件传递过程中,如果传入到参数列表中是this关键字,this代表的是当前触发该事件的元素

联动技术:
onchange:改变事件

数组:
语法:
数组的三种创建方式 var arr1=new Array();//创建一个空数组
var arr2=new Array(size);//创建爱你一个指定长度的数组
var arr3=new Array(ele1,ele2,ele3...);//创建一个数组,并初始化数据
注意:
js的数组中没有长度可变
js数组中可以存放不同类型
属性:
length : 长度
常用方法:
join();//用指定的分隔符 拼接字符串

往数组头部添加数据 unshift();
从数组头部删除数据 shift();
往数组尾部添加数据 push();
从数组尾部删除数据 pop();
会改变数组的结构 数组排序 sort(); 数组反转 reverse();

js的引用类型
1.array数组
在js中 原始类型 string boolean number
引用类型中 string boolean number
称之为原始类型的包装类 原始类型.方法();
2.string
new string(s);//object typeof运算符 object
string(s);//它是原始类型
常用属性: length:长度
常用方法:
substring(startindex,endindex); 包含头不包含尾
slice(startindex,endindex);
endindex:取值可以为负数 -1就表示倒数第一个
split();切割字符串
replace(正则表达式)
match(正则表达式)
3.number
new number();//object
number();//原始类型
4.Boolean
new Boolean();//object
Boolean();//原始类型
5.RegExp:
/直接量写法/
test()
6.Math:
Math.PI
Math.random();
Math.round();
7.Date
var date=new Date();
常用方法:
getTime();
toLocaleString()
8.全局函数
尝试转换为int整形数值
parseInt();
尝试转换为float浮点数
parseFloat();

强制转换数值类型
Number();
强制转换成字符串
String();

encodeURI():编码
decodeURI():解码

eval()//计算 JavaScript 字符串，并把它作为脚本代码来执行。