DOM常用功能及常用函数介绍

最新推荐文章于 2024-08-21 10:06:33 发布
最新推荐文章于 2024-08-21 10:06:33 发布
阅读量1.6k 收藏
点赞数
分类专栏： JavaScript 文章标签： 文档 javascript html null 浏览器 firefox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gang_gang_gang/article/details/3408127
版权

先来看一张简单的文档树

树的顶层节点是NodeA节点,下面的伪代码反应了树中节点的相互关系: 

NodeA.firstChild = NodeA1 
NodeA.lastChild = NodeA3 
NodeA.childNodes.length = 3 
NodeA.childNodes[0] = NodeA1 
NodeA.childNodes[1] = NodeA2 
NodeA.childNodes[2] = NodeA3 
NodeA1.parentNode = NodeA 
NodeA1.nextSibling = NodeA2 
NodeA3.prevSibling = NodeA2 
NodeA3.nextSibling = null 
NodeA.lastChild.firstChild = NodeA3a 
NodeA3b.parentNode.parentNode = NodeA

DOM提供了一些方法，用来操作一个文档树的节点结构,可以执行"插入节点","更新节点","删除节点","克隆节点"等常用操作

函数名称功能描述
insertBefore()在参考子节点之前插入一个新的子节点.如果参考的子节点为null,则新的子节点将作为调用节点的最后一个子节点插入
replaceChild()在childNodes集合中使用指定的newChild来代替oldChild;如果代替成功,则返回oldChild;如果newChild是null,那么就删除oldChild
removeChild()从节点的ChildNodes集合中删除指定的节点,如果删除成功,则返回删除的子节点
appendChild()添加一个新节点到childNodes集合的末尾,如果成功,则返回新节点
cloneNode()创建一个新的、复制的节点,并且如果传入的参数是true时,还将复制子节点,如果节点是一个元素,那么还将复制相应属性,返回新的节点

树中的节点可以分为"元素型节点（element node）"和"文字型节点（text node）"　

"元素型节点（element node）"对应于文档中的某个“标签”，它可以拥有“属性”，它的内部可以包容“子节点”。

"文字型节点（text node）"对应于文档中的纯文字内容，它在文档中没有任何对应的“标签”,不可以包容“子节点”。

"元素型节点（element node）"和"文字型节点（text node）"的“访问方法”，“创建方法”是不同的。但是“删除方法”是一样的。

元素型节点（element node）

访问element node

可以用下面这些方法:

  • 利用节点间的相互关系，从一个节点跳转到另一个节点，直到跳到我们想要的目标节点，主要用到了firstChild，parentNode等
  • getElementById()
  • getElementsByTagName()

下面详细说明这些方法:

使用节点间的相互关系来定位到某个元素节点

例子1: 

<html>
 <head>
  <title></title>
 </head>
 
 <body><p>这是一段文字.</p>
  <script language="JavaScript">
   alert(document.documentElement.lastChild.firstChild.tagName);
  </script>
 </body>
</html>

结果将会显示"p",下面是一些解释

document.documentElement
得到 html tag.
lastChild
得到 body tag
firstChild
得到 body 中的第一个节点,也就是 p tag
tagName
得到 节点的标签名, "p"

例子2: 

<html>
 <head>
  <title></title>
 </head>
 
 <body>
  <p>这是一段文字.</p>
  <script language="JavaScript">
   alert(document.documentElement.lastChild.firstChild.tagName);
  </script>
 </body>
</html>

这个例子和上面相比,仅仅是在“body标签”后面多加了一个空行,但是在firefox中,会把空行看作是一个节点，所以返回值是"undefined",而在IE中将跳过空行仍然指向P标签

使用 document.getElementById() 访问元素节点

首先给需要访问的节点设置id值 

<p id="段落">这是一段文字.</p>

然后把节点的id值传给document.getElementById()函数,从而得到相应的节点 

alert(document.getElementById("段落").tagName);

这种方法你不用关心节点在文档树的哪一个地方,而只要保证在页面中它的id值是唯一的就可以了

使用 document.getElementsByTagName(标签名)[n] 来访问元素节点

document.getElementsByTagName(标签名)的返回值是一个数组,例如你可以通过下面的例子改变整个页面的连接 

var nodeList = document.getElementsByTagName("a");
for (var i = 0; i < nodeList.length; i++)
  nodeList[i].style.color = "#ff0000";

创建element node

创建前的代码 

<p id="段落">这是一段文字.</p>

var span_text = document.createElement("span");
span_text.appendChild(document.createTextNode("这是新添加的文字."));
document.getElementById("段落").appendChild(span_text);

文字型节点（text node）

访问text node

text node不像element node那样具有id属性,所以它不能通过document.getElementById()来访问.

text node在文档中没有对应任何的“标签”,所以它不能通过document.getElementsByTagName()来访问

