常用DOM方法和属性 小结

最新推荐文章于 2022-05-01 15:19:31 发布
原创 最新推荐文章于 2022-05-01 15:19:31 发布 · 687 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#常用DOM方法和属性 小结 #DOM #js #遍历

本文深入探讨了DOM（文档对象模型）的主要方法，包括查找节点、创建节点、复制节点、插入节点、替换节点及设置节点属性等关键操作。通过实例演示和详细解释，帮助开发者掌握DOM操作技巧，优化网页和应用的动态交互体验。

DOM主要方法

查找节点

element = document.getElementById(id)

elements = document.getElementsByTagName(tagName)

attributeValue = element.getAttribute(attributeName)

booleanValue = element.hasChildNodes()

创建节点

reference = document.createElement(element)

reference = document.createTextNode(text)

复制节点

reference = node.cloneNode(booleanValue)

插入节点

element.appendChild(newChild)

element.insertBefore(newNode, targetNode)

替换节点

element.replaceChild(newChild, oldChild)

设置节点属性

element.setAttribute(attributeName, attributeValue)

删除节点

element.removeChild(node)

DOM属性

节点属性

nodeName

nodeType

nodeValue

遍历节点树

childNodes

firstChild

lastChild

nextSibling

previousSibling

parentNode

 

 

 

 

 

