学习前端第四十天（DOM树，遍历DOM，搜索）

最新推荐文章于 2024-06-13 02:48:16 发布
最新推荐文章于 2024-06-13 02:48:16 发布
阅读量624 收藏 19
点赞数 20
文章标签： 前端 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xggfdf/article/details/138967226
版权

一、DOM树

1、DOM，BOM

文档对象模型（Document Object Model），简称 DOM，将所有页面内容表示为可以修改的对象。

浏览器对象模型（Browser Object Model），简称 BOM，表示由浏览器（主机环境）提供的用于处理文档（document）之外的所有内容的其他对象。

2、DOM的例子

文档中的所有标签都是对象，head body html 换行，空格看不见的元素都是对象

标签被称为 元素节点（或者仅仅是元素），并形成了树状结构：<html> 在根节点，<head> 和 <body> 是其子项，等。

元素内的文本形成 文本节点，被标记为 ＃text。一个文本节点只包含一个字符串。它没有子项，并且总是树的叶子。

二、遍历DOM.

1、最顶层：documentElement和body

html=document.documentElement

body=document.body

最顶层的 document 节点是 document.documentElement。对应 <html> 标签。

另一个被广泛使用的 DOM 节点是 <body> 元素 —— document.body。 

拿来就用。

2、子节点，父节点，兄弟节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>device</div>
    <script>
        // DOM树 文档中的所有标签都是对象，head body html 换行，空格看不见的元素都是对象

        console.log(document.documentElement);  // html
        console.log(document.body);  // body
        (document.body.parentNode);  // body的父节点，html
        (document.body.childNodes);  // body的子节点，[text, div, text, script]
        (document.body.firstChild);  // body的第一个子节点，#text
        (document.body.lastChild);   // body的最后一个子节点 ，script
        (document.body.previousSibling);   // body的上一个兄弟节点，#text
        (document.body.nextSibling); // body的下一个兄弟节点，null 没有
    </script>
</body>

</html>

 节点搜索返回的是一个类数组的可迭代对象


    <div>
        <div>device</div>
        <p>p标签</p>
        <b>b标签</b>
    </div>
    <script>
        // div 的子节点
        const div = document.body.childNodes[1]
        console.log(div.childNodes);

        // 遍历div的子节点
        for (let el of div.childNodes) {
            console.log(el);
        }

        // 将遍历div的子节点转为数组，两种方法
        console.log(Array.from(div.childNodes));
        console.log([...div.childNodes]);
    </script>

3、纯元素导航 

只考虑元素节点，不要文本节点或注释节点

  • children —— 仅那些作为元素节点的子代的节点。
  • firstElementChild，lastElementChild —— 第一个和最后一个子元素。
  • previousElementSibling，nextElementSibling —— 兄弟元素。
  • parentElement —— 父元素。
<body>
    <div>
        <div>device</div>
        <p>p标签</p>
        <b>b标签</b>
    </div>
    <script>
        // 纯元素导航，去除空格换行元素
        const div = document.body.children[0];
        console.log(div.parentElement); // 父元素节点 body
        console.log(div.children);    // 所有子元素节点 [div, p, b]
        console.log(div.firstElementChild)  // 第一个子元素节点 div
        console.log(div.lastElementChild)  // 最后一个子元素节点 b
        console.log(div.previousElementSibling)  // 上一个兄弟元素节点 null
        console.log(div.nextElementSibling)  // 下一个兄弟元素节点 script

        // 例外，html的父节点不是元素，是整个文档，文档没有父节点
        console.log(document.documentElement.parentNode);  // #document
    </script>
</body>

4、表格概述 

      // 表格

        const table = document.body.children[0];

        // 表格元素
        console.log(table.rows);
        console.log(table.caption);
        console.log(table.tHead);
        console.log(table.tBodies);
        console.log(table.tFoot);

表格对象的行

        console.log(table.tHead.rows);
        console.log(table.tFoot.rows);
        console.log(table.tBodies[0].rows);
        console.log(table.tBodies[1].rows);

 表格行的单元格

        console.log(table.rows[0].cells);
        console.log(table.rows[2].cells);
        console.log(table.tHead.rows[1].cells);
        console.log(table.tBodies[0].rows[0].cells);
        console.log(table.tFoot.rows[0].cells);

// tr.sectionRowIndex —— 给定的 <tr> 在封闭的 <thead>/<tbody>/<tfoot> 中的位置（索引）

// tr.rowIndex —— 在整个表格中 <tr> 的编号（包括表格的所有行）

        console.log(table.tFoot.rows[0].sectionRowIndex);  // 0

        console.log(table.tFoot.rows[0].rowIndex);  // 4

// td.cellIndex —— 在封闭的 <tr> 中单元格的编号。

        console.log(table.rows[0].cells[1].cellIndex); // 1

