HTML DOM学习记录小结

最新推荐文章于 2024-08-27 12:53:54 发布
最新推荐文章于 2024-08-27 12:53:54 发布
阅读量994 收藏 11
点赞数 9
分类专栏： 程序员 文章标签： html 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84418883/article/details/138278483
版权

9.删除已有的 HTML 元素removechild

查找 id=“div1” 的元素：

var parent=document.getElementById(“div1”);

查找 id=“p1” 的<p> 元素：

var child=document.getElementById(“p1”);

从父元素中删除子元素：

parent.removeChild(child);

10.替换子节点属性 replacechild

这是一个段落。

这是另外一个段落。

11.nodeValue 属性

nodeValue 属性规定节点的值。

  1. 元素节点的 nodeValue 是 undefined 或 null

  2. 文本节点的 nodeValue 是文本本身

  3. 属性节点的 nodeValue 是属性值

12.childNodes 和 nodeValue

除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

下面的代码获取 id=“intro” 的

元素的值：

Hello World!

13.使用事件

HTML DOM 允许您在事件发生时执行代码。

当 HTML 元素"有事情发生"时，浏览器就会生成事件：

**1.在元素上点击

2.加载页面

3.改变输入字段**

在按钮被点击时改变 <body> 元素的背景色

<input type="button"οnclick="document.body.style.backgroundColor=‘lavender’;"value=“修改背景颜色”>

由函数执行相同的代码

修改文本

14.HTML DOM 节点列表长度

length 属性定义节点列表中节点的数量。

x=document.getElementsByTagName(“p”);

for (i=0;i<x.length;i++)

{

document.write(x[i].innerHTML);

document.write(“
”);

}

获取所有 <p> 元素节点

输出每个 <p>元素的文本节点的值

15.DOM 根节点

这里有两个特殊的属性，可以访问全部文档：

1.document.documentElement - 全部文档

2.document.body - 文档的主体

16.JS中的节点操作

写几个常用的API, 来操作DOM节点。

(1)document.getElementById()

(2)object.innerHTML该属性设置或返回object之间的HTML

(3)document.createElement()创建节点对象。

(4)document.body.appendChild()尾部插入结点。

(5)object.parentNode.removeChild(oChildNode);移除结点

17.jQuery中的结点操作

(1)添加结点

a. append()和appendTo(), 两个方法是对应的一对儿操作。

