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

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

本文详细介绍了DOM的基本操作，包括选择器的使用方法、遍历节点树的方式、如何进行元素的增删改查等，并探讨了不同浏览器间的兼容性问题。

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
DOM增删改查练习
沉梦昂志
07-10 348
练习一 效果图 heml代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</
BootStrap实现带有增删改查功能的表格(DEMO详解)
09-01
在表格的实现上，BootStrap默认的样式提供了基础的布局，但并不包括常见的操作列，如增删改查功能。为了实现这些功能，我们需要结合JavaScript和CSS进行扩展。 首先，我们要了解BootStrap表格的基础结构。一个基本...
DOM的增删改查
Always-Learning
11-26 264
1：在id名为city的div下添加一个li标签，标签内容为广州。 # 1：创建li元素 var li = document.createElement("li"); # 2：创建文本节点 var guangzhou = document.createTextNode("广州"); # 3：将li元素与文本绑定在一起 li.appendChild(guangzhou); # 4：获取id为city的节点 var city = document.getElementById("city"); # 5：将组合好
DOM增删改查
KennGum的博客
07-06 367
DOM 查询 节点的属性 获取元素节点 获取元素节点的子节点 获取父节点和兄弟节点 DOM查询的其他方法 DOM增删改 Window常用对象方法 节点的属性 nodeName nodeType nodeValue 文档节点 #document 9 null 元素节点 标签名 1 null 属性节点 属性名 2 属性值 文本节点 #text 3 文本内容 获取元素节点 通过document对象调用 getElementById() 通过 id 属性获取一个元
dom增删改查
cdut2016的博客
06-18 340
Dom文档对象模型 把整个网页看做是一个对象，通过这个对象可以使用js改变网页中的内容。所以dom是整个JS中最核心的内容。 这里我就直接创建一个实例就可以了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#">aa
js中DOM的增删改查
weixin_43735593的博客
11-23 1272
js中DOM的增删改查 常见的Dom、html的操作不外乎查找节点、增加节点（尤其是动态渲染数据的时候）、修改节点内容、删除节点。 查找节点 1、一般就是document.getElement(s)系列，主要有document.getElementById(‘id’)、document.getElementsByClassName(‘classname’)、document.getElements...
Android利用Dom对XML进行增删改查操作详解
08-28
本文将深入探讨如何使用DOM（Document Object Model）解析器在Android中对XML进行增删改查操作。DOM解析方式的特点是它将整个XML文档加载到内存中，形成一个树形结构，允许开发者方便地遍历和操作XML的各个部分。 1...
jQuery对table表格进行增删改查
10-20
在本文中，我们将深入探讨如何使用jQuery来对HTML表格进行增删改查操作。jQuery是一个强大的JavaScript库，它简化了DOM操作，使得处理表格数据变得更加容易。以下是对jQuery实现表格增删改查功能的详细说明。 ### ...
Java使用dom4j实现对xml简单的增删改查操作示例
08-19
该示例主要介绍了如何使用dom4j库在Java项目中实现对XML文件的增删改查基本操作，并列举了相关的实例代码和注意事项。 首先，要使用dom4j进行XML操作，需要在项目中引入dom4j的jar包。通常，这个jar包应该放在项目...
JS结合bootstrap实现基本的增删改查功能
10-21
本教程将详细介绍如何利用原生JavaScript和Bootstrap实现一个基本的增删改查功能，这对于任何Web应用来说都是一个基础且重要的部分。 首先，我们需要理解Bootstrap是一个流行的前端开发框架，它提供了丰富的UI组件...
DOM增删改
weixin_30882895的博客
09-05 176
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
DOM操作（增删改查）
weixin_51405694的博客
05-18 374
DOM操作（增删改查）
JavaScript之DOM增删改查(重点)
程序猿小九九的博客
02-10 4050
DOM操作：事件、增、删、改查
怎样添加、移除、移动、复制、创建和查找节点？
weixin_30387663的博客
03-20 137
1）创建新节点 　　createDocumentFragment() //创建一个DOM片段　　createElement() //创建一个具体的元素　　createTextNode() //创建一个文本节点 2）添加、移除、替换、插入　　appendChild() //添加　　removeChild() //移除　　replaceChild() //替换　　insertBefore() /...
DOM的操作（增删改查）
weixin_30359021的博客
08-12 434
操作DOM的核心就是增删改查 目录 一、节点创建型API 1.1 createElement 1.2 createTextNode 1.3 cloneNode 1.4 createDocumentFragment 二、页面修改形API（包括删除和添加）（删）（改） 2.1 appendChild(追加为子元素) 2.2 insertBefore(插入...
Java实现DOM解析XML的增删改查操作详解
通过Java的DOM技术，开发者可以方便地对XML文件进行复杂的操作，如增删改查等。而三层架构设计和单例模式的结合使用，可以提高系统的模块化和可维护性。在Web应用中，Servlet和过滤器的角色是构建一个高效、安全的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值