DOM的基本操作与结构树

用户10094878

发布于 2022-11-21 15:25:43

4620

发布于 2022-11-21 15:25:43

节点的类型

元素节点   —— 1
属性节点   —— 2
文本节点   —— 3
注释节点   —— 8
document  —— 9
DocumentFragment  ——  11 
获取节点类型   nodeType 
复制代码

节点的四个属性

nodeName
节点的名，以大写形式表示只读的意思
nodeValue
Text节点或Comment节点的文本内容,可读写
nodeType
该节点的类型，只读
attributes
Element 节点的属性集合
节点的一个方法  Node.hasChildNodes();
复制代码

DOM结构树

DOM基本操作

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节点

Element节点的一些属性
innerHTML
innerText(火狐不兼容) / textContent(老版本IE不好使)
Element节点的一些方法
ele.setAttribute()
ele.getAttribute();
复制代码

日期对象 Date()

封装函数，打印当前是何年何月何日何时，几分几秒。
复制代码

js定时器

setInterval();
setTimeout();
clearInterval();
clearTimeout();
全局对象window上的方法，内部函数this指向window
注意 ：setInterval(“func()”,1000);
复制代码

查看滚动条的滚动位置

window.pageXOffset/pageYOffset
IE8及IE8以下不兼容
document.body/ documentElement.scrollLeft/scrollTop
兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值
封装兼容性方法，求滚动轮滚动离getScrollOffset()
复制代码

查看视口的尺寸

window.innerWidth/innerHeight
IE8及IE8以下不兼容
document.documentElement.clientWidth/clientHeight
标准模式下，任意浏览器都兼容
document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器
封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-11-13，如有侵权请联系 cloudcommunity@tencent.com 删除

date