动态操作DOM元素
- 创建DOM元素节点：
document.createElement（“div”）； - 添加DOM元素：添加到父节点内容的末尾位置
父节点.appendChild(oDiv)
var oDiv = document.createElement("div");
oDiv.id = 'div1';
oDiv.innerHTML = 'ssss';
document.body.appendChild(oDiv);
- 创建文本节点：
document.createTextNode("")
var oDiv = document.createElement("div");
oDiv.id = 'div1';
var oTexts = document.createTextNode("aaa");
/*oDiv.innerHTML = oTexts;//这种方法是错误的*/
oDiv.appendChild(oTexts);//需要通过这种方式导入文本节点
document.body.appendChild(oDiv);
- 插入
父节点.insertBefore(newEle,oldEle);
var oDiv = document.createElement("div");
oDiv.id = 'div1';
var oTexts = document.createTextNode("aaaaaaaaaaaa");
oDiv.appendChild(oTexts);
//插入
var oDiv2 = document.getElementById("div2");
document.body.insertBefore(oDiv,oDiv2);
- 替换：
父节点.replaceChild(newEle,oldEle);
var oDiv = document.createElement("div");
oDiv.id = 'div1';
var oTexts = document.createTextNode("aaaaaaaaaaaa");
oDiv.appendChild(oTexts);
//替换
var oDiv2 = document.getElementById("div2");
document.body.replaceChild(oDiv,oDiv2);
- 删除：
父节点.removeChild(ele)
var oDiv2 = document.getElementById("div2");
document.body.removeChild(oDiv2);
- 克隆：
ele.cloneNode(true)表示把所有的后代都克隆，若不加参数ture表示只克隆元素本身。
var oP = document.querySelector("p");
var newp = oP.cloneNode();
document.body.appendChild(newp);
- 思考题：
//创建id为div1的标签并放入div2中，并将p标签深克隆 ，再将newp替换div1，删除p标签的em标签
var oDiv1 = document.createElement("div");
oDiv1.id = 'div1';
var oDiv2 = document.getElementById('div2');
oDiv2.appendChild(oDiv1);
var oP = document.getElementsByTagName('p')[0];
var newp = oP.cloneNode(true);
oDiv2.replaceChild(newp,oDiv1);
var oEm = document.getElementsByTagName('em')[1];
// var oEm = document.querySelector("p>em");//会找到克隆之后放在div2中的em标签 报错
oP.removeChild(oEm);
Math方法
- Math.sqrt() 开方
- Math.pow() 幂次方
- Math.abs() 绝对值
- Math.ceil() 向上取整
- Math.floor() 向下取整
- Math.round() 四舍五入
- Math.random()取0~1间的随机数，能取到0，但取不到1
- Math.max() 最大值
- Math.min() 最小值
随机数例子
//求出字符串中随机不想同的四个字母
var str = "asdfarhxcbsth";
function getRandom(str) {
var arr = []
while(arr.length < 4) {
var n = parseInt(Math.random() * str.length)
if(arr.indexOf(str[n]) == -1) {
arr.push(str[n])
}
}
return arr.join('')
DATE
var time = new Date(); //无参数表示以现在时间为基准创建一个日期对象
- 获取年：
var year = time.getFullYear(); - 获取月：
var month = time.getMonth() + 1;//获得西方月份0-11 要+1 - 获取日：
var date = time.getDate(); - 获取星期：
var week = time.getDay();//获得的是0-6 - 获取时：
var hour = time.getHours(); - 获取分钟：
var minute = time.getMinutes(); - 获取秒：
var second = time.getSeconds(); - 获取毫秒：
var millsecond = time.getMilliseconds(); - 获取相差毫秒：
var mtime = time.getTime();从现在距离1970年0时0分0秒的毫秒数,可以通过两个时间和1970相差的毫秒数，再做差比较两个时间相差的时间差。
定时器
- 设置间隔时间，隔多长时间再执行代码
- 设置定时器
setTimeout([function],interval)在间隔时间后只执行一次setInterval([function],interval)每隔一段时间就执行一次
- 清除定时器
clearTimeout(timer)timer定时器编号clearInterval(timer)timer定时器编号
var i = 0;
var timer = window.setInterval(function () {
i++;
console.log(i);
if(i==10){
clearInterval(timer);
timer = null; //以后可以通过timer值判断下定时器是否销毁。
//若timer值不为null，则说明定时器在启动中；
// 若timer值为null，说明定时器被销毁，处于停止状态
console.log(timer);
}
},1000)
