DOM基本操作(增、删、改、查)

最新推荐文章于 2023-08-31 09:55:22 发布
最新推荐文章于 2023-08-31 09:55:22 发布
阅读量545 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fqq_5280/article/details/81407254
版权

DOM基本操作

document代表整个文档（html只是代表根标签）

DOM选择器（查）

（通过方法）

  • getRlementById通过id拿到元素（id是唯一标识！但是id出现频率超==少==）

    （IE8之前的版本 name 也会被选择，现在改了）

  • getElementsByTagName 通过标签名拿到元素（最==常用==！）

  • getElementsByClassName 好用，但是ie8及以下版本没有（==class==最常用了）

  • getElementsByName 在旧版本浏览器中只有部分标签的name可以生效（但是name 出现频率也很==少==）

下面这两个不怎么用，因为选出来的元素==不是实时==的元素

  • querySelector 也是document的方法 选择方法类似css 选一个
  • querySelectorAll 选一组 其余和querySelector相似

一般来说，取得的元素==们==都是类数组。

遍历节点树

  • parentNode ->父节点（最顶端的parentNode为#document）

  • childNodes ->子节点们

  • firstChild ->第一个子节点

  • laseChild ->最后一个子节点

  • nextSibling ->后一个兄弟节点

  • pervSibling ->前一个兄弟节点

  • overDocument 该属性指向表示整个文档的文档节点

遍历元素节点树
  • parentElement ->父元素节点 (IE不兼容)
  • children ->元素子节点！！！！
  • node.childElementCount ->等于node.children.length 没啥大用 (IE不兼容)
  • firstElementChild (IE不兼容)
  • lastElementChild (IE不兼容)
  • nextElementSibling (IE不兼容)
  • prevElementSibling (IE不兼容)

上面这个IE不兼容指的是IE9及IE9以下不兼容（IE9不搞W3C）

增

  • document.creatElement
  • document.creatTextNode
  • document.creatComment
  • document.creatDocumentFragment

插

  • PARENTNODE.appendChild
  • PARENTNODE.insetBefore(a,b)

删

  • parent.removeChild
  • child.remove

替换

  • parent.replaceChild(new,origin)

属性

  • nodeValue 只有text节点和comment节点拥有，返回内容
  • nodeName 返回元素的标签名
  • nodeType 返回属性的数值常量！！！！
  • attributes Element节点的属性集合

节点的一个方法

  • 每个节点都有一个方法hasChildNodes 表示是否有子节点（但是文本节点也算子节点就…没啥卵用）

DOM继承树

//等我作图先

DOM基本操作

  • getRlementById 定义在Document.prototype上，即Element节点不能使用
  • getElementsByName 定义在HTMLDocument.prototype上，即非html中的document不能使用（xml document, Element）
  • getElementsByTagName 定义在Document.prototype和Element.prototype上

  • HTMLDocument.prototype 定义了一些常用的属性，body,head分别指代HTML文档中的<body>,<head>

  • Document.prototype 定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代<html>元素

  • getElementByClassName,querySeletorAll,querySeletor 在 Document.prototype，Element.prototype类中均有定义

tips：在getElementsByTagName()里面可以写 * 这样就会选出来所有标签

  • innerHTML
  • innerText