因此,只能利用节点间的相互关系来定位到某个text node

例子1: 

<p id="段落">这里是段落的初始文字</p>

文档结构:p标签中的文字串这里是段落的初始文字构成了text node,它是p元素唯一的孩子,可以通过firstChild来访问.

下图反应了文档结构

访问text node的js: 

alert(document.getElementById("段落").firstChild.nodeValue);

注释:利用nodeValue属性可以得到text node对应的"文字内容",但是这个属性不能用于element node,例如alert(document.getElementById("段落").nodeValue);是错误的.

例子2:(文档结构更复杂一点) 

<p id="段落">这里是段落的<b>初始</b>文字</p>

文档结构:p元素有3个孩子,

  1. 这里是段落的构成了一个text node
  2. <b>初始</b>构成了element node
  3. 文字构成了一个text node

下图反应了文档结构

在这里通过document.getElementById('段落').firstChild.nodeValue将仅仅得到这里是段落的，不包括<b>初始</b>文字.

也可以这样用 

document.getElementById('段落').firstChild.nodeValue ="<b>新的</b>文字";
其中的html代码将不会被解释,浏览器将把他们当成普通的文本来显示

创建text node:

var new_TextNode = document.createTextNode("新添加的文字");

上面的代码创建了一个新的text node,但是它还不是文档树的一部分,要让它显示在页面上就必须让它成为文档树中某一个节点的child,因为text node不能有儿子,所以你不能将它加入到一个text node中,只能把它加入到element node中

<p id="段落">这里是段落的初始文字</p>

下面的代码建立了一个新的text node并且通过appendChild()方法将其加入到childNodes数组的末尾 

var new_TextNode = document.createTextNode("新添加的文字");
var el = document.getElementById("段落");
el.appendChild(new_TextNode);

删除text node:

var el = document.getElementById("段落");
if(el.hasChildNodes())
 el.removeChild(el.lastChild);
首先判断父节点是否还有child,以阻止当其没有child的时候调用removeChild()产生错误

attribute

attribute对象和元素相关,但不是文档树的子节点.

访问attribute

你可以在html标签中定义自己的属性: 

<p id="段落" myAttribute="myValue">这里是段落的文字</p>

然后使用getAttribute()得到这个属性的取值 

alert(document.getElementById("段落").getAttribute("myAttribute"));

返回值将是"myValue".但是请注意这里必须使用getAttribute()函数,而不是AttributeName,因为有一些浏览器并不支持自定义属性

创建attribute

有三种方法可以为元素建立新的属性

  • var attr = document.createAttribute("myAttribute");
attr.value = "myValue";
var el = document.getElementById("段落");
el.setAttributeNode(attr);
  • var el = document.getElementById("段落");
el.setAttribute("myAttribute", "myValue");
  • var el = document.getElementById("段落");
el.myAttribute = "myValue";

删除attribute

attribute也可以从一个元素中删除,你可以使用removeAttribute()或者将element.attributeName指向一个null值.

改变attribute的值

例子1: 

<p id="段落" align="left">这里是段落的文字</p>

使用setAttribute(属性名称,属性值)来改变某个属性的值 

document.getElementById('段落').setAttribute('align', 'right');

例子2: 

<p id="段落" style="text-align:left;">这里是段落的文字</p>

修改元素的style中的text-align子属性. 

document.getElementById('段落').style.textAlign = 'right';

注释:dom中的textAlign对应于style的text-align子属性。有一条基本规律:如果style的子属性名字中出现"-"符号，则在dom中会被去掉并且随后的一个字母改为大写,例如:dom中的backgroundColor对应于background-color

