掌握js的Dom树

最新推荐文章于 2024-07-16 19:32:16 发布

猿音

最新推荐文章于 2024-07-16 19:32:16 发布

阅读量669

点赞数 1

分类专栏：笔记文章标签： javascript dom

本文链接：https://blog.csdn.net/weixin_43348064/article/details/105960042

版权

笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、Dom树

什么是Dom树

其实网页中所有HTML内容在内存中都是保存在一棵树形结构上的，内存中这棵保存一个网页中所有内容的树形结构，就称为DOM树。

当浏览器扫描到一个.html文件，在将.html内容显示到浏览器窗口中给人看之前，都会在内存中自动创建一棵DOM树来保存HTML内容中每项细节。生活上的一个棵树是有树根的，那Dom树也有数根的。

根节点对象

当浏览器窗口扫描到一个.html文件时，会先在内存中自动创建一个document对象。作为整个DOM树的树根。将来网页中所有的HTML内容，都会成为document树根对象的子节点或后代节点。整个DOM树的树根document对象

节点(node)对象

浏览器窗口开始扫描网页内容。每扫描到一项内容，都会在DOM树上对应位置，创建一个对象，保存这项扫描到的内容的属性值或其他细节。也就是说，网页中的每一项HTML内容(元素或文本)都会成为DOM树上的一个对象

图解
在这里插入图片描述

二、查找元素

1. 不需要查找就可以直接获得的元素

	(1). <html>元素对象   document.documentElement
	(2). <body>元素对象   document.body
	(3). <head>元素对象   document.head

2. 按节点间关系查找元素

①. 节点树 (有坑)

旧DOM标准中使用的包含网页中所有内容（元素、文本、注释…）的完整树结构

节点树有2大关系、6个属性

父子关系：4个属性

1）获取当前节点对象的父级元素节点对象：节点对象.parentNode;
2）获取当前节点对象的所有直接子节点对象的集合：节点对象.childNodes。返回的是一个包含多个直接子节点对象的类数组对象
可用节点对象.childNodes[i]方式，获得某个位置上的子节点;
3）获取当前节点对象的第一个直接子节点对象：节点对象.firstChild;
4）获取当前节点对象的最后一个直接子节点对象：节点对象.laseChild;
兄弟关系： 2个属性

1）获取当前节点的前一个兄弟节点对象，节点对象.previousSibling;
2）获取当前节点的后一个兄弟节点对象，节点对象.nextSibling;
用节点树来获取元素是有坑的，来看看下面代码

 <body>
    <ul id="ul">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <script>
        //获取当前节点对象的所有直接子节点对象的集合
      var ul = document.getElementById("ul").childNodes;
      console.log(ul);
    </script>
  </body>

按照上面描述的话，输出结果应该是打印三次li元素，返回的数组中就应该只有三个元素。我们看看打印结果。
在这里插入图片描述
发现问题了，这个数组多了三个元素text,text这个元素是从哪里来的呢？原来用节点树来获取元素时，连看不见的空格换行等空字符，也识别为节点对象，这就严重干扰了正常的查找秩序。那如何解决呢？一般来说我们只关心元素，而不关心其余的节点对象，所有在新Dom标准中新建了一棵新树-元素树
②. 元素树

只包含元素类型节点对象的树结构，不再包含空格、文本、注释等程序员不关心的节点。一般要获取元素就用元素树而不用节点树

元素树也包括2大关系，6个属性

父子关系：4个属性

1）获取当前节点对象的父级元素节点对象：节点对象.parentNode（parenElement）;
2）获取当前节点对象的所有直接子节点对象的集合：节点对象.children。返回的是一个包含多个直接子节点对象的类数组对象
可用节点对象.children[i]方式，获得某个位置上的子节点;
3）获取当前节点对象的第一个直接子节点对象：节点对象.firstElementChild;
4）获取当前节点对象的最后一个直接子节点对象：节点对象.laseElementChild;
兄弟关系： 2个属性

1）获取当前节点的前一个兄弟节点对象，节点对象.previousElementSibling;
2）获取当前节点的后一个兄弟节点对象，节点对象.nextElementSibling;

图解
在这里插入图片描述

3. 按HTML特征查找元素

1. 按id查找一个元素对象

语法

var 一个元素对象=document.getElementById(“id名”);

返回值

1). 如果找到指定id的一个元素，就返回这一个元素的对象
2). 如果没找到指定id的元素，则返回null
3). 如果页面中包含多个相同id名的元素，只返回第一个指定id名的元素对象。

2. 按元素的标签名查找多个元素

语法

var 类数组对象=任意父元素.getElementsByTagName(“标签名”)

返回值

1). 如果找到多个符合指定标签名称的元素，则返回一个类数组对象包含多个找到的元素对象
2). 如果没找到返回，返回一个length=0的空类数组对象：{ length:0 }

3. 按class名查找多个元素

语法

var 类数组对象=任意父元素.getElementsByClassName(“class名”)

返回值

1). 如果找到多个符合要求的元素，则也返回一个类数组对象，包含找到的多个元素对象
2). 如果没找到，则返回空类数组对象: { length:0 }

4. 按name名查找多个表单元素

语法

var 类数组对象=document.getElementsByName(“name名”);

返回值

1). 如果找到指定name名的多个表单元素，则返回类数组对象，其中包含多个表单元素对象
2). 如果找不到指定name名的表单元素，则返回空类数组对象: { length:0 }

注意

按标签名查找、按class查找、按name名查找永远返回类数组对象。即使只找到一个符合要求的元素，也会将这唯一的一个元素放在类数组对象中返回！也就是我们无法直接获得这个找到的唯一的元素对象。必须用[0]方式，再从类数组对象中0位置，取出这个唯一的元素，才是我们想要的元素对象！

5. 按css选择器来查找元素

语法

(1). 只查找一个符合选择器条件的元素
var 一个元素对象=任意父元素.querySelector(“任意选择器”);
(2). 查找多个符合选择器条件的元素
var 类数组对象=任意父元素.querySelectorAll(“任意选择器”)

返回值

①只查找一个符合选择器条件的元素
1). 如果找到，当然返回DOM元素
2). 如果没找到，返回null
②查找多个符合选择器条件的元素
1). 如果找到，返回一个类数组对象
2). 如果没找到，返回空类数组对象: { length:0 }

实现购物车的例子放在下面的链接里

Dom操作的简易购物车

东哥笔记

猿音

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
掌握js的Dom树

一、Dom树什么是Dom树其实网页中所有HTML内容在内存中都是保存在一棵树形结构上的，内存中这棵保存一个网页中所有内容的树形结构，就称为DOM树。当浏览器扫描到一个.html文件，在将.html内容显示到浏览器窗口中给人看之前，都会在内存中自动创建一棵DOM树来保存HTML内容中每项细节。生活上的一个棵树是有树根的，那Dom树也有数根的。根节点对象当浏览器窗口扫描到一个.html...
复制链接

扫一扫

专栏目录