节点的类型
代码语言:javascript
复制元素节点 —— 1
属性节点 —— 2
文本节点 —— 3
注释节点 —— 8
document —— 9
DocumentFragment —— 11
获取节点类型 nodeType
复制代码
节点的四个属性
代码语言:javascript
复制nodeName
节点的名,以大写形式表示只读的意思
nodeValue
Text节点或Comment节点的文本内容,可读写
nodeType
该节点的类型,只读
attributes
Element 节点的属性集合
节点的一个方法 Node.hasChildNodes();
复制代码
DOM结构树
DOM基本操作
代码语言:javascript
复制1.getElementById方法定义在Document.prototype上,即Element节点上不能使用。
2.getElementsByName方法定义在HTMLDocument.prototype上,
即非html中的document不能使用(xml document,Element)
3.getElementsByTagName方法定义在Document.prototype 和 Element.prototype上
4.HTMLDocument.prototype定义了一些常用的属性,body,head,
分别指代HTML文档中的<body><head>标签。
5.Document.prototype上定义了documentElement属性,指代文档的根元素,
在HTML文档中,他总是指代<html>元素
6.getElementsByClassName、querySelectorAll、querySelector在
Document.prototype,Element.prototype类中均有定义
增
document.createElement();
document.createTextNode();
document.createComment();
document.createDocumentFragment();
插
PARENTNODE.appendChild();
PARENTNODE.insertBefore(a, b):
删
parent.removeChild(); 剪切
child.remove(); 删除
替换
parent.replaceChild(new, origin);
复制代码
Element节点
代码语言:javascript
复制Element节点的一些属性
innerHTML
innerText(火狐不兼容) / textContent(老版本IE不好使)
Element节点的一些方法
ele.setAttribute()
ele.getAttribute();
复制代码
日期对象 Date()
代码语言:javascript
复制封装函数,打印当前是何年何月何日何时,几分几秒。
复制代码
js定时器
代码语言:javascript
复制setInterval();
setTimeout();
clearInterval();
clearTimeout();
全局对象window上的方法,内部函数this指向window
注意 :setInterval(“func()”,1000);
复制代码
查看滚动条的滚动位置
代码语言:javascript
复制window.pageXOffset/pageYOffset
IE8及IE8以下不兼容
document.body/ documentElement.scrollLeft/scrollTop
兼容性比较混乱,用时取两个值相加,因为不可能存在两个同时有值
封装兼容性方法,求滚动轮滚动离getScrollOffset()
复制代码
查看视口的尺寸
代码语言:javascript
复制window.innerWidth/innerHeight
IE8及IE8以下不兼容
document.documentElement.clientWidth/clientHeight
标准模式下,任意浏览器都兼容
document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器
封装兼容性方法,返回浏览器视口尺寸getViewportOffset()