DOM初级小结

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量107 收藏
点赞数
分类专栏： js 文章标签： javascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45685108/article/details/121193414
版权

DOM节点类型

dom节点（node）也可以称之为dom对象，分为六种类型：

DocumentType  文档类型节点（<!DOCTYPE html>）
Element       元素节点（标签节点）
Attrinute     属性节点
Text          文本节点
Comment       注释节点
Document      文档节点（指整个页面）

DOM节点关系

只获取节点时
parentElement  获取父元素节点
children   获取子元素节点
firstElementChild   获取第一个孩子元素节点
lastElementChild    获取最后一个孩子元素节点
previousElementSibling   获取上一个兄弟元素节点
nextElementSibling   获取下一个兄弟元素节点

获取所有文本（包括""）
parentNode  获取父元素节点
childNodes   获取子元素节点
firstChild   获取第一个孩子元素节点
lastChild    获取最后一个孩子元素节点
previousSibling   获取上一个兄弟元素节点
nextSibling   获取下一个兄弟元素节点

节点信息

nodeName  节点名
nodeValue  节点值
nodeType  节点类型

获取节点的方法

  • document.getElementById
    通过id属性去查询标签，只能找第一个id，相同则会忽略（因为只有一条数据，所以）
  • document.getElementsByTagName
    通过标签名查询节点（因为通常有多个相同标签名的节点，所以返回值为一个伪数组）
  • document.getElementsByClassName
    通过class属性去查询标签（因为通常有多个相同标签名的节点，所以返回值为一个伪数组）
  • document.getElementsByName
    通过Name属性去查询标签（因为通常有多个相同标签名的节点，所以返回值为一个伪数组）

