js笔记十六之DOM基础-节点

2023年1月4日 179次阅读 来源: uplyw

DOM的节点

node: 节点,浏览器认为在一个html页面中的所有内容都是节点(包括标签,注释,文字文本等)

  • 元素节点: html标签
  • 文本节点: 文字内容(高版本浏览器会把空格和换行当做文本节点)
  • 注释节点: 注释内容
  • document: 文档节点
  • …
  • 元素节点

nodeType: 1
nodeName: 大写标签名(在部分浏览器的怪异模式下,我们写的标签名是小写, 它获取的就是小写…)
nodeValue: null

[curEle].tagName: 获取当前元素的标签名(获取的标签名一般都是大写)

  • 文本节点

nodeType: 3
nodeName: #text
nodeValue: 文本内容

  • 注释节点

nodeType: 8
nodeName: #comment
nodeValue: 注释内容

  • 文档节点

nodeType: 9
nodeName: #document
nodeValue: null

节点就是用来描述页面中每一个部分之间关系的,只要我可以获取页面中的一个节点,那么我就可以通过相关的属性和方法获取页面中的所有节点;

<div id="box">
    <ul>
        <li>页卡1</li>
        <li>页卡2</li>
        <li>页卡3</li>
    </ul>
    <div>内容1</div>
    <div>内容2</div>
    <div>内容3</div>
</div>
  • childNodes

获取当前元素所有的子节点(节点集合: 类数组)
注: 不仅仅是元素子节点, 文本, 注释等都会包含在内;
子节点说明只是在儿子辈分中查找到(孙子及后代不在内)

var box=document.getElementById('box')
console.log(box.childNodes)
// NodeList(9) [text, ul, text, div, text, div, text, div, text]
  • children

获取所有的元素子节点(元素集合)
不包含文本/注释
在ie68下获取的结果和标准浏览器中有区别(ie68中会把注释节点当做元素节点获取到)

console.log(box.children)
// HTMLCollection(4) [ul, div, div, div]
  • parentNode

获取当前元素的父节点(元素对象)

console.log(box.parentNode)
// <body>...</body>
  • previousSibling & nextSibling

previousSibling: 获取当前节点的上一个哥哥节点(不一定是元素节点也可能是文本或者注释)
nextSibling: 获取当前节点的上一个弟弟节点(不一定是元素节点也可能是文本或者注释)

  • previousElementSibling & nextElementSibling

previousElementSibling: 获取当前节点的上一个哥哥元素节点
nextElementSibling: 获取当前节点的下一个弟弟元素节点
ie6~8下不兼容

  • fristChild & lastChild

fristChild: 当前元素所有子节点中的第一个(也不一定是元素节点,可能是文本和注释)
lastChild: 当前元素所有子节点中的最后一个(也不一定是元素节点,可能是文本和注释)

  • fristElementChild & lastElementChild

fristElementChild: 当前元素中的第一个元素子节点
lastElementChild: 当前元素中的最后一个元素子节点
ie6~8下不兼容

    原文作者：uplyw
    原文地址: https://www.jianshu.com/p/263af9014858
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