DOM
DOM节点类型
所有内容都是节点，按节点划分常用的有
元素节点（1）、
属性节点（2）、
文本节点（3）（包含文字、空格、回车、制表符）、
注释节点（8）、
document节点（9）；
节点特征
nodeType 可以判断节点的类型
nodeName 属性名 （在低版本和火狐浏览器中有兼容问题）
nodeValue 属性值 （在低版本和火狐浏览器中有兼容问题）
offsetParent
offsetLeft /*
* 当前元素的offsetParent的距离
* ie7以下：如果自己没有定位，那么offsetLeft[Top]是到body的距离
* 如果自己有定位，那么就是到定位父级的距离
* 其他：到定位父级的距离
*/
offsetParent
offsetParent //如果没有定位父级 offsetParent -> body offsetLeft -> html
offsetLeft[Top] //当前元素的offsetParent的距离
1，position为fixed的offsetParent为null， 除fixed外，跟本身元素有无定位没有关系,
2，最近的定位外层元素（不论此外层元素是什么定位）
3，如果没有定位外层 offsetParent -> body
<html>
<head>
<style type="text/css">
#a00 { position: relative; }
#b00 { position: relative; }
#c00 { position: fixed; }
#c01 { position: absolute; }
#c02 { position: relative; }
#a30{
/*position: relative;可以*/
/*position: absolute;可以*/
position: fixed;
}
</style>
</head>
<body>
<div id="a00">
<div id="b00">
<div id="c00"></div>
<div id="c01"></div>
<div id="c02"></div>
<div id="c03"></div>
</div>
</div>
<div id="a30">
<div id="b30">
<div id="c30"></div>
</div>
</div>
<div>
<div id="b10"></div>
</div>
</body>
<script type="text/javascript">
/*
* 定位fixed的元素的offsetParent为null
* 除fixed外，跟本身元素有无定位没有关系
*/
console.log(document.querySelector('#c00').offsetParent);//null
console.log(document.querySelector('#c01').offsetParent);//div#b00
console.log(document.querySelector('#c02').offsetParent);//div#b00
console.log(document.querySelector('#c03').offsetParent);//div#b00
/*
* 最近的定位外层元素（不论此外层元素是什么定位）
*/
console.log(document.querySelector('#c30').offsetParent);//div#a30
/*
* 如果没有定位外层 offsetParent -> body
*/
console.log(document.querySelector('#b10').offsetParent);//body
</script>
</html>
属性 class href 自定义 ...
attributes 元素属性列表的集合
setAttribute
getAttribute
removeAttribute
hasAttributes
hasAttribute
hasAttributeNS
1.用.和[]的形式无法操作元素的自定义属性
2.getAttribute可以操作元素的自定义属性
样式 style
style $0.style.background='green'
子节点
childElementCount
childNodes 获取所有的子节点(不包含孙级以及以下的节点)
children 只获取元素子节点
firstChild firstElementChild 第一个子节点、
lastChild lastElementChild 最后一个子节点
hasChildNodes
firstElementChild与firstChild区别：
前者低版本不兼容，且在高版本中获取的只是元素节点
后者都兼容，但是高版本可以获取所有类型的子节点（文本、元素、注释等）、低版本只可以获取类型为元素节点
故在判断时通常会使用 firstElementChild || firstChild ; 兼容低----->高 新---->旧
兄弟节点
previousSibling previousElementSibling 上一个兄弟节点、
nextSibling nextElementSibling 下一个兄弟节点
父节点
parentNode查找父元素节点（当前子元素的）在页面中document是最大的父级
parentElement
创建、插入、删除、替换
创建节点
document.createElement('s')创建s标签 比如兼容h5
document.createTextNode('s')'s'文本节点
插入
document.body.insertBefore
document.body.appendChild
删除
通过父元素 document.body.removeChild
parentNode.removeChild
被删元素的父元素，通过父元素将其需要删除的子元素删除。
var el = document.getElementById('id');
el.parentNode.removeChild(el);
替换
通过父元素parentNode.replaceChild
function Prev(obj){
if(!obj || !obj.previousSibling){
return null;
}
return obj.previousSibling.nodeType==1?obj.previousSibling:Prev(obj.previousSibling);//判断元素节点，如果等于1就是元素节点，故而直接返回previousSibling
}
function Next(obj){
if(!obj || !obj.nextSibling){
return null;
}
return obj.nextSibling.nodeType==1?obj.nextSibling:Next(obj.nextSibling);
}
function First(obj){
if(!obj || !obj.firstChild){
return null;
}
return obj.firstChild.nodeType==1?obj.firstChild:Next(obj.firstChild);
}
function Last(obj){
if(!obj || !obj.lastChild){
return null;
}
return obj.lastChild.nodeType==1?obj.lastChild:Prev(obj.lastChild);
}
function getPos(obj) {
var pos = {left:0, top:0};
while (obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}
<a href="sss" id="aaa"></a>
//函数： 反复执行的代码块
//全局只有一个对象，防止全局变量污染
/*
var $ = {
ele : {
tag : function(tag){return document.getElementsByTagName(tag)},
id : function(id){return document.getElementById(id)}
},
css : {
addStyle : function(){},
removeStyle : function(){},
addClass : function(){}
}
}
//window.onload=function(){}
console.log($.ele.id('aaa'));
var a=$.ele.id('aaa');
*/
知识没有高低贵贱之分。
分类:
Html5
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？