一. 节点操作
nodeType: 1 --> 元素节点 2--> 属性节点 3-->文本节点
| js | jquery | |
| 父节点 | .parentNode | |
| 子节点 | .childNode | |
| 子元素 | .children | |
| 上一个兄弟节点 | .previousSibling | |
| 上一个兄弟元素 | .previousElementSbling(ie9以上) | |
| 第一个子节点 | .firstChild | |
| 第一个兄弟元素 | .firstElementChild(ie9以上) | |
| 最后一个子节点 | .lastChild | |
| 下一个兄弟节点 | .nextSibling |
二. 动态创建元素 (元素就是一个标签):
1) document.write() : 清除页面其他所有元素
2) dom.innerHTML =
3) var p = dom.createElement('p')
元素的增删改查:
1) 增: createElement('p') box.appendChild(p)
如果appendChild()的元素在文档中已经存在, 会想一出原先的元素, 这时候要先克隆 标签.cloneNode()
2) 删: removeChild()
3) 改: insertBefore(新元素, 插在那个元素之前) replaceChild(新元素, 旧元素)
4) 查: 元素选择器
三. 操作
1)自定义属性操作 : setAttribute('index', i) getAttribute() removeAttribute()
2)类名操作: box.classList.add() .classList.remove()
3)样式操作: box.style.width = "100px"
4) 表单元素的属性: input.typ == 'checkbox' input.cheked == true input.value
四. dom事件 addEventListener removeEventListener jquery 中不能调用事件监听
五. 事件对象 e 的属性 e.clientX e.clientY
取消默认行为 e.preventDefault ; return false
l六. 常用事件: onfocus onblur onchange
键盘和鼠标事件:
onmousedown onmouseup onmousemove onmouseenter(mouseover会触发父元素的冒泡事件)
onkeyup onkeydown ==>keyCode
七.bom 浏览器事件:
1) onload
2) setInterval setTimeout
3)location对象 .href = ' url ' location.reload() location.assign(可倒退) location.replace(bu能倒退)
4)history对象 .back() .forward() .go(1)/1代表前进, -1代表后退
5)页面偏移量 box.clientWidth(content + padding) box.clientTop(border-top) offsetLeft(content+padding+border+margin)
window.onscroll = function( ){
//body 的兼容性写法 body || documentELement
var top = document.body.scrollTop;
var top = docuement.docuemntELement.scrollTop;
}; 滚动事件 ;scrollTop 向上滚动距离