DOM的基本操作与结构树
结构 dom 基本操作
2023-06-13 09:13:12 时间
节点的类型
元素节点 —— 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()
相关文章
- JVM-内存结构「建议收藏」
- Drupal 默认安装的目录结构
- 结构体赋值和指针赋值「建议收藏」
- C结构、联合、枚举
- App自动化测试|dom结构和元素定位方式
- 【Linux 内核 内存管理】虚拟地址空间布局架构 ⑤ ( Linux 内核中对 “ 虚拟地址空间 “ 的描述 | task_struct 结构体源码 )
- Go项目目录结构应该这么用!
- 探秘Oracle数据库结构体系(简述oracle结构体系)
- 探究数据:MySQL表结构对比分析(mysql表结构对比)
- 探索Linux的默认分区结构(linux默认分区)
- MSSQL如何阻止修改表结构的技巧(mssql阻止修改表结构)
- MySQL操作指南:如何查看表结构(mysql怎么看表)
- MySQL中如何利用Key作为字段优化表结构(mysql中key做字段)
- Oracle在2个DOM中统治(2个dom oracle)
- oracle中如何实现复制表结构(oracle中复制表结构)
- Dom遍历XML的一个例子,结果为树状结构
- JQueryeach()函数如何优化循环DOM结构的性能