JavaScript-DOM如何操作?看完本文就明白了

DOM,即文档对象模型,是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格,DOM的重要性不言而喻,今天我们就来学习一下JavaScript中DOM的操作方法。

DOM的增加

DOM操作中指的是增加节点,分为两部分:创建节点插入节点

创建节点

创建节点中常用的API方法主要有:

  1. document.createElement():创建指定的HTML元素
  2. document.createTextNode():创建文本节点
  3. document.createDocumentFrame():创建文档片段
  4. document.createAttribute():创建节点属性
  5. node.cloneNode():克隆节点

插入节点###

插入节点常用的API方法主要有:

  1. node.appendChild():末尾追加一个新节点
  2. node.insertBefore():插入一个新节点

<div id="div1"><p id="p1">这是一个段落</p><p id="p2">这是另一个段落</p></div>

<script>var para=document.createElement("p");var node=document.createTextNode("这是新段落。");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);</script>

例子解释:

这段代码创建新的 <p>元素:

var para=document.createElement("p");

如需向 <p>元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:

var node=document.createTextNode("这是新段落。");

然后您必须向 <p>元素追加这个文本节点:

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素:

element.appendChild(para);

关于document.createAttribute()

document.createAttribute() 方法创建并返回一个新的属性节点。但是这个方法不是很常用,如果涉及到创建属性,一般使用node.setAttribute() 。

<div id="div1">

<p id="p1">这是一个段落</p>

<p id="p2">这是另一个段落</p>

</div>

var node = document.getElementById(‘div1‘); var newAttr = document.createAttribute(‘title‘);  //创建一个新的title属性;

newAttr .nodeValue = ‘Hello world!‘;  //title属性的值是:Hello world!

node.setAttributeNode(attr); //运用到对应的元素节点上

关于node.cloneNode()

node.cloneNode(deep) 方法返回该节点的一个副本,deep 可选,表明是否采用深度克隆,如果为true ,则该节点的所有后代节点也都会被克隆,否则,只克隆该节点本身。

<div id="div1">

<p id="p1">这是一个段落</p>

<p id="p2">这是另一个段落</p>

</div>

var node = document.getElementById(‘div1‘);var cloneNode = node.cloneNode(true); //克隆div1整个节点;

cloneNode.id = "div2"; //修改克隆的节点id名称为div2;

document.body.appendChild(cloneNode); //在网页中追加克隆的节点;

DOM的删除

DOM节点的删除主要API是node.removeChild();可以使用parentNode.removeChild(child)删除指定父节点parentNode的一个子节点child,并返回被删除的节点。

注意事项:这个方法是要在被删除的节点的父节点上调用的,而不是在被删除节点上调用的,如果参数节点不是当前节点的子节点,removeChild 方法将报错。

<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div>

<script>var parent=document.getElementById("div1");var child=document.getElementById("p1");

parent.removeChild(child);</script>

例子解释:

这个 HTML 文档含有拥有两个子节点(两个<p>元素)的 <div> 元素:

<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div>

找到 id="div1"的元素:

var parent=document.getElementById("div1");

找到id="p1" 的 <p> 元素:

var child=document.getElementById("p1");

从父元素中删除子元素:

parent.removeChild(child);

DOM的修改

修改节点常用的API方法主要有:

  1. appendChild():末尾追加一个新节点
  2. insertBefore():插入一个新节点
  3. replaceChild():替换节点

注意事项:以上几个方法都是操作的某个节点的子节点,也就是说,要使用这几个方法必须先取得父节点。另外并不是所有节点都有子节点,如果在不支持子节点的节点上,调用了这些方法,将会导致错误。

DOM的查找

DOM节点中的查主要包括:查找元素节点查找

查找元素

  1. getElementById() --- 通过ID访问;
  2. getElementsByClassName() --- 通过类名访问;
  3. getElementsByTagName() --- 通过标签名称访问;
  4. querySelector() --- 通过CSS选择器访问(单个);
  5. querySelectorAll() --- 通过CSS选择器访问 (所有);

关于这一节的内容,可以访问上一篇文章:JavaScript-DOM访问方式

节点查找

所有的节点都有这些属性,都是可以用于访问相关的node节点:

  1. Node.childNodes: 访问一个单元素下所有的直接子节点元素,可以是一个可循环的类数组对象。该节点集合可以保护不同的类型的子节点(比如text节点或其他元素节点)。
  2. Node.firstChild: 与childNodes数组的第一个项(Element.childNodes[0])是同样的效果,仅仅是快捷方式。
  3. Node.lastChild: 与childNodes数组的最后一个项(Element.childNodes[Element.childNodes.length-1])是同样的效果,仅仅是快捷方式。
  4. Node.parentNode: 访问当前节点的父节点,父节点只能有一个,祖节点可以用Node.parentNode.parentNode 的形式来访问。
  5. Node.nextSibling: 访问DOM树上与当前节点同级别的下一个节点。
  6. Node.previousSibling: 访问DOM树上与当前节点同级别的上一个节点。

