DOM节点学习

喜欢的东西太贵了,我一咬牙,狠下心决定不喜欢了!

文档节点--DOM有哪些节点

  • 仔细看下面文档的html标签的不同

1.li标签没换行

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ol><li>我是li1</li>
    <li>我是li2</li>
    <li>我是li3</li>
    <li id="li4">我是li4</li>
    <li>我是li5</li>
  </ol>
  <script>
    var ol = document.querySelector('ol');
    const li4 = document.getElementById('li4');
    console.log(ol.childNodes);
    console.log(li4.previousSibling) //#text
    console.log(li4.previousSibling.previousSibling); //li3
    console.log(li4.previousElementSibling); //li3
  </script>
</body>
</html>
  • 其中的文本节点包括:文本,换行,空格等

2.li标签换行

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ol>
    <li>我是li1</li>
    <li>我是li2</li>
    <li>我是li3</li>
    <li id="li4">我是li4</li>
    <li>我是li5</li>
  </ol>
  <script>
    var ol = document.querySelector('ol');
    const li4 = document.getElementById('li4');
    console.log(ol.childNodes);
    console.log(li4.previousSibling) //#text
    console.log(li4.previousSibling.previousSibling); //li3
    console.log(li4.previousElementSibling); //li3
  </script>
</body>
</html>

3.li标签换行且有注释

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ol>
    <li>我是li1</li>
    <li>我是li2</li>
    <li>我是li3</li>
    <!-- 注释应该也是节点 -->
    <li id="li4">我是li4</li>
    <li>我是li5</li>
  </ol>
  <script>
    var ol = document.querySelector('ol');
    const li4 = document.getElementById('li4');
    console.log(ol.childNodes);
    console.log(li4.previousSibling) //#text
    console.log(li4.previousSibling.previousSibling); //li3
    console.log(li4.previousElementSibling); //li3
  </script>
</body>
</html>
  • 其中的文本节点包括:文本,换行,空格等
相关推荐
亭台烟雨中2 分钟前
【前端记事】关于electron的入门使用
前端·javascript·electron
泯泷16 分钟前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构
球求了19 分钟前
C++:继承机制详解
开发语言·c++·学习
抹茶san19 分钟前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
张槊哲41 分钟前
函数的定义与使用(python)
开发语言·python
Senar1 小时前
Web端选择本地文件的几种方式
前端·javascript·html
北辰浮光1 小时前
[Mybatis-plus]
java·开发语言·mybatis
时光追逐者1 小时前
MongoDB从入门到实战之MongoDB快速入门(附带学习路线图)
数据库·学习·mongodb