DOM的基本操作与结构树

2022-11-21 15:25:43 浏览数 (1)

节点的类型

代码语言: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()

0 人点赞