总结

DOM操作在JavaScript还是很重要的,简单点说,所有的交互操作都是基于DOM来操作的。而DOM中的操作,最为熟悉的就是对DOM的增、删、改、查。今天的内容也就围绕着这几个方面展开学习。

原文地址:https://www.cnblogs.com/a1231230/p/12107546.html

时间: 2024-10-05 02:31:27

JavaScript-DOM如何操作?看完本文就明白了的相关文章

Windows PowerShell是啥?看完本文你就懂它了

这篇文章主要介绍了Windows PowerShell是啥?Windows PowerShell是什么?Windows PowerShell有哪些特性?Windows PowerShell有什么用?看完本文你就懂它了,需要的朋友可以参考下 一直很羡慕Linux的命令提示符(当然他们叫Shell).正则表达式,管道,各种神奇的命令,组合起来就能高效完成很多复杂的任务.效率实在是高.流了n年的哈喇子以后,终于有幸用上了Win7,邂逅了cmd的升级版:Windows PowerShell.从此暗爽无比

MySQL索引-B+树(看完你就明白了)

索引是一种数据结构,用于帮助我们在大量数据中快速定位到我们想要查找的数据.索引最形象的比喻就是图书的目录了.注意这里的大量,数据量大了索引才显得有意义,如果我想要在 [1,2,3,4] 中找到 4 这个数据,直接对全数据检索也很快,没有必要费力气建索引再去查找. 索引在 MySQL 数据库中分三类: B+ 树索引 Hash 索引 全文索引 我们今天要介绍的是工作开发中最常接触到的 InnoDB 存储引擎中的 B+ 树索引.要介绍 B+ 树索引,就不得不提二叉查找树,平衡二叉树和 B 树这三种数据

Javascript:DOM表格操作

需求说明: /* *需求说明: *获取元素:tBodies,tHead,tFoot,rows,cells *表格的创建 *数据添加 *隔行变色 *删除操作,剩余表格重新计算,实现隔行变色 */ HTML: <table id="table1"> <tbody> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th

JavaScript -DOM 编程艺术 2nd 完

今日看完了这本书,做完了最后一个综合性例子.说实话收获良多,终于明白前端-h5 具体做什么 越学习越无知,这个看来真是一个真理. 后期计划: 1.CSS + DIV 布局深入了解,重点实战 2.JavaScript 高级编程那本书吃透 3.后台与前端的数据交换 为什么我喜欢技术,很奇怪:-)

javascript DOM基础操作

DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式.   一.DOM介绍 DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档:O(对象)可以理解为类似window对象之类的东西,可以调用属性和方法,这里我们说

javascript——DOM之操作属性的多种方式

获取和设置元素的方法:. [] getAttribute 具体实例: HTML部分: <input type="text" id="text1" value="text" _name_="自定义属性" /><br><br> <img src="images/pic.jpg" id="img1" style="width:180px&qu

Javascript——dom常用操作-- date操作

var Dates = { //补位 digit: function (m) { return +m < 10 ? '0' + m : m; }, //日期格式化可date可是数组也可以是字符串 parse: function (date, format) { var _index = 0; if (typeof date == 'string') date = this.toarry(date); if (date == null) return ''; //console.log(date)

你是否还在为你的开发效率低而困惑,看完本文,让你的开发效率提升10倍!

软件环境: Mac/Win/Linux快捷键: Default AndroidStudio v3.5.0 不同的外接键盘使用下列快捷键,需要根据自己的键盘做相应的调整 参数提示 如果某个方法参数超级长,你不知道参数是什么怎么办?我们可以使用下面快捷键 Mac: Cmd + P win/Linux: Ctrl + P 自动提取方法 我们在优化代码的时候,会看见有臭有长的代码,而我们传统的做法是新建一个函数,把代码复制过去,这个过程可以用使用下面快捷键完成 Mac: Cmd + Alt + M Wi

科目三直线行驶怎么才能不跑偏?看完你就明白

一.视线看远点 二.直线行驶时只能微修方向盘,最好不超过5度 三.换档时,左右拿捏方向盘摇晃,稳不住,导致跑偏 直线行驶步骤分解 1. 直线行驶前,应把方向调正,调到车道线的中间:挡位进入3挡,车速在30~35千米/时之间. 然而事实证明速度越慢方向越容易跑偏,而且时间过长. 不妨用40码跑直线行驶,大概只要5秒钟就会听到电脑提示结束直线行驶. 2. 在直线行驶过程中: ① 方向盘不能再转动,如果方向盘转动扣100分,理由是行驶时方向控制不稳. ② 当时行驶速度不低于30千米/时,如没有达到应迅