三、搜索

1、document.getElementById（“id”）

注意：此“id”必须唯一

<body>
    <div id="box"> hello div</div>
    <p id="p">p</p>
    <b id="b">bbb</b>

    <script>
        // 根据id进行搜索返回  getElementById
        const boxEl = document.getElementById("box");
        console.log(boxEl);
        const pEl = document.getElementById("p")
        console.log(pEl);
        const bEl = document.getElementById("b")
        console.log(bEl);
    </script>
</body>

2、querySelectorAll（css）最通用

document.querySelectorAll（“”）返回 elem 中与给定 CSS 选择器匹配的所有元素。

<body>
    <div class="d1"> hello <b>bb</b> div1</div>
    <div class="d1"> hello <b>bb</b> div2</div>
    <div> hello <b>bb</b> div3</div>
    <div> hello <b>bb</b> div4</div>
    <p class="d1">品牌</p>
    <script>
        //  querySelectorAll  返回与给定 CSS 选择器匹配的所有元素。
        console.log(document.querySelectorAll("div"))    // 返回所有div标签
        console.log(document.querySelectorAll("div b"))  // 返回所有在div标签中的b标签
        console.log(document.querySelectorAll(".d1"))    // 返回所有class为“d1”的标签
        console.log(document.querySelectorAll(".d1 b"))  // 返回所有class为“d1”的标签中的b标签
        console.log(document.querySelectorAll("b"))
    </script>
</body>

 3、querySelector

document.querySelector（“”）返回给定 CSS 选择器的第一个元素

<body>
    <div class="d1"> hello <b>bb</b> div1</div>
    <div class="d1"> hello <b>bb</b> div2</div>
    <div> hello <b>bb</b> div3</div>
    <div> hello <b>bb</b> div4</div>
    <p class="d1">品牌</p>

    <script>
        // querySelector 返回给定 CSS 选择器的第一个元素
        console.log(document.querySelector("div"))    // 返回第一个div元素
        console.log(document.querySelector("div b"))  // 返回第一个在div标签中的b元素

        console.log(document.querySelector(".d1"))    // 返回第一个class为“d1”的元素
        console.log(document.querySelector(".d1 b"))  // 返回第一个class为“d1”的标签中的b元素

    </script>
</body>

4、matches

document.elem.matches（“ ”）

检查 elem 是否与给定的 CSS 选择器匹配。它返回 true 或 false

<body>
    <div class="d1"> hello <b>bb</b> div1</div>
    <div class="d1"> hello <b>bb</b> div2</div>
    <div> hello <b>bb</b> div3</div>
    <div> hello <b>bb</b> div4</div>
    <p class="d1">品牌</p>
    <a href="https://www.baidu.com/"></a>
    <script>
        // match 检查某个对象是否可以用某个选择器选中，返回true ，false
        const divS = document.querySelectorAll("div")
        console.log(divS[0].matches(".d1"))        // true
        console.log(divS[0].matches("body div"))   // true
        console.log(divS[3].matches("body .d1"))   // false
        console.log(divS[0].matches("body #div"))  // false
        console.log(document.body.children[5].matches("a"))
    </script>
</body>

5、closest

elem.closest（“ ”） 

查找与 CSS 选择器匹配的最近的祖先并返回。elem 自己也会被搜索。

<body>
    <div class="d2">
        <p id="d1"> hello <b id="b1">bb</b> div1</p>
        <div class="d1"> hello <b>bb</b> div2</div>
        <div> hello <b>bb</b> div3</div>
        <div> hello <b>bb</b> div4</div>
        <p class="d1">品牌</p>
    </div>
    <script>
        // closet 查找与 CSS 选择器匹配的最近的祖先
        const b = document.getElementById("d1")
        console.log(b.closest("div"))
    </script>
</body>