以下两个方法都可以接受三种类型的参数：id(#)，class(.)，标签

  • document.querySelector
    通过选择器去查询，只返回匹配的第一个元素
  • document.querySelectorAll
    通过选择器去查询 ，返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。

注意：

1.在所有返回值为伪数组的方法中，除了querySelectorAll以外的方法都会实时更新。
2.getElementById 获取效率最高

生风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript学习笔记（2）
weixin_37290284的博客
04-07 153
一、学习资料 https://wangdoc.com/javascript/index.html 二、学习笔记 javascript学习笔记（1） 4、语法专题
DOM基础操作
LKAK117的博客
08-01 564
DOM:document objectmodel文档对象模型
document获取对象的三种三方法
止落
07-31 3641
Document对象中有几个常用的方法，我们在Dom简介中提到过。说到获取JavaScript对象的方法，最常用的可能就是getElementById了，它是Document中最常用的获取对象的方式之一，另外还有两个常用的获取对象的方法是getElementsByTagName 和getElementsByName。其中getElementById获取到的是单对象，而getElementsByNam
DOM中document.getElementById效率问题
wienne0417的专栏
07-09 3041
最近在使用中发现对于很多TD对象使用document.getElementById的方式获取时效率会很低，我统计了一下时间，以1000个TD为例，如果用document.getElementById的方式遍历并更新TD中的内容，将消耗2秒左右，如果直接使用DOM中的rows和cells属性来遍历，效率至少会提高5倍，看来HTML的界面处理真耗时啊。尽量的不要去使用document.ge
document.getElementById()方法使用
热门推荐
酣睡的熊㊣的技术博客
02-07 36万+
document.getElementById使用 语法：oElement = document .getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一
初识DOM DOM总结 心得
qq_47761388的博客
08-01 1066
什么是DOM？ DOM：Document Object Model，文档对象模型。 是一组用来描述js代码怎样与html文档进行交互和访问的web标准，它定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样式和行为。 DOM中有哪些节点类型？ 元素节点 属性节点 文本节点 DOM1 标准方法 getElementById() 因为id在html标签中是唯一，所以我们通过id获取到的元素也是唯一； 这种方法：效率，准确率都很高；不能批量选择元素； getElementsBy
JsDom 编程小结
12-09
几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。 动态创建元素的时候innerHTML可以代替createElement(),属于简单，粗放型...
DOM下的节点属性和操作小结
12-11
属性： 1 .nodeName 节点名称，相当于tagName.属性节点返回属性名，文本节点返回#text。nodeName，是只读的。 2 .nodeType 值：1，元素节点；2，属性节点；3，文本节点。nodeType是只读的。 3 .nodeValue 返回一个...
jQuery DOM操作小结与实例
10-29
jQuery 是一个广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作。DOM是HTML和XML文档的结构表示，允许我们通过编程方式访问和修改文档内容。在jQuery中，DOM操作包括创建新元素、复制现有...
JavaScript中 DOM操作方法小结
01-21
DM是(Document Object Model)的简称。 一.找元素 document.getElementById() 根据id选择器找，最多找一个； document.getElementsByName() 根据name找，找出的是数组；  document.getElementsByclassName()...
javascript dom 基本操作小结
10-29
JavaScript DOM 基本操作小结 在网上找到很多 DOM 操作的例子，感觉不全且凌乱。以下是 JavaScript DOM 基本操作小结，总结了 DOM 元素的创建、插入、替换和删除等基本操作。 DOM 元素的创建 在 JavaScript 中，...
document.getElementById使用手册
weixin_30662849的博客
02-02 133
语法：oElement = document . getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。 如果无符合条件的对象，则返回 null...
document.getElementById 学习总结
bcbobo21cn的专栏
07-01 3万+
document.getElementById获取控件对象为空的解决方法   1.下面是一个简单的例子，页面加载时显示一段信息 代码如下:                   alert("hello!!!");                 在页面加载之前，会输出一些信息   执行后，确实是“在页面加载前，输出了信息”
前端面试题（14）
weixin_44978043的博客
11-21 106
131.如何使用jQuery来给一个元素添加 和删除class属性 $(selector).addClass(cllssName) $(selector).removeClass(className) 132.使用document.getElementById()和$(#id)哪种方式效率更高 document.getElementById()是原生js语法，直接调用JS引擎完成数据处理，效率更高。$(‘#div’)是jQuery对原生js的封装提供的函数，首先调用JS代码，然后调用JS引擎 尽管原生
document.getElementById详解
weixin_30902251的博客
09-25 283
document.getElementById详解<转载> 2009-08-21 16:21 document.getElementById(" ") 得到的是一个对象，用 alert 显示得到的是“ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才 是具体的值！ 参考资料： 1. document . ...
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 1115
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
js监听dom元素大小变化
04-29
在网页开发中，经常需要监听 DOM 元素的大小变化，以便进行动态布局或其他操作。而 JavaScript 提供了一种方便的方法来实现 DOM 元素大小变化的监听。 首先，要监听 DOM 元素的大小变化，需要知道 DOM 元素的尺寸。获取 DOM 元素的尺寸可以通过其属性和方法来实现。比如，可以通过元素的 clientWidth 和 clientHeight 属性获取其内容区域的宽度和高度。 然后，要监听 DOM 元素大小的变化，可以使用 MutationObserver API。MutationObserver API 是浏览器提供的一种用于监听 DOM 变化的 API，它可以监听 DOM 元素的属性、子节点等变化，并在这些变化发生时触发回调函数。 使用 MutationObserver API 监听 DOM 元素大小变化的步骤如下： 1. 创建一个 MutationObserver 对象。 2. 使用 MutationObserver.observe 方法监听目标 DOM 元素的变化。 3. 在回调函数中判断 DOM 元素的尺寸是否发生了变化。 4. 如果尺寸发生变化，则进行相应的操作。 例如，以下代码可以实现监听某个元素宽度变化并输出宽度变化的值： ``` const target = document.querySelector('#target'); const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { const width = target.clientWidth; console.log(`Width changed to ${width}`); } }); }); observer.observe(target, { attributes: true }); ``` 最后，需要注意的是，使用 MutationObserver 监听 DOM 元素大小的变化虽然方便，但也存在一些限制，例如对于表格的大小变化无法捕获等，需要根据实际情况选择合适的方法来实现 DOM 元素大小的监听。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值