day29-DOM（下）

最新推荐文章于 2024-04-12 17:46:48 发布

HAI6545

最新推荐文章于 2024-04-12 17:46:48 发布

阅读量412

点赞数 1

分类专栏：从零学HTML5的100天文章标签： javascript html firefox

本文链接：https://blog.csdn.net/HAI6545/article/details/122130526

版权

本文深入探讨DOM，包括节点属性、操作及样式获取。通过案例介绍了如何进行节点复制、获取元素样式，如QQ菜单的实现，并讲解了如何获取元素坐标、大小以及窗口尺寸。

摘要由CSDN通过智能技术生成

DOM

DOM 就是我们 html 结构中一个一个的节点构成的。不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点。

DOM 节点分三种：元素节点、文本节点、属性节点。

元素节点就是我们获取到的标签元素；标签里面的文本就是文本节点、标签上的属性就是属性节点。

元素节点

就是我们各种获取方法获取到的标签元素

document.getElementById();

document.querySeletor();

document.querySeletorAll();

属性节点

我们通过获取属性的方法获取到的标签属性

标签元素.getAttribute();

文本节点

我们通过 innerText 获取到的文本内容就是文本节点

获取节点

获取所有子节点childNodes

<body>
<div id="box">
 <p> <span>span标签</span> </p> 
</div> 
</body>
 <script type="text/javascript"> 
var Odiv = document.getElementById("box"); 
console.log(Odiv.childNodes); 
</script>

说明：获取到的时所有节点，包含文本节点、元素节点。元素节点只有子元素，不包括子元素里面的内容

看图得知：第一个节点是文本节点，代表标签中间的换行和空格，第二个节点是元素节点，第三个节点是文本节点，又是标签中间的换行和空格

获取所有子元素节点children

<body>
<div id="box"> 
<p class="part"> <span>span标签</span> </p> 
</div> 
</body> 
<script type="text/javascript">
 var Odiv = document.getElementById("box"); 
</script>

说明：只获取元素节点，不包含文本节点

看图得知：获取到的是一个伪数组，是一个集合。

获取第一个子节点fifirstChild

<body>
<div id="box"> 
<p class="part"> <span>span标签</span> </p> 
<a href="#">链接</a>
 </div> 
</body>
 <script type="text/javascript"> 
var Odiv = document.getElementById("box"); 
console.log(Odiv.firstChild); 
</script>

说明：只获取第一个节点，其实就相当于 childNodes 中的第一个。

看图得知：第一个节点是文本节点，相当于 Odiv.childNodes[0] 。因为 div 和 p 标签中间有换行和空格

获取最后一个子节点

<body>
<div id="box">
 <p class="part"> <span>span标签</span> </p> 
<a href="#">链接</a> 
</div> 
</body> 
<script type="text/javascript">
 var Odiv = document.getElementById("box"); 
 console.log(Odiv.lastChild); 
</script>

说明：只获取最后一个节点，其实就相当于 childNodes 中的最后一个。

看图得知：第一个节点是文本节点，相当于 Odiv.childNodes[childNodes.length - 1] 。

获取第一个子元素节点fifirstElementChild

<body>
<div id="box">
 <p class="part"> <span>span标签</span> </p> 
<a href="#">链接</a> 
</div>
 </body>
 <script type="text/javascript"> 
var Odiv = document.getElementById("box");
 console.log(Odiv.firstElementChild);
</script>

说明：只获取元素节点，不会是文本节点。

看图得知：获取到的时第一个子元素节点。

获取最后一个子元素节点lastElementChild

<body>
<div id="box"> 
<p class="part"> 
<span>span标签</span>
 </p> 
<a href="#">链接</a> 
</div> 
</body> 
<script type="text/javascript"> 
var Odiv = document.getElementById("box"); 
console.log(Odiv.lastElementChild);
</script>

说明：只获取元素节点，不会是文本节点。

看图得知：获取到的时最后一个子元素节点。

获取下一个兄弟节点nextSibling

<body>
<div id="box">
 <p class="part">段落标签</p> 
<a href="#">链接</a> 
<span>span标签</span> 
</div> 
</body>
 <script type="text/javascript"> 
var oA = document.querySelector("a"); 
console.log(oA.nextSibling); 
</script>

说明：获取的是节点，有可能时文本节点。

最低0.47元/天解锁文章

HAI6545

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day29-DOM（下）

DOM DOM 就是我们 html 结构中一个一个的节点构成的。不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点。 DOM节点分三种：元素节点、文本节点、属性节点。元素节点就是我们获取到的标签元素；标签里面的文本就是文本节点、标签上的属性就是属性节点。元素节点就是我们各种获取方法获取到的标签元素 document.getElementById(); document.querySeletor(); docum...
复制链接

扫一扫