JavaScript中对DOM节点的访问、创建、修改、删除_基础知识-js教程-PHP中文网
首页
web前端
js教程
JavaScript中对DOM节点的访问、创建、修改、删除_基础知识
JavaScript中对DOM节点的访问、创建、修改、删除_基础知识
May 16, 2016 pm 03:32 PM
dom
javascript
js
DOM
DOM就是Document object Model的缩写。文档对象模型是把XML或HTML以树节点为表现形式的文档。用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素。DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript
看看下面的一个文本。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My page</title>
</head>
<body>
<p class="opener">first paragraph</p>
<p><em>second</em> paragraph</p>
<p id="closer">final</p>
</body>
</html>
登录后复制
我们来看看第二段
<p><em>second</em> paragraph</p>
登录后复制
可以看到这是个p标签。它被包含在body标签中。所以说body是p的父节点,p是子节点。第一段和第三段也是body的子节点。它们都是第二段的兄弟节点。这个em标签是第二段p的子节点。因此p就是它的父节点。父子节点关系能描绘出像树一样的关系。所以叫做DOM结构树(DOM tree).
Core DOM 和 HTML DOM
我们已经知道DOM可以描绘出HTML和XML文档。事实上HTML文档就是XML文档,只不过更为规范些。因此作为DOM Level 1的一部分,Core DOM规范适用于所有XML文档以及HTML DOM规范扩展了Core DOM.当然HTML DOM不能适用于所有的XML文档,仅仅适用于HTML文档。让我们来看看Core DOM和HTML DOM的构造器。
构造器关系
访问DOM节点
当要验证表单或者更换图片之前,我们要知道怎么样访问元素(element.)。有很多方法获取元素。
Document节点
通过document我们可以访问当前的文档。我们可以通过firebugs(火狐插件),来查看document的属性和方法。
所有的节点都有nodeType,nodeName,nodeValue的属性。我们来看看document的nodeType是什么
document.nodeType;//9
登录后复制
一共有12节点类型。document是9。常用的是元素(element:1),属性(attribute:2),文本(text:3)。
节点还有名称。对于HTML标签。节点名称就是标签名称。文本节点(text)的名字是#text.文档节点(document)的名字是#document.
节点也有值。对于文本节点,值就是文本。document的值为null
documentElement
XML都会有个ROOT节点来包文档包含起来。对于HTML文档。ROOT节点就是html标签。访问root节点。可以用documentElement的属性。
document.documentElement;//<html>
document.documentElement.nodeType;//1
document.documentElement.nodeName;//HTML
document.documentElement.tagName;//对于element,nodeName和tagName相同 登录后复制
Child Nodes
为了确定是否包含子节点我们可以用如下方法
document.documentElement.hasChildNodes();//true
登录后复制
HTML有两个子节点。
document.documentElement.childNodes.length;//2
document.documentElement.childNodes[0];//<head>
document.documentElement.childNodes[1];//<body>
登录后复制
也可以通过子节点访问父节点
document.documentElement.childNodes[1].parentNode;//<html>
登录后复制
我们把body的引用赋值变量
var bd = document.documentElement.childNodes[1];
bd.childNodes.length;//9
登录后复制
让我们看看body的结构
<body>
<p class="opener">first paragraph</p>
<p><em>second</em> paragraph</p>
<p id="closer">final</p>
<!-- and that's about it -->
</body> 登录后复制
为什么子节点个数为9个呢。
首先是4个P还有一个注释一共4个。
4个节点包含了3个空白的节点。这就7个。
第8个在body和第一个p之间的空白节点。
第9个就是在注释与
之间的空白节点。
一共9个节点。
属性
因为第一节点是空白节点,所以第二个节点才是第一个p标签。
bd.childNodes[1];// <p class="opener">
登录后复制
可以查看它是否有属性
bd.childNodes[1].hasAttributes();//true
登录后复制
也可以查看attributes的个数
bd.childNodes[1].attributes.length;//1
//可以用index和名字来访问属性,也可以用getAttribute方法。
bd.childNodes[1].attributes[0].nodeName;//class
bd.childNodes[1].attributes[0].nodeValue;//opener
bd.childNodes[1].attributes['class'].nodeValue;//opener
bd.childNodes[1].getAttribute('class');//opener
登录后复制
访问标签里的内容
让我们看看第一个标签p
你可以用textContent属性来访问。要注意的是,在IE浏览器中并不存在textContent,请用innerText来替换,结果都是一样的。
bg.childNodes[1].textContent;// "first paragraph"
登录后复制
还有一个属性是innerHTML.这并不是DOM的规范。但是主流浏览器都支持这个属性。它返回的是HTML代码。
bg.childNodes[1].innerHTML;// "first paragraph"
登录后复制
第一段没有html代码,所以结果和textContent(IE里是innerText)是一样的。来看下第二段包含HTML代码的标签
bd.childNodes[3].innerHTML;//"<em>second</em> paragraph"
bd.childNodes[3].textContent;//second paragraph
登录后复制
另一种方法可以获取文本节点,然后再取nodeValue属性,代码如下
bd.childNodes[1].childNodes.length;//1 子节点个数
bd.childNodes[1].childNodes[0].nodeName;// 节点名称 #text
bd.childNodes[1].childNodes[0].nodeValue;//节点值 first paragraph
登录后复制
快速访问DOM
通过childNodes,parentNode,nodeName,nodeValue以及attributes,可以访问文档任意的节点了。但是在实际运用过程中,文本节点是比较讨厌的。如果文本改变了,有可能就影响脚本了。还有如果DOM树足够的深入,那么访问起来的确有些不方便。幸好我们可以用更为方便的方法来访问节点。这些方法是
getElementsByTagName()
getElementsByName()
getElementById()
登录后复制
首先说下getElementsByTagName()
通过一个标签名称(tag name)来获取一个html元素的集合。例子如下
document.getElementsByTagName('p').length;//3
登录后复制
因为返回的是个集合,我们可以用过数组下标的形式来访问或者通过item方法。比较一下还是推荐用数组的访问方法。更简单一些。
document.getElementsByTagName('p')[0];// <p class="opener">
document.getElementsByTagName('p').item(0);//和上面的结果一样
document.getElementsByTagName('p')[0].innerHTML;//first paragraph
登录后复制
访问元素的属性,可以用attributes集合。但是更简单的方法是直接作为一个属性来访问就行。看个例子
document.getElementsByTagName('p')[2].id;//closer
登录后复制
要注意的是,class属性不能正常的使用。。要用className。因为class在javascript规范中是保留字。
document.getElementsByTagName('p')[0].className;//opener
登录后复制
我们可以用如下方法访问页面所有元素
<span style="color: #ff0000;">document.getElementsByTagName('*').length;//9</span>
登录后复制
注意:在IE早期的版本不支持上述方法。可以用document.all来取代。IE7已经支持了,但是返回的是所有节点(node),而不仅仅是元素节点(element nodes)。
Siblings, Body, First, Last Child
nextSibling和previousSibling是两个比较方便访问DOM的方法。用来访问相邻的节点的。例子如下
var para = document.getElementById('closer')
para.nextSibling;//"\n"
para.previousSibling;//"\n"
para.previousSibling.previousSibling;//<p>
para.previousSibling.previousSibling.previousSibling;//"\n"
para.previousSibling.previousSibling.nextSibling.nextSibling;// <p id="closer">
登录后复制
body 用来访问body元素的。
document.body;//<body>
登录后复制
firstChild 和lastChild 。firstChild是和childNodes[0]一样.lastChild和 childNodes[childNodes.length - 1]一样。
遍历DOM
通过以上的学习,我们可以写个函数,用来遍历DOM
function walkDOM(n) {
do {
alert(n);
if (n.hasChildNodes()) {
walkDOM(n.firstChild)
}
} while (n = n.nextSibling)
}
walkDOM(document.body);//测试
登录后复制
修改节点
下面来看看DOM节点的修改。
先获取要改变的节点。
var my = document.getElementById('closer');
登录后复制
非常容易更改这个元素的属性。我们可以更改innerHTML.
my.innerHTML = 'final';//final
登录后复制
因为innerHTML可以写入html,所以我们来修改html。
my.innerHTML = '<em>my</em> final';//<em>my</em> fnal
登录后复制
em标签已经成为dom树的一部分了。我们可以测试一下
my.firstChild;//<em>
my.firstChild.firstChild;//my
登录后复制
我们也可以通过nodeValue来改变值。
my.firstChild.firstChild.nodeValue = 'your';//your
登录后复制
修改样式
大部分修改节点可能都是修改样式。元素节点有style属性用来修改样式。style的属性和css属性是一一对应的。如下代码
my.style.border = "1px solid red";
登录后复制
CSS属性很多都有破折号("-"),如padding-top,这在javascript中是不合法的。这样的话一定要省略波折号并把第二个词的开头字母大写,规范如下。 margin-left变为marginLeft。依此类推
my.style.fontWeight = 'bold';
登录后复制
我们还可以修改其他的属性,无论这些属性是否被初始化。
my.align = "right";
my.name = 'myname';
my.id = 'further';
my;//<p id="further" align="right" style="border: 1px solid red; font-weight: bold;">
登录后复制
创建节点
为了创建一个新的节点,可以使用createElement和createTextNode.如果新建完成,可以用appendChild()把节点添加到DOM树中。
创建一个元素P,并把设置innerHTML属性
var myp = document.createElement('p');
myp.innerHTML = 'yet another';
登录后复制
元素P建完成了,就可以随意修改添加属性了
myp.style.border = '2px dotted blue'
登录后复制
接下来可以用appendChild把新的节点添加到DOM树中的。
document.body.appendChild(myp)
登录后复制
使用DOM的方法
用innerHTML方法的确很简单,我们可以用纯的dom方法来实现上面的功能。
新建一个文本节点(yet another)
新建一个段落
把文本节点添加到段落中。
把段落添加到body中
// 创建p
var myp = document.createElement('p');
// 创建一个文本节点
var myt = document.createTextNode('one more paragraph')
myp.appendChild(myt);
// 创建一个STRONG元素
var str = document.createElement('strong');
str.appendChild(document.createTextNode('bold'));
// 把STRONG元素添加到P中
myp.appendChild(str);
// 把P元素添加到BODY中
document.body.appendChild(myp);
//结果<p>one more paragraph<strong>bold</strong></p>
cloneNode()
登录后复制
另一种新建节点的方法是,我们可以用cloneNode来复制一个节点。cloneNode()可以传入一个boolean参数。如果为true就是深度复制,包括他的子节点,false,仅仅复制自己。
首先获取要复制的元素。
var el = document.getElementsByTagName('p')[1];//<p><em>second</em> paragraph</p>
登录后复制
先不用深度复制。
document.body.appendChild(el.cloneNode(false))
登录后复制
我们发现页面并没有变化,因为仅仅复制的是元素p。和下面的效果一样。
document.body.appendChild(document.createElement('p'));
登录后复制
如果用深度复制,包括p下面所有的子节点都会被复制。当然包括文本节点和EM元素。
document.body.appendChild(el.cloneNode(true))
登录后复制
insertBefore()
用appendChild,就是把元素添加到最后。而insertBefore方法可以更精确控制插入元素的位置。
elementNode.insertBefore(new_node,existing_node)
登录后复制
实例
document.body.insertBefore(
document.createTextNode('boo!'),
document.body.firstChild
); 登录后复制
意思就是新建一个文本节点,把它作为body元素的第一个节点。
删除节点
要从DOM树删除一个节点,我们可以使用removeChild().我们来看看要操作的HTML
<body>
<p class="opener">first paragraph</p>
<p><em>second</em> paragraph</p>
<p id="closer">final</p>
<!-- and that's about it -->
</body>
登录后复制
来看看下面代码,删除第二段
var myp = document.getElementsByTagName('p')[1];
var removed = document.body.removeChild(myp);
登录后复制
removed节点就是删除的节点。以后还可以用这删除的节点。
我们也可以用replaceChild()方法。这个方法是删除一个节点,并用另一个节点替代。当执行上个删除节点操作之后,结果如下
<body>
<p class="opener">first paragraph</p>
<p id="closer">final</p>
<!-- and that's about it -->
</body>
登录后复制
我们来看看replaceChild的使用。我们把上一个删除节点来替代第二个p
var replaced = document.body.replaceChild(removed, p);
登录后复制
和removeChild返回一样。replaced就是移除的节点。现在结果为
<body>
<p class="opener">first paragraph</p>
<p><em>second</em> paragraph</p>
<!-- and that's about it -->
</body>
登录后复制
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
如何使用WebSocket和JavaScript实现在线语音识别系统
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系
股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤,需要具体代码示例随着互联网和科技的快速发展,股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环,其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息,帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
推荐:优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计
WebSocket与JavaScript:实现实时监控系统的关键技术
Dec 17, 2023 pm 05:30 PM
WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技
PHP与JS开发技巧:掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
如何利用JavaScript和WebSocket实现实时在线点餐系统
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单
简易JavaScript教程:获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest
JavaScript和WebSocket:打造高效的实时天气预报系统
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We
See all articles