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>
  • 其中的文本节点包括:文本,换行,空格等
相关推荐
Ysjt | 深14 分钟前
C++多线程编程入门教程(优质版)
java·开发语言·jvm·c++
ephemerals__19 分钟前
【c++丨STL】list模拟实现(附源码)
开发语言·c++·list
码农飞飞24 分钟前
深入理解Rust的模式匹配
开发语言·后端·rust·模式匹配·解构·结构体和枚举
一个小坑货25 分钟前
Rust 的简介
开发语言·后端·rust
湫ccc33 分钟前
《Python基础》之基本数据类型
开发语言·python
Matlab精灵34 分钟前
Matlab函数中的隐马尔可夫模型
开发语言·matlab·统计学习
Microsoft Word35 分钟前
c++基础语法
开发语言·c++·算法
吃杠碰小鸡37 分钟前
commitlint校验git提交信息
前端
数据小爬虫@37 分钟前
如何利用java爬虫获得淘宝商品评论
java·开发语言·爬虫
Natural_yz37 分钟前
大数据学习17之Spark-Core
大数据·学习·spark