JS常用dom操作方法

最新推荐文章于 2023-01-23 10:03:14 发布
原创 最新推荐文章于 2023-01-23 10:03:14 发布 · 231 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了DOM操作的基础知识，包括查找元素的方法如getElementById, getElementsByTagName, querySelector, querySelectorAll；如何进行元素的插入，例如使用appendChild, insertBefore；如何删除元素，如removeChild；如何克隆节点，如cloneNode；以及如何设置和获取元素属性，如setAttribute和getAttribute。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

查找 ：
getElementByid
getElementByTagName
quertSelector
querySelectAll
插入：appendChlid,insertBefore
删除：removeChild
克隆：cloneNode
设置和获取属性：setAttribute(“属性名”,“值”），getAttribute(“属性名”)

番凪_BanNagi
关注
js关于dom的常用操作
liuhao9999的博客
05-27 187
const trim = function (string) { return (string || "").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, ""); }; /*获取当前元素的偏移（相对于整个document） * offsetTop：元素最顶端距离文档顶端的距离，包含滚动条 * offsetleft：元素最左侧距离文档左侧的距离，包含滚动条 * left：元素最左侧距离文档左侧的距离，不包含滚动条 * top:元素最顶端距离..
一文讲清楚javaScript中的DOM操作
最新发布
xiaobangkeji的博客
12-22 1366
一文讲清楚javaScript中的DOM操作，DOM操作不再犯迷糊
javascript 常用DOM操作整理
weixin_33690367的博客
10-10 97
1.选取了DOM操作中实用并常用的部分，省略了实用但有明显兼容性的部分2.DOM属性和方法的对象归属可能并不完全准确3.某些一般兼容性和特点做了标识(主要是ie8-9上下) 节点类型 节点类型节点值 标签节点(Element) 1 属性节点(Attr) 2 文本节点(Text) 3 CDATA节点(CDATASetion) 4 实体引用节点(E...
JS操作DOM元素属性和方法
热门推荐
力求改变，给自己多一点，再多一点的挑战！
03-24 2万+
<br /><br />Dom元素基本操作方法API，先记录下，方便以后使用。 <br /> <br />　　W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访<br /> <br />问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档<br /> <br />中的每个元素都是DOM的一部分，这就使得JavaScript可以
javaScript DOM方法与属性
简约时尚，突破自我
11-25 153
转自http://dev.21tx.com 网页教学网 1 createElement(element) 创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。 eg) var para = document.createElement("p"); document.body.appendChild(para); 2 createTextNode() ...
JavaScript中DOM的操作方法
qq_57606640的博客
10-31 3461
1、获取元素 document.getElementById（） document.getElementsByClassName（）[0] document.getElementsByName（）[0] document.getElementsByTagName（）[0] document.querySelector（） document.querySelectorAll（）[0] 2、获取内容 alert(a.innerHTML);获取代码和内容，但只显示内容。 alert(a.in
js常用DOM方法详解
10-20
本文主要详细介绍了JavaScript中几个常用的DOM操作方法，它们分别是getElementById、getElementsByTagName、getElementsByClassName、getAttribute、setAttribute、childNodes、nodeType、nodeValue、firstChild和...
浅析JS操作DOM的一些常用方法
11-22
在本文中，我们将深入探讨一些常用的JS操作DOM的方法。 1. **getElementById()**: 这个方法是获取页面上具有唯一ID的元素的最直接方式。例如，`document.getElementById('myID')`将返回ID为'myID'的元素。由于ID在...
原生JS实现几个常用DOM操作API实例
12-29
原生实现jQuery的sibling方法 <body> 我是span标签 我是一个div 我是标题 我是一个段落 [removed] //获取元素的兄弟节点 function siblings(o){//参数o就是想取谁的兄弟节点，就把那个元素传进去 var a = [];...
js中常见的DOM操作
Wen_Tao98的博客
01-19 477
一、dom元素获取 document.getElementById(id的值) 通过id来获取元素的对象，返回值是一个对象 document.getElementsByName() 通过name属性来获取对象的,返回值是一个数组 document.getElementsByTagName() 通过标签来获取元素的对象, 返回值是一个数组 document.getElementsByClassName() 通过class类名来获取的对象,返回值是一个数组 document.querySelector
DOM的方法（操作）
LennieGao的博客
01-24 2729
好好学习 ，天天向上。Are you ready? DOM的增、删、查： 1、增---------createElement var oDiv = document.createElement(‘div’); document.body.appendChild(oDiv);//只有追加后，页面上才会出现 2、删---------removeChild 语法:fatherObj.removeChil...
js的dom操作
m0_61596847的博客
12-07 904
事件执行的步骤 1、获取事件源 2、注册事件（绑定事件） 3、添加事件处理程序 操作元素 1、改变元素内容 1.element.innerText………………空格和换行都会删除（非标准） element.innerHTML……………空格和换行保留（识别HTML标签 W3C标准，标签照样给你现实，对input里面的内容没有效果） 2. src、href 3. id、alt、title 2、修改表单属性 1.value 这里不用innerHTML，他对于普通盒子起效果 inp...
JS操作DOM
weixin_53571388的博客
03-11 200
前言 vue 和 React 框架应用广泛，封装了 DOM 操作 但 DOM 操作一直都会前端工程师的基础、必备知识 只会 vue 而不懂 DOM 操作的前端程序员，不会长久 DOM JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点 整个文档是一个文档节点 每个标签是一个元素节点 包含在元素中的文本是文本节点 元素上的属性是属性节点 文档中的注释是注释节点 DOM 本质上是 DOM 树： DOM树是结构，树是由
js操作DOM的方法总结整理
Ass12454548的博客
01-23 1389
DOM（Document Object Model）文档对象模型。DOM为HTML提供了结构化表示方法，定义了访问和处理文档结构的方法规范。HTML可以理解为是由DOM节点构成的集合，主要由元素节点、文本节点、属性节点三部分构成。通过节点之间的关系来查找元素节点，dom节点之间关系图以及操作方法如下。获取当前节点的文本值。
原生js获取document_原生js获取DOM对象的几种方法
weixin_39553458的博客
12-20 846
获取DOM元素的方法：1.通过id获取let box= document.getElementById("box");1234注意：getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。2. 通过class获取let boxCollection= document.getElementsByClassName("box...
js_DOM操作
weixin_30568715的博客
01-31 80
嗯，大过年的上次更新应该还是在，大年30前一天，说好的一天更一篇，感觉食言了，虽然没有更，但是，每天还是坚持在学习的，所以今天的任务就是把这几天学的都发上来。 博客，我觉得不仅仅是交流知识的地方，我宁愿把它写成我的生活日记。有差的，欢迎拍砖。 好了，进入正题吧。 DOM操作，我觉得可以归结成三个，一个标签节点，一个属性节点，一个文本节点。 这里的 li 就是标签节点； alt就是属...
js中操作dom
weixin_48456565的博客
01-19 248
DOM元素的创建，增删改查和属性操作 创建：document.wirte、innerHTML、createElement 增加 ：appendChild insertBefore 删除 ：removeChild 改 修改元素的属性：src、href、title等 修改普通元素内容：innerHTML、innerText 修改表单元素：value、type、disabled、checked等 修改元素样式：style、className 查 DOM提供的API方法：getElementById、getElem
DOM 操作常用方法
超越梦想的专栏
08-07 2222
一、直接引用结点 document.getElementById(id); 在文档里面通过id来找结点document.getElementByTagName(tagName); 返回一个数组，包含对这些结点的引用 如：document.getElementByTagName("span");将返回所有类型为span的结点 二、间接引用结点 element.childNodes
【JS】常用DOM操作
空空
10-23 315
1.获取元素dom节点 通过元素的ID名获取元素：document.getElementById(’#id’); 通过元素的Class名获取元素集合：document.getElementsByClassName(’.class’); 通过元素的标签名获取元素集合：document.getElementsByTagName(‘tagName’); 通过元素的name名获取元素集合：document...
掌握JavaScript中常用的DOM操作方法
### 知识点：JavaScript中常用DOM方法 #### 1. 什么是DOM DOM（文档对象模型，Document Object Model）是一个平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构以及样式。在JavaScript中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值