#码道老刘#
关注
jQuery中DOM常见操作实例小结
10-16
### jQuery中DOM常见操作实例小结知识点 #### DOM属性操作 1. **设置或返回元素属性：** - `attr(name, value|fn)`：可以用来获取或设置属性值。如果提供值，它会设置属性；如果提供函数，那么会在每个匹配元素上...
jQuery DOM操作小结与实例
12-07
jQuery提供了修改元素样式、属性和内容的方法。例如： - `.attr('attribute', 'value')`用于设置或获取元素的属性。如`$('selector').attr('class', 'newClass')`。 - `.css('property', 'value')`用于改变或读取...
常用的DOM操作
qq_25368263的博客
07-28 354
常用的DOM操作 原有段落1 点击 原有段落2 （1）新增//创建节点：createElement(); var para=document.createElement("p"); //创建文本节点 var node=document.createTextNode("这是新的段落"); （2）添加//插入节点到最后：appendChild(); var newhtml=para
BOM&DOM_常用方法和属性
qq_51507950的博客
05-01 222
1.BOM BOM：（Browser Object Model）是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。 1、windows对象 浏览器窗口信息，除了BOM外，window对象是所有浏览器的父对象 常用方法和属性： window.innerHeight：浏览器窗口内部高度 window.open()：打开新窗口 window.resizeTo()
最常用的js DOM方法小结
lance的进击之路
07-05 375
最常用的js DOM方法小结
php中dom加载顺序和常用事件,JS的Dom与事件小结
weixin_39920338的博客
04-08 124
这次给大家带来JS的Dom与事件小结，JS的Dom与事件小结注意事项有哪些，下面就是实战案例，一起来看一下。dom对象的innerText和innerHTML有什么区别？innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。elem.children和elem.childNodes的区别？No...
JavaScript_基础——BOM&DOM_常用方法和属性
Ho1aAs‘s Blog
11-10 655
文章目录JavaScript的组成一、BOMⅠ、BOM介绍Ⅱ、浏览器对象1、windows对象2、navigator对象3、screen对象4、location对象5、document对象6、history对象二、DOMⅠ、DOM介绍Ⅱ、选择节点Ⅲ、获取及修改节点内容Ⅳ、修改节点样式及属性Ⅴ、删除、增加子节点完 JavaScript的组成 一个完整的JavaScript由三部分组成： ECMAScript：规定了语法、类型、语句等 BOM：浏览器对象模型 DOM：文档对象模型 一、BOM Ⅰ、BOM介绍
关于DOM的一些常用标签属性等小结
weixin_39278254的博客
07-16 430
最近在看javascript高级程序设计，以下摘录一些关于DOM的笔记 元素类型（nodeType： 1） 对于元素类型来说，nodename是它的tagname，nodevalue为null 属性类型 （nodeType）2 对于属性类型来说，nodename是它的属性名，nodevalue为属性值 文本类型（nodeType） 3 对于文本类型的来说，nodename值为#text，nod
JS的DOM解析3--常用方法及属性--document和标签
weixin_40025586的博客
10-09 289
1.document下的常用属性： <script type="text/javascript"> //document:文档 常用属性：1.body 2.title 3.domain 4.URL var body=document.body; console.log(body); //title va...
获取DOM元素方法小结
letterTiger的博客
03-28 1343
在开发中不可避免的需要操作DOM，现在就来总结一下原生的获取DOM的API。 getElementById、querySelector、querySelectorAll、getElementsByCalssName这些方法有的只能在document上调用有的返回一个HTMLCollection集合。本文就来简单总结一下这些知识点。
DOM 简单小结
daniel_yang1125的博客
06-13 208
DOM Node 类型 文档 —> 节点，Node 类型 Node 接口，由 DOM 中所有节点类型实现； 因为共享相同属性和方法； 属性： nodeType nodeName nodeValue 节点关系： childNodes —> NodeList 对象 类数组 有序 动态查询（访问那一刻） parentNode previousSibling nextSibling ownerDocument —> 整个文档的文档节点 操作节点 appendChild i
JavaScript window.document的属性、方法和事件小结
10-27
标题中提到的“JavaScript window.document的属性、方法和事件小结”涉及了JavaScript中操作DOM的核心部分，其中window.document对象是整个浏览器环境窗口中代表HTML文档的根节点。通过这个对象，可以访问和操作HTML...
DOM2非标准但却支持很好的几个属性小结
09-05
这些属性在DOM2级中虽然不是正式标准，但它们在实际开发中非常实用，尤其是在进行页面布局、交互和动态内容更新时。开发者可以利用这些属性来获取元素的精确尺寸，处理滚动行为，或者进行复杂布局的计算。由于浏览器...
Js 获取HTML DOM节点元素的方法小结
10-30
- document.getElementById(elementId)：这是最常用的获取单个DOM元素的方法。通过元素的id来获取，返回一个具体的DOM对象。需要注意的是，id应当在页面中是唯一的。在早期的IE浏览器中，此方法不支持ID以数字开头...
基于 MATLAB 的 5G NR L1 层专用仿真脚本
12-02
基于 MATLAB 的 5G NR L1 层专用仿真脚本
政府部门如何借助数字化升级路径突破产品同质化严重，并打造差异化的产业升级？.docx
12-02
政府部门如何借助数字化升级路径突破产品同质化严重，并打造差异化的产业升级？
STM32F407 FreeRTOS + LittlevGL + FatFS 移植示例
最新发布
12-02
本资源文件包含了一个基于STM32F407微控制器的移植示例，其中集成了FreeRTOS操作系统、LittlevGL图形库以及FatFS文件系统（版本0.14）。该示例还支持电阻屏输入接口，适用于学习和研究目的。 主要功能 FreeRTOS操作系统: 提供了多任务管理功能，确保系统能够高效地处理多个任务。 LittlevGL图形库: 提供了丰富的图形界面功能，支持按钮、滑块、图表等多种控件，适用于嵌入式设备的图形界面开发。 FatFS文件系统: 支持文件的读写操作，方便在嵌入式设备上进行数据存储和管理。 电阻屏输入接口: 支持电阻屏的输入操作，用户可以通过触摸屏与系统进行交互。 适用场景 本示例主要用于学习和研究嵌入式系统开发，特别是针对STM32F407微控制器的应用开发。开发者可以通过该示例快速了解如何在STM32F407上集成FreeRTOS、LittlevGL和FatFS，并进行相应的功能扩展。
Matlab实现路径规划算法项目_包含Dijkstra算法和A算法的路径规划工具_用于机器人导航自动驾驶模拟游戏AI寻路物流配送优化无人机航迹规划虚拟角色移动网络路由.zip
12-02
Matlab实现路径规划算法项目_包含Dijkstra算法和A算法的路径规划工具_用于机器人导航自动驾驶模拟游戏AI寻路物流配送优化无人机航迹规划虚拟角色移动网络路由.zip
激光光束传输与谐振腔仿真ABCDRez
12-02
激光光束传输与谐振腔仿真ABCDRez
JS Document属性与方法详解：基础设置与常用操作
本文档小结了关于Document对象的一些重要属性和方法，它们在网页开发中扮演着至关重要的角色。 首先，我们来看看Document对象的基本属性： 1. `document.title`：这是设置文档标题的关键属性，相当于HTML中的`...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值