节点操作以及节点简介_网页中的所有内容,在文档树中都是节点,节点主要包括哪几种?-CSDN博客

本文链接：https://blog.csdn.net/weixin_67110633/article/details/128850707

一.节点获取方法

获取元素通常使用两种方法：

1.利用DOM提供的方法获取元素

document.getElementByid()
document.getElementsByTagName()
document.querySelector 等
逻辑性不强，繁琐

2.利用节点的层级关系获取元素

利用父子兄关系获取
逻辑性强，但兼容性差

这两种方法都可以获取节点元素，但节点操作更简单

二. 节点概述

网页中所有的内容都是节点（标签，属性，文本，注释等），在DOM中，节点使用node来表示。HTML DOM树中所有节点均可通过JavaScript进行访问，所有html元素节点均可被修改，也可以创建或删除。一般来说，节点至少拥有node Type（节点类型），nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点 node Type为1
属性节点 node Type为2
文本节点 node Type为3（文本节点包括文字，空格，换行等）

注：在实际开发中，节点操作主要操作的是元素节点。

三.节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

1.父节点

node.parentNode

代码如下：

<body>
  
    <div class="box">
    <span class="erweima">x</span>
    </div>
    <script>
        //1.父节点 parentNode
        let erweima=document.querySelector('.erweima');
        //let box=document.querySelector('.box');
        //得到的是离元素最近的父级节点,如果找不到父级节点，返回为空 null
        console.log(erweima.parentNode);
    </script>
</body>

2.子节点