一不小心闪了腰
关注
  • 20
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
请使用深度优先搜索遍历一棵 DOM 树
发果叁
05-10 260
本题难度：⭐ ⭐ ⭐ 本题类型：算法、手写 阿林最近忙爆了，真的没时间认真写文章了，但是再忙也不能忘了学习，不然就懈怠了，最近多更新点前端面试中出现的高频算法题吧，这个写起来简单。 题目描述 请使用深度优先搜索遍历一棵 Dom 树，最终把每个节点存进一个数组里，返回这个数组。 举个例子，输入的 html 和返回结果如下图： 题目分析 这题看似很高大上，实际上就是树的前序遍历，套树前序遍历的公式即可。 // 二叉树前序遍历，刷题公式 function preorderTraversal (root) {
web前端JS（DOM）学习第三十一天
StarAh的博客
04-15 825
web前端JS（DOM）学习第三十一天
JS DOM之DOM遍历
大河之犬的博客
10-06 2070
DOM遍历，可以简单地理解为“查找元素”。举个例子，如果你使用等方法获取一个元素，然后又想得到该元素的父元素、子元素，甚至是下一个兄弟元素，这种操作涉及的就是DOM遍历。
jQuery遍历Dom树中的元素
weixin_44374938的博客
03-21 464
一、遍历 遍历：就是根据其相对于其他元素的关系来“查找”(或选取)HTML元素。以某项选择开始，并沿着这个选择移动，知道抵达所期望的元素。 1.向上遍历DOM树 有下面三种方法 parent() - 方法返回被选元素的直接父元素，该方法只会向上一级对DOM数进行遍历 parents() - 方法返回被选元素的所有祖先元素，他一路向上直到文档的根元素（）。 parentsUntil() -方法返回于俩元素之间的所有祖先元素 $(fucntion(){ $("button1").click(fu
JS笔记16（DOM&递归&查找元素）
每當变幻時的博客
09-06 694
一、DOM 1、什么是DOM Document Object Model(文档对象模型)：提供了操作网页文档的API 分为核心DOM&HMTL DOM &XML DOM DOM树，树根document，由浏览器的js解释器创建，可以通过树根找到每一个dom元素或对象或节点 2、dom元素的三大属性 1、xx.nodeType:获取节点的类型，会返回一个数字 ...
前端基础学习——JavaScript之BOM模型与DOM模型
weixin_53919192的博客
07-06 889
本文为大家带来了前端基础学习——JavaScript之BOM模型与DOM模型，希望对你有帮助~~
前端学习笔记 | WebAPIs（DOM+BOM）
m0_53522458的博客
03-13 994
DOM操作、事件监听、事件流、事件委托、元素尺寸与位置、日期对象、节点操作、M端事件、window对象、本地存储、数组map和join方法、正则表达式
Web前端学习JS篇之“DOM元素操作”
weixin_38159245的博客
09-17 364
一般意义上讲，JS包含DOM、BOM和ECMAScript，DOM和BOM可以看作是Web API，主要用于操作页面，ECMAScript是传统意义上的一门包含语法的语言，类似于Java，C。 首先，我们应该知道什么是DOM（document object model），由W3C制定标准，文档对象模型，这样可能太抽象了。 简单说，一个页面就是...
【学习前端第四十四课】ECMAScript 6
weixin_65729202的博客
01-19 384
之前在ES5里面，我们定义变量使用var这个关键字有几个特点说明一下1、var没有数据类型2、var是由一个建立阶段3、var是没有作用域的，它要通过函数才能形成作用域//var没有数据类型var a = 1;//var没有作用域//var有一个建立阶段，可以在定义之前调用var在定义变量的过程中其实并不严谨为了让变量声明的过程更加严谨，ES6就推出了let用于定义变量1、let定义的变量也没有数据类型2、let没有建立阶段，必须先定义后使用//没有问题的。
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
10-18
主要介绍了JavaScript实现的DOM树遍历方法,结合实例形式详细分析了二叉DOM树、多叉DOM树的前序、中序与后序遍历,以及多叉树深度优先、广度优先等相关遍历操作实现技巧,需要的朋友可以参考下
javascript先序遍历DOM树的方法
10-22
主要介绍了5种javascript先序遍历DOM树的方法，感兴趣的小伙伴们可以参考一下
JS遍历DOM文档树的方法实例详解
10-18
主要介绍了JS遍历DOM文档树的方法,结合实例形式分析了javascript遍历dom文档树的相关方法与使用技巧,需要的朋友可以参考下
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 316
在vue.config.js中配置关闭Uncaught runtime errors显示。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 218
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
vue3如何定义一个组件
Java程序员专栏
06-09 508
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Harmony 开发的艺术 面向对象
最新发布
不懂先生的博客
06-13 774
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 225
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
Web前端工程师的前景：挑战与机遇并存
asdgftv_niiy的博客
06-09 358
随着互联网的飞速发展和数字化转型的深入推进，Web前端工程师的前景日益广阔且充满挑战。作为互联网技术的核心力量之一，前端工程师的角色越来越重要，但同时也面临着技术更新迅速、市场需求多变等挑战。本文将从四个方面、五个方面、六个方面和七个方面深入剖析Web前端工程师的前景，为读者揭示这一职业领域的机遇与挑战。随着技术的不断进步和应用场景的不断拓展，前端工程师的工作也开始与其他领域进行跨界融合。只有不断提升自己的技术水平和创新能力，才能在激烈的市场竞争中脱颖而出，实现个人价值和社会价值的双赢。
遍历创建dom元素
06-01
可以通过以下代码遍历创建DOM元素： ```javascript // 创建一个ul元素 var ul = document.createElement("ul"); // 创建一个数组，用于存储li元素的文本内容 var items = ["Item 1", "Item 2", "Item 3"]; // ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值