Web API 笔记04
创建元素的三种方式:
1. innerHTML:
box.innerHTML = '<span> content </span>';
这种方式会覆盖掉原来的内容
常用,但不推荐创建表格
若要动态创建列表,可以通过下面的方式:
var data = [];
var str = '';
str += '<ul>';
for (var i = 0; i < data.length; i++) {
str += '<li>' + data[i] + '</li>';
}
str += '</ul>'
box.innerHTML = str;
若在新创建的标签里面注册样式,注册函数应该在标签创建之后就写
先创建,后注册
2. document.write
document.write('<span> content </span>');
不会放在script标签内,页面加载完成之前不会覆盖掉原来的内容
只能 document 调用,慎用,如果放在注册函数里面(页面加载完成后)会导致页面内容被替换
创建元素
var result = document.createElement('div');//注意是将元素放在单引号中
只能document调用,写标签名即可,返回一个标签
只是创建,没有添加到DOM树,需要用.appenChild(result); 进行插入。
用 for in 遍历对象 , for遍历数组
对象数组 var objArray = [{}, {}, {}, {}, {}, {},];
tips:
- textarea中的文字用value获取
confirm('你确定要……吗?'); //返回布尔值
判断字符串是否为空 用字符串.length == 0; 进行判断
函数体内停止函数的执行,用return。
Array.join('分隔符');
用于把数组转换为字符串。
节点补充:
(基础方法:.children .childNode)
-存在兼容问题且不常用的:
.firstChild 第一个子节点
.lastChild 最后一个子节点
.firstElementChild 第一个子元素
.lastElementChild 最后一个子元素
(基础方法: nextSibling , previousSibiling)
.nextElementSibling
数组常用方法,伪数组不能用:
.forEach(function (item- 数组中的每一项, index - 下标, array - 哪个数组 - 可不写){
})// 遍历数组
.every(function (item- 数组中的每一项, index - 下标, array - 哪个数组 - 可不写){
return 判断条件;
}) //数组中每一个都符合条件就返回true, 必须写return, 存在短路机制。
.some(function (item- 数组中的每一项, index - 下标, array - 哪个数组 - 可不写){
return 判断条件;
(比如 return item > 10; )
}) //数组中只要有一个符合条件就返回true, 必须写return, 短路机制。
.map(function (item- 数组中的每一项, index - 下标, array - 哪个数组 - 可不写){
})//返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
.filterfunction(item - 数组中的每一项, index - 下标, array - 哪个数组 - 可不写){
return 判断条件;
} //过滤,返回符合条件的元素数组。