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>
  • 其中的文本节点包括:文本,换行,空格等
相关推荐
摸鱼仙人~4 分钟前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.37 分钟前
serviceWorker缓存资源
前端
iCxhust1 小时前
c# U盘映像生成工具
开发语言·单片机·c#
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
九年义务漏网鲨鱼3 小时前
【大模型学习 | MINIGPT-4原理】
人工智能·深度学习·学习·语言模型·多模态
emplace_back3 小时前
C# 集合表达式和展开运算符 (..) 详解
开发语言·windows·c#
jz_ddk3 小时前
[学习] C语言数学库函数背后的故事:`double erf(double x)`
c语言·开发语言·学习
萧曵 丶3 小时前
Rust 所有权系统:深入浅出指南
开发语言·后端·rust