一.节点操作
创建标签:
var 参数名称 = document.createElement("标签名称");:返回值为创建好的标签添加标签:
var 参数名称 = document.父标签名称.appendChild(参数名称);:由父标签调用,会将添加的标签添加到父标签的子标签的最后面插入标签:
document.父标签.insertBefore(添加标签名,之后的标签名);把添加的标签放到指定标签前,由父元素调用,如果后面的标签为null,则会添加到父标签的子标签最后删除标签:
document.父标签.removeChild(要删除标签名);替换标签:
document.父标签.replaceChild(新标签,要替换的标签);由父标签调用克隆标签:
要克隆的标签名.cloneNode(bool值);
true:标签里的子标签也会克隆
false;只会克隆指定标签,不克隆子标签-
获取孩子标签:childNodes,返回值是一个伪数组
nodeType = 3;文字的nodeType为3
nodeType = 1;标签的nodeType为1
下图为使用遍历的方法只获得标签:
遍历方法只显示标签
children:只输出标签,不输出文字 获取兄弟节点:
.nextElementSibling;:只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）,IE9以上支持
.nextSibling;:返回元素节点之后的兄弟节点（包括文本节点、注释节点）,IE9以下支持
兼容写法:.nextElementSibling||.nextSibling
短路思想:前者为真时不再看后面,并且输出前者的值获取父亲标签:
.parentNode;-
通过类名获取标签:
.getElementsByClassName("类名");,返回值是一个伪数组,IE9以下不支持
兼容性写法:
兼容性写法 获取页面中的标签:
document.head:获取页面中的head标签
document.title:获取页面中的title标签
document.body获取页面中的body标签
document.documentElement获取页面中的html标签
动态创建九宫格:
border-radius:上 右 下 左;设置边角圆角度数
发微博
var text = document.getElementById("text");
var btn = document.getElementById("btn");
var oul = document.getElementById("oul");
btn.onclick = function () {
if (text.value == "") {
alert("请输入内容");
}
else {
var oli = document.createElement("li");
oli.innerHTML = text.value;
/* if (oul.length == 0) {
oul.appendChild(oli);
}
else {
oul.insertBefore(oli, oul.children[0]);
}*/
oul.insertBefore(oli, oul.children[0]);
var a = document.createElement("a");
a.innerHTML = "删除";
oli.appendChild(a);
text.value = "";
a.onclick = function () {
oul.removeChild(this.parentNode);
}
}
}
二.日期对象
var date = new Date();返回日期和时间
date.getFullYear();以四位数字返回年份
date.getMonth();返回月份为0-11,需要+1才能照应1-12
date.getDate();返回一个月中的某一天,1-31
date.getDay();返回一周中的某一天,0-6,
date.getHours();返回小时数,0-23
date.getMinutes();返回分钟数,0-59
date.getSeconds();返回秒数,0-59
date.getMilliseconds();返回毫秒数
date.getTime();返回1970年1月1日至今的毫秒数.成为时间戳
date.valueOf();返回date对象的原始值,也是时间戳
自定义时间:
如果括号里面没有写日期,就是代表默认获取当前的时间,如果写了就是自定义的时间
var date = new Date('2018/2/23 10:10:10');
计算代码块执行的时间
var date = new Date();
var mins = date.getTime();
代码块
var nowDate = new Date();
var nowMins = nowDate.getTime();
console.log(mins - nowMins);
日历
<script>
var op = document.getElementById("op");
var ospan = document.getElementById("ospan");
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var weekDay = date.getDay();
var weekArr = [];
weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
//也可通过switch来判断
op.innerHTML = year + "年" + month + "月" + day + "日" + weekArr[weekDay];
ospan.innerHTML = day;
</script>
注意:星期的取值为0-6,可将其当作数组的下标表示周日到周六,月份的取值为0-11,记得加1对应1-12月份
钟表
<script>
var h = document.getElementById("h");
var m = document.getElementById("m");
var s = document.getElementById("s");
function time() {
var date = new Date();
var hSeconde = date.getMilliseconds();
var second = date.getSeconds() + hSeconde / 1000;
var minute = date.getMinutes() + second / 60;
var hour = date.getHours() % 12 + minute / 60;
h.style.transform = "rotate(" + hour * 30 + "deg)";
m.style.transform = "rotate(" + minute * 6 + "deg)";
s.style.transform = "rotate(" + second * 6 + "deg)";
}
time();
setInterval(time, 10);
</script>