$(‘#parentNodeId’).append(childNode);

$(‘#childeNode’).appendTo(parentNode);

b.prepend()和prependTo()， 这也是一对儿对应的操作方法。其作用是添加一个结点到父节点中并前置。用法和上一对儿一样。

c.与之对应的还有after, insertAfter; before, insertBefore等，其用法都和上面的相同。其效果是将新建的元素插入到指定的元素之后/前，并和目标元素紧邻，作为兄弟结点存在。

(2). remove()

remove()方法删除所有匹配的元素，传入的参数用于筛选元素，**该方法可以删除元素中所有的子节点，**当匹配的节点及后代被删除后，该方法返回值是指向被删除结点的引用，因此可以使用该引用，再使用被删除的元素。

$span = $(‘span’).remove();

$span.insertAfter(‘ul’);

示例中，先删除所有的span元素，把删除的元素使用$span接收，把删除后的元素添加到ul后面，作为ul的兄弟结点。该操作产生的效果即把所有的span元素以及后代元素移到ul后面。

(3). empty()

empty()方法严格来讲并不是删除元素，该方法只是清空节点，它能清空元素中的所有子节点。

(3)修改DOM节点

**a. 复制节点，**当clone()方法有参数，并且为true时，表示同时复制该元素的属性，如果没有参数，表示不复制属性。

$(element).clone(true);

b.替换节点

1.$(element).replacewith();

2.$(element).replaceAll();

(4)属性操作

attr()和removeAttr()。 attr()方法能够获取元素属性，也能够设置元素属性。removeAttr()方法删除特定的属性，方法是在参数中指定属性名。

计算机网络

  • HTTP 缓存

  • 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

  • HTTP 常用的请求方式，区别和用途？

  • HTTPS 是什么？具体流程

  • 三次握手和四次挥手

  • 你对 TCP 滑动窗口有了解嘛？

  • WebSocket与Ajax的区别

  • 了解 WebSocket 嘛？

  • HTTP 如何实现长连接？在什么时候会超时？

  • TCP 如何保证有效传输及拥塞控制原理。

  • TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

  • 链表

  • 字符串

  • 数组问题

  • 二叉树

  • 排序算法

  • 二分查找

  • 动态规划

  • BFS

  • 栈

  • DFS

  • 回溯算法

2401_84418883
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML DOM学习记录小结(2)
2401_84093973的博客
04-19 975
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
HTML DOM学习记录小结(1)
2401_84097696的博客
04-07 738
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取（备注：前端）**你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
HTML DOM学习记录小结，retrofit面试
2301_79058515的博客
04-03 256
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】后。
HTML DOM学习记录小结，2024年最新阿里五次面试
2401_84138890的博客
04-21 674
其效果是将新建的元素插入到指定的元素之后/前，并和目标元素紧邻，作为兄弟结点存在。attr()和removeAttr()。remove()方法删除所有匹配的元素，传入的参数用于筛选元素，**该方法可以删除元素中所有的子节点，**当匹配的节点及后代被删除后，示例中，先删除所有的span元素，把删除的元素使用$span接收，把删除后的元素添加到ul后面，作为ul的兄弟结点。**a. 复制节点，**当clone()方法有参数，并且为true时，表示同时复制该元素的属性，如果没有参数，表示不复制属性。
HTML DOM学习记录小结，移动架构师成长路线
2401_84097774的博客
04-03 426
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-2YMhmUpf-1712104127836)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载。
HTML DOM学习记录小结(1)，前端开发工具
2301_82244343的博客
04-03 299
点击这里即可免费获取，包括答案解析。由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）点击这里即可免费获取，包括答案解析。[外链图片转存中…(img-3jUkUxyG-1712104061730)]
HTML DOM学习记录小结(2)，web开发学习教程
2401_84097745的博客
04-03 295
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
2024年最新HTML DOM学习记录小结，web前端面试项目介绍
2401_84411767的博客
05-15 271
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】上面的例子返回包含 class=“intro” 的所有元素的一个列表：注意：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。5.appendChild() 方法 将新节点增加到指定节点appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。**6.creatElement() 方法 创建属性节点。
DOM笔记小结
Y7_serein的博客
10-06 89
1. 文档对象模型，Document Object Model DOM是针对HTML和XML文档的一个API（应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。1998年10月DOM1级规范成为W3C的推荐标准，为基本的文档结构以及查询提供了接口。但是要注意，IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。 DOM可以将任何HTML或XML文档描绘成一个由多层节...
JavaScript学习笔记之DOM基础操作实例小结
12-08
JavaScript DOM（Document Object Model）是用于操作HTML和XML文档的标准接口。它允许程序员或脚本通过JavaScript语言来访问和修改文档结构、样式和内容。在本文中，我们将深入探讨JavaScript DOM基础操作，主要包括...
Javascript BOM学习小结(六)
11-23
与DOM（Document Object Model）不同，DOM主要用于处理HTML和XML文档结构，而BOM则专注于浏览器的交互，如窗口管理、导航、时间处理等。BOM的核心是`window`对象，它是全局作用域的基础，所有全局变量和函数都是`...
JsDom 编程小结
10-28
### JsDom 编程小结知识点详解 #### 1. 浏览器兼容问题 - **不同浏览器对 DOM 操作的支持差异**：如 IE6 和 IE7 对 `table.appendChild("tr")` 的支持与 IE8 不同。为解决此问题，可以采用 `insertRow` 和 `...
angular4笔记系列之内置指令小结
01-21
属性型指令会监听和修改其它HTML元素或组件的行为、元素属性（Attribute）、DOM属性（Property）。 NgClass 形式：[ngClass]=”statement” 通过绑定到NgClass，可以同时添加或移除多个类。 setCurrentClasses() ...
HTML中渲染空格和换行符样式的实现方式
最新发布
程序人生
08-27 421
在HTML中，连续的空格和换行符会被合并为一个空格，所以无法直接通过添加换行符来实现缩进效果。如果您希望在HTML中显示缩进的效果，可以使用CSS样式中的。样式会保留文本中的所有空格和换行符，可能会导致额外的空白间距。如果您需要控制缩进的具体样式，可以使用CSS中的。样式，这样文本中的空格和换行符就会得到保留，从而实现了缩进的效果。上述代码中，我们将要显示的文本放置在。
html文本文字中保留空格和换行
qq_41985405的博客
08-26 281
空格和换行的样式：虽然HTML本身并不直接支持对空格和换行的样式设置，但是我们可以通过CSS来实现这个效果，我们可以使用whitespace属性来控制如何处理元素中的空白。会使元素中的所有空白都被保留，而whitespace: nowrap;则会阻止元素中的文本换行。
html快速入门
m0_52049533的博客
08-22 702
/
你没有使用过（但应该使用）的前 5 个 HTML 功能
Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
08-26 534
TML 已经有了很大的发展，这些特性展示了它已经变得多么强大和灵活。通过将这些鲜为人知的元素合并到你的项目中，你可以创建响应速度更快、动态更动态且用户友好的网页，同时减少对外部库和框架的依赖。因此，请尝试这些 HTML 功能 — 你可能会惊讶于它们可以在多大程度上增强你的开发过程。
深入源码，洞察迭代 8 年的 html 文本转换库
易迟的专栏
08-26 725
在前面RAG 项目结构化文件解析方案比较文章中对常见的 html 解析方案进行了比较，发现 html_text + python-readability 可以实现高质量的 html 内容提取。在前一篇文章迭代 14 年的高质量 html 提取方案中对 python-readability 库进行了介绍，这篇文章就对剩下的html_text库进行介绍。忽略内联样式、javascript、注释和其他用户通常不可见的文本；空白内容标准化，在内联元素周围添加空格分隔内容；
HTML DOM标准详解与编程接口
在深入学习HTML DOM之前，了解DOM的基本概念至关重要。DOM全称为Document Object Model，它是一个统一的接口，允许开发者用编程方式处理XML或HTML文档。无论文档是XML还是HTML，DOM都会将它们解析成一个树形结构，即...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值