1 DOM
1.1 DOM基本操作
document
document.getElementById 根据ID获取dom元素
document.getElementsByClassName 根据ClassName获取元素集
document.getElementsByTagName 根据标签名称获取元素集
// 这两种获取的不是实时的,不常用
document.querySelector("div span");
document.querySelectorAll("div span");
document.createElement("p"); //创建元素节点
document.createTextNode("OK"); //创建文本节点
document.createComment("This is a comment !"); //创建注释节点
document/element.appendChild(); //添加节点
document/element.insertBefore(targetNode,beforeNode); //指定节点之前添加节点
div.removeChild(span); //移除子节点
address.remove();//移除指定节点
replaceChild(new, origin); //替换节点
appendChild和insertBefore是在Node中封装的
Element
//常用属性
innerHTML:可以写HTML代码
innerText:火狐用textContent IE老版本不兼容
//常用方法
setAttribute()
getAttribute()
1.2 DOM结构树
1.3 封装insertAfter,功能类似insertBefore
在原型链上编程。
思路:若能找到target节点的下一个元素节点,就用insertBefore
插入元素到下一个元素节点之前,若不能找到target节点的下一个元素节点,表示,target节点是最后一个元素节点,那么就直接使用appendChild
即可
Element.prototype.insertAfter = function(targetNode, afterNode) {
var beforeNode = targetNode.nextElementSibling;
if(beforeNode == null) {
this.appendChild(afterNode);
} else {
this.insertBefore(afterNode, beforeNode);
}
}
效果
1.4 遍历节点方法
以下几种方法会把所有节点都遍历一遍,包括文本节点,注释节点,元素节点,属性节点
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
只会遍历元素节点的方法
- parentElement
- Children
- firstElementChild
- lastElementChild
- previousElementSibling
- nextElementSibling
节点的四个属性
- nodeValue
- nodeName
- nodeType
- attributes
hasChildNodes()
是否含有子节点,是返回true,否返回false
关于nodeType的值是固定的,如下
- 元素节点 1
- 属性节点 2
- 文本节点 3
- 注释节点 8
- Document 9
- DocumentFragment 11
2 定时器
- setInterval 隔一段时间执行一次
- clearInterval 清除interval
- setTimeout 等待一段时间执行
- clearTimeout 清除timeout
可以应用到闹钟,定时器等
三分钟定时器效果:
JS代码可参考
var minutes = parseInt(document.getElementsByTagName("input")[0].value);
var seconds = parseInt(document.getElementsByTagName("input")[1].value);
var timer = setInterval(function() {
if(seconds >= 59 && minutes < 3) {
minutes += 1;
document.getElementsByTagName("input")[0].value = minutes;
seconds = 0;
document.getElementsByTagName("input")[1].value = seconds;
} else if(minutes >= 3) {
clearInterval(timer);
} else {
seconds += 1;
}
document.getElementsByTagName("input")[1].value = seconds;
}, 10);
setTimeout(function() {}, 1000)
;和setInterval(funciton() {}, 1000)
都会返回一个int类型的数值,从0开始计数。
setTimeout("console.log('Hello World')", 1000);
//两个函数的第一个参数都可以是字符串形式的代码,并可以执行。
3 Date对象
新建date对象var date = new Date()
;没有参数则表示当前日期,var date1 = new Date("2020-01-01")
有参数就可以指定日期。
获取日期的年,getFullYear()
至于月,日,周几,时分秒,就是英文单词即可。
**getTime()**这个方法比较常用,返回 1970 年 1 月 1 日至今的毫秒数。
toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串