DOM小结-前面文章未涉及到得部分

最新推荐文章于 2024-06-24 21:27:31 发布
最新推荐文章于 2024-06-24 21:27:31 发布
阅读量464 收藏
点赞数
分类专栏： javascript

DOM总结：Document Object Model

DOM定义了访问 HTML和 XML文档的标准，针对HTML有一些特殊的方法称之为HTML DOM。


根据 W3C的 HTML DOM标准，HTML文档中的所有内容都是节点：

  • 整个文档是一个文档节点
  • 每个 HTML元素是元素节点（元素节点是不包含文本的，需要文本节点）
  • HTML元素内的文本是文本节点（比如元素节点p中的文本，就是文本标签）
  • 每个 HTML属性是属性节点（比如href=“。。”， id=“。。”都是属性节点）
  • 注释是注释节点

DOM 根节点

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

  • document.documentElement - 全部文档
  • document.body - 文档的主体

不同将节点的相互关系

父（parent）、子（child）和同胞（sibling），firstChild，lastChild，其他的快捷访问通过数组的形式parent.childNodes[]


HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM方法：

方法 描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。(若NewNode已经在document中，则不能直接用newNode进行替换，因为会将原来的节点被剪切，需Node.cloneNode()将克隆出来的节点进行替换。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

一些常用的 HTML DOM属性：

innerHTML - 节点（元素）的文本值

parentNode - 节点（元素）的父节点

childNodes - 节点（元素）的子节点

attributes - 节点（元素）的属性节点



nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

onload 和 onunload 事件

当用户进入或离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

onload 和 onunload 事件可用于处理 cookies。


onchange 事件

onchange 事件常用于输入字段的验证。


onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。


onmousedown、onmouseup 以及 on click 事件


Document 对象集合

集合 描述
all[] 提供对文档中所有 HTML 元素的访问。
anchors[] 返回对文档中所有 Anchor 对象的引用。
applets 返回对文档中所有 Applet 对象的引用。
forms[] 返回对文档中所有 Form 对象引用。
images[] 返回对文档中所有 Image 对象引用。
links[] 返回对文档中所有 Area 和 Link 对象引用。

Document 对象属性

属性 描述
body

提供对 <body> 元素的直接访问。

对于定义了框架集的文档，该属性引用最外层的 <frameset>。

cookie 设置或返回与当前文档有关的所有 cookie。
domain 返回当前文档的域名。
lastModified 返回文档被最后修改的日期和时间。
referrer 返回载入当前文档的文档的 URL。
title 返回当前文档的标题。
URL 返回当前文档的 URL。

Document 对象方法

方法 描述
close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
<完>
deargua
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dom-to-image.js
07-27
一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错
dom4j-2.1.3.jar
04-29
dom4j是一个十分优秀的JavaXML API，具有性能优异、功能强大和极其易使用的特点，它的性能超过sun公司官方的dom技术，同时它也是一个开放源代码的软件。 dom4j-2.1.3 XML Document Object Model based on Java ...
《微信小程序-进阶篇》Lin-ui组件库源码分析-Button组件（二）
Oliver尹的博客
07-27 665
本文难度属于: 中级，通过本文你可以了解到 Lin-ui的Button组件中功能属性以及事件在其背后是如何运转的一些知识
“英雄之旅”见闻和小结----angular2系列（三)
weixin_30723433的博客
06-01 38
前言： 　　本系列在前面两篇文章，介绍了Zone.js和angular2的基础概念。而后对于ng2的学习，还是由官方的Tour of Heroes开始。 以下内容经过提炼和个人理解，当然也会有不正确的地方，欢迎指正。有兴趣的朋友，可以自己开始ng2之旅，再结合本篇文章一起理解。 ng2的配置比较麻烦，任意的引入包可能导致一些报错，建议直接官方下载quickStart。 ng2 将所...
JavaScript高级程序设计-DOM2 和 DOM3
Three_ST的博客
01-20 236
文章目录12 DOM2和DOM312.1 DOM变化12.1.1 针对XML命名空间的变化12.1.2 其他方面的变化12.2 样式12.2.1 访问元素的样式12.2.2 操作样式表12.2.3 元素大小12.3 遍历12.3.1 NodeIterator12.3.2 TreeWalker12.4 范围12.4.1 DOM中的范围12.5 小结 12 DOM2和DOM3 DOM1 级主要定义的是...
React DOM-Diff算法
MyStyle
07-29 336
DOM Diff
ajax dom exception,前端开发中的Error以及异常捕获
weixin_39827036的博客
08-06 2680
符合预期的CoyPan(id: Coy_Pan)作者：CoyPan，BAT某厂符合预期的FE，正努力成为一名出色的工程师写在前面在前端项目中，由于JavaScript本身是一个弱类型语言，加上浏览器环境的复杂性，网络问题等等，很容易发生错误。做好网页错误监控，不断优化代码，提高代码健壮性是一项很重要的工作。本文将从Error开始，讲到如何捕获页面中的异常。文章较长，很多细节，请耐心观看。前端开发中...
【计算机毕设文章】外卖小程序的研究与开发
Eastonzhang888的博客
06-24 409
摘 要 随着科技的进步，微信小程序慢慢进入了生活当中，由于轻便快捷，方便使用，基于微信这个大平台，使得小程序飞速发展，趋于成熟，因此，针对用户对外卖点餐方面的需求，特开发了本外卖小程序。 该外卖小程序分为小程序前端和Java后端系统，遵循数据前后端交互，相互分离。前端小程序应用官方提供的API文档，主要功能为查看外卖菜品信息、外卖点餐以及管理个人订单等。后端系统则是由Java语言实现，基于B/S结构，使用MySQL数据库开发，使得管理员、商家后台界面简单整洁，便于管理员和商家使用和管理。 本外卖小程序拥有
JavaWeb笔记小结
文艺倾年的博客
10-14 977
文章目录第一章 Tomcat 基础一、 web 概念1. 软件架构2.资源分类二、常见的web服务器1、 概念2、常见服务器软件3、Tomcat 历史4、 Tomcat 安装5、Tomcat 目录结构6、Tomcat 启动停止三、Tomcat 架构1、HTTP工作原理2、HTTP服务器请求处理3、Servlet容器工作流程4、Tomcat整体架构四、Tomcat 服务器配置server.xml五、手写Tomcat六、创建Javaweb项目1、创建项目2、项目结构3、配置Tomcat第二章 Servlet入门
学习js中的DOM
xiaotai1234的博客
09-24 750
一篇文章彻底学会DOM 一、WebApi基本概念 1.为什么要学习WebApi? 2.什么是WebApi 二、DOM-文档对象模型 1.DOM基本概念 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body&g
React 知识点小结
qq_43477721的博客
03-20 329
文章目录React1. React的优缺点优点缺点2. 虚拟 DOM2.1 什么是虚拟 DOM2.2 为什么要有虚拟 DOM3. DOM Diff 算法解析3.1 什么是 DOM Diff 算法3.2 不同节点类型的比较3.2.1 节点类型不同React的DOM Diff算法实际上只会对树进行逐层比较3.2.2 节点类型相同，但是属性不同列表节点的比较3. React 理念4. React 重新 render 之后5. 哪些方法会触发 React 重新渲染6. state 和 props 触发更新的生命周期
JavaEE源代码 dom4j-1.6.1
07-09
JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源...
Shadow-DOM-inject-styles：轻松修改Shadow DOM CSS的辅助函数
02-06
Shadow-DOM注入样式 轻松修改Shadow DOM CSS的辅助功能。 安装 npm install shadow-dom-inject-styles --save Vanilla JS示例/演示 < script type =" module " > import { injectStyles } from '...
dom-to-to-retina视网膜：dom-to-to-retina，但生成高分辨率图像
03-04
dom到图像视网膜 这结合了和 。用法import { toPng , toJpeg , toBlob } from "dom-to-image-retina"const dataUrl = await toPng ( el , options )const dataUrl = await toJpeg ( el , options )const blob = ...
思维进化算法优化BP神经网络——非线性函数拟合.rar
07-26
神经网络的matlab案例，本案例介绍如下： 技术深度：案例详细介绍了如何使用MATLAB进行深度学习模型的构建、训练和测试。 实际应用：通过具体的图像识别任务，展示模型的实际应用效果，让你直观感受神经网络的强大能力。 代码解析：提供完整的MATLAB代码，并对关键部分进行详细注释，帮助你理解每一步的工作原理。 优化策略：探讨不同的训练策略和参数调整方法，优化模型性能。
穿山甲水平井导向系统用户手册
最新发布
07-26
国内一款高水平的水平井地质导向系统，双向拟合，结合三维地质模型进行三维导向
基于YOWOv2的视频动作检测python源码+模型+训练源码+项目说明（使用UCF24数据集）.zip
07-26
【1】项目代码完整且功能都验证ok，确保稳定可靠运行后才上传。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信沟通，帮助解答。 【2】项目主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 【3】项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 【4】如果基础还行，或热爱钻研，可基于此项目进行二次开发，DIY其他不同功能，欢迎交流学习。 【注意】 项目下载解压后，项目名字和项目路径不要用中文，否则可能会出现解析不了的错误，建议解压重命名为英文名字后再运行！有问题私信沟通，祝顺利！ 基于YOWOv2的视频动作检测python源码+模型+训练源码+项目说明（使用UCF24数据集）.zip基于YOWOv2的视频动作检测python源码+模型+训练源码+项目说明（使用UCF24数据集）.zip基于YOWOv2的视频动作检测python源码+模型+训练源码+项目说明（使用UCF24数据集）.zip基于YOWOv2的视频动作检测python
【SCI1区】Matlab实现三角测量拓扑聚合优化器TTAO-Transformer-GRU故障诊断算法研究.rar
07-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
dom-to-image使用方法
12-28
dom-to-image是一个用于将DOM元素转换为图像的JavaScript库。以下是dom-to-image的使用方法示例： 1. 首先，确保已经安装了dom-to-image库。可以使用npm进行安装： ```shell npm install dom-to-image ``` 2. 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值