akueq
关注
专栏目录
vue的增删改查
11-19
在Web开发中，"增删改查"（CRUD）是基本操作，对于任何数据驱动的应用来说都是核心功能。Vue.js 提供了丰富的特性来支持这些操作，使得在Vue项目中实现CRUD变得简单高效。 1. **创建（Create）**： 在Vue中创建新...
JavaScript之DOM增删改查(重点)
程序猿小九九的博客
02-10 3778
DOM操作：事件、增、删、改查
DOM的增删改查
weixin_44860226的博客
08-02 1027
onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出元素时触发函数。如需向HTMLDOM添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。HTMLDOM使JavaScript有能力对HTML事件做出反应。通过HTMLDOM，您能够访问HTML元素的样式对象。访问HTMLDOM-查找HTML元素。修改HTML=改变元素、属性、样式和事件。"已启用cookie""未启用cookie"...
JavaScript：DOM 操作 增、删、改、查 详解（用法 + 例子 + 代码）
最新发布
Cosmoshhhyyy的博客
08-31 872
本文介绍js中的dom操作，用于html元素对象的增、删、改、查。包含用法、例子、效果、代码。
DOM操作（增删改查）详解
qq_44709805的博客
11-26 3701
一、DOM操作 1.DOM概念 当网页被加载时，浏览器会创建页面的文档对象模型DOM DOM：Document Object Model 注:DOM说明 在DOM中，每个东西都是节点： 文档本身就是一个文档对象 所有html元素都是元素节点 所有html属性都是属性节点 插入到html元素文本是文本节点（包括空格，回车，换行等） 注释是注释节点 2. DOM操作 注：在DOM加载完之后再执行相关js操作 DOM四大操作：查找、更新、添加、删除 通过DOM，JavaScript 可创建动态的 HTML
【JavaScript】DOM元素操作节点增删改查
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
03-30 2107
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式。网页中的所有内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用Node来表示。HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
BootStrap实现带有增删改查功能的表格(DEMO详解)
09-01
在表格的实现上，BootStrap默认的样式提供了基础的布局，但并不包括常见的操作列，如增删改查功能。为了实现这些功能，我们需要结合JavaScript和CSS进行扩展。 首先，我们要了解BootStrap表格的基础结构。一个基本...
jQuery对table表格进行增删改查
10-20
在本文中，我们将深入探讨如何使用jQuery来对HTML表格进行增删改查操作。jQuery是一个强大的JavaScript库，它简化了DOM操作，使得处理表格数据变得更加容易。以下是对jQuery实现表格增删改查功能的详细说明。 ### ...
Java使用dom4j实现对xml简单的增删改查操作示例
08-19
该示例主要介绍了如何使用dom4j库在Java项目中实现对XML文件的增删改查基本操作，并列举了相关的实例代码和注意事项。 首先，要使用dom4j进行XML操作，需要在项目中引入dom4j的jar包。通常，这个jar包应该放在项目...
超强 DOM增删改,js日历综合案例实现
03-21
wpCalendar.js 博文链接：https://javawangli.iteye.com/blog/965775
DOM操作（增删改查）
weixin_51405694的博客
05-18 278
DOM操作（增删改查）
使用DOM完成订单的添加、修改及删除操作
wangyin233的博客
11-21 7630
这里写自定义目录标题初始界面如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 初始界面 点击“增加订单”按钮时，可增加一行订单信息。 点击“修改”按钮时，数量改为文本框显示，可以改变数量，并且“...
DOM实现增删改查
qq_65168354的博客
11-01 176
不知道大家发没发现，很多时候啊，我们不方便直接在body里面写标签以及样式那些，之后我们又会从后台获取数据，然后再放到界面上，哎呀，没学过DOM的小伙伴就头疼了，这可怎么办啊，好难写啊。不怕，我下面就写几个简单的DOM增删改查的操作，我们大家一起来认识认识。
JS(八)：DOM节点的增删改查与属性设值、作业【遮罩层】、【正反选】、【二级联动】
白骨梦儿
06-21 295
一、node的CURD(增、删、改、查)： 1.增 a、createElement(name)创建元素 b、appendChild();将元素添加 2.删 a、获得要删除的元素 b、获得它的父元素 c、使用removeChild()方法删除 3.改 第一种方式：使用增和删结合完成修改： replace(new标签，old标签)：用一个标签替换一个标签； 第二种方式： 使用s...
JavaScript 操作 DOM 节点树（添加、插入、删除、替换、复制节点）
ONESTARの博客
08-20 5089
目录 1、添加节点 2、插入节点 3、删除节点 4、替换节点 5、复制节点 1、添加节点 appendChild()：添加子节点到末尾（类似于粘贴复制的效果） 步骤： 获取到ul 获取到div2 把ul添加到div2 2、插入节点 insertBefore(newNode，oldNode)：在某个节点之前插入一个新的节点 步骤： 获取到li3标签 创建li 创建文...
JS的基本DOM操作（增删改查）
分享，让视野更宽阔
06-29 4491
### 查找 ### （就是获取元素） (1)，标准DOM API    document.getElementById(id); document.getElementsByTagName(name); document.getElementsByName(name); document.getElementsByClassName(names)...
jQuery操作DOM元素
weixin_33889245的博客
01-19 302
jQuery操作DOM元素 　　HTML DOM常见操作: 　　查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点.   查找节点 　　关于节点的查找,是利用选择器完成的. 　　在上一篇jQuery选择器中已经介绍过了:http://www.cnblogs.com/mengdd/p/4211663.html   插入节点 　　首先看一个例子,用原生的JavaScript如...
dom增删改查
cdut2016的博客
06-18 285
Dom文档对象模型 把整个网页看做是一个对象，通过这个对象可以使用js改变网页中的内容。所以dom是整个JS中最核心的内容。 这里我就直接创建一个实例就可以了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#">aa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值