gang_gang_gang
关注
专栏目录
DOM常用事件
zxn200125的博客
11-24 1085
什么是事件，DOM的常用事件有哪些
DOM的基本方法
weixin_30929295的博客
03-12 126
一.直接引用结点1.document.getElementById(id);--在文档里面通过id来找结点2.document.getElementByTagName(tagName);--返回一个数组，包含对这些结点的引用--如：document.getElementByTagName("span");将返回所有类型为span的结点二.间接引用结点3...
javascript 学习笔记
andy0208
02-28 151
javascript 学习笔记 《JavaScript And DHTML Cookbook》 ·字符串(String) 1.声明 var myString = new String("Every good boy does fine."); var myString = "Every good boy does fine."; 2.字符串连接 va...
dom-align 开源项目教程
最新发布
gitblog_00855的博客
08-21 670
dom-align 开源项目教程 dom-alignAlign DOM Node Flexibly项目地址:https://gitcode.com/gh_mirrors/do/dom-align 项目介绍 dom-align 是一个用于在页面上对齐 DOM 元素的开源 JavaScript 库。它可以帮助开发者轻松地将一个元素相对于另一个元素进行定位，支持多种对齐方式和偏移调整。这个库特别适用于...
DHTML中重要的属性方法 （献给DHTML初学者）
理性的浪漫的程序人生
04-22 2930
由于DOM(文档对象模型)概念的推出,这个API使HTML如虎添翼,但是有些学DHTML的朋友还是有些困挠,只是因为目前的手册的书写不太科学,是按字母来分的,不便查阅.其实DOM中最关键是要掌握节点与节点之间的关系(between node andnode),想学习DHTML中的DOM千万不要从头到尾地看遍所有的属性和方法,你有三国时张松的"过目不忘"的本领吗?没有吧,那就听我分析一下：
Dom常用函数
weixin_34331102的博客
09-14 207
2019独角兽企业重金招聘Python工程师标准>>> ...
DOM几个重要的函数
weixin_30329623的博客
08-06 182
最近在读js编程艺术，发现几个不错的函数，总结如下： 1、页面初始化加载函数onload 操作DOM的函数应该在页面元素初始化结束之后再立即执行，否则页面元素还没有初始化完成，DOM操作就会搁浅了；网页加载完毕时会触发一个onload事件，应该写在onload函数里面执行，现封装一个将多个操作绑定的onload事件上的函数addLoadEvent: function addL...
jQuery常用操作方法及常用函数总结
12-01
jQuery 是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。...通过熟练掌握这些常用方法和函数，开发者可以构建出功能丰富、响应迅速的网页应用。
一些常用的JS功能函数代码
10-29
以下是标题“一些常用的JS功能函数代码”和描述“将ClientMentInfo类改成了兼容IE6,IE7,IE8,Vista,Windows7和Firefox”所涉及的知识点： 1. 兼容性函数编写： - 在JavaScript中，为了兼容不同浏览器，我们可能需要...
常用的JQuery函数及功能小结
10-22
【jQuery函数及功能小结】 jQuery 是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。以下是一些常用jQuery函数及其功能的详细解释： 1. **文档加载完成执行函数**： `$...
JavaScript中的DOM类函数
weixin_51898654的博客
03-03 405
获取元素四种方式。
Javascript的DOM常用功能
qq_44127968的博客
07-15 168
Javascript的DOM常用功能 一、DOM的简单介绍 DOM（Document Object Model）文档对象模型。主要是针对html标签操作的，以下的四个功能相当于选择器功能。需要注意的是除了第一个，后面的三个方法返回的都是一个数组对象。 功能 描述 getElementById() 返回对拥有指定 id 的第一个对象的引用。 getElementsByName()...
Javascript 操作 DOM常用函数
sakyoneone的专栏
03-25 136
*** createElement() 创建 元素节点 *** createTextNode() 创建 文本节点 *** appendChild() 给DOM树添加 节点 *** inserBefore(newElement ,targetElement) 选择在插入Target点前 两元素要出于同一父节点范围，一般采用 [colo...
DOM函数
guofei66666的博客
03-13 463
js函数集 ·字符串(String)  1.声明  var myString = new String("Every good boy does fine.");  var myString = "Every good boy does fine."; 2.字符串连接  var myString = "Every " + "good boy " + "does fine.";  va
JS函数及DOM
zlf520520的博客
08-25 480
函数是对象 在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。 但是JavaScript 函数描述为一个对象更加准确。 JavaScript 函数有 属性 和 方法。 arguments.length 属性返回函数调用过程接收到的参数个数： 实例 function myFunction(a, b) {    
DOM文档对象模型
Start_t的博客
03-10 540
DOM文档对象模型DOM：文档对象模型DOM选择器2.location对象：包含当前url的相关信息，而history对象不能具体反映url的相关信息3.navigator对象4.window.onscroll／onresize ／onload()事件 DOM：文档对象模型 作用: 使javascript有能力操作HTML文档（获取HTML标记元素，添加HTML标记元素，删除HTML标记元素等） ...
8 个你不知道的 DOM 功能
weixin_34122604的博客
06-17 140
翻译：疯狂的技术宅 原文：blog.logrocket.com/8-dom-featu… 未经许可严禁转载！ 最近关注了太多的工具，现在最好从所有 React 和 npm-install-everything 的文章中休息一下，来看看一些纯粹的 DOM 和 Web API 功能，它们可以在不依赖任何第三方库的前提下在现代浏览器中运行。 这篇文章将讲解八个鲜为人知的 DOM 功能，这些功能具有...
dom封装函数
weixin_42025752的博客
09-11 346
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 dom封装函数前言一、DOM是什么？二、使用步骤1.要点2.封装函数2.使用方法总结 前言 文件对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。DocumentObjectModel的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属
JavaScript常用对象大全：数学函数与DOM操作
本文档是一份关于JavaScript常用对象的详细参考指南，涵盖了编程中常见的数学对象(Math)、DOM对象(document)以及一些与浏览器交互相关的对象，如window, screen, location, history, Date, 和 Event。让我们逐一深入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值