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>
  • 其中的文本节点包括:文本,换行,空格等
相关推荐
刘一说8 分钟前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友12 分钟前
设计模式的原则有哪些?
前端·后端·设计模式
!执行41 分钟前
Web3 前端与合约交互
前端·web3·1024程序员节
csbysj202043 分钟前
Perl 格式化输出
开发语言
潘小安1 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-1 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada1 小时前
从Google Chrome商店下载CRX文件
前端·chrome
CIb0la1 小时前
能保持精神专注的爱好能给生活带来种种积极的转变
运维·学习·生活
tao3556671 小时前
【Python刷力扣hot100】42. Trapping Rain Water
开发语言·python·leetcode
左耳咚1 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试