JavaScript——文档对象模型（DOM）DOM节点

45 阅读 0 评论 30 点赞

我是靠谱客的博主美满月饼，最近开发中收集的这篇文章主要介绍JavaScript——文档对象模型（DOM）DOM节点，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文档对象模型(DOM)是针对 HTML和XML文档的一个API(应用程序编程接口)。一般来讲，所有支持JavaScript 的浏览器都支持 DOM。它以树形结构表示 HTML 和 XML 文档,定义了遍历树、检查和修改树的节点的方法和属性。
W3C 组织把 DOM 分成下面的不同的部分和三个不同的版本(DOM 1/2/3)。

(1)Core DOM:定义了任意结构文档的标准对象集合。

(2)XML DOM：定义了针对XML文档的标准对象集合。

(3)HTML DOM：定义了针对HTML文档的标准对象集合。

(4)DOM CSS：定义了在程序中操作CSS规则的接口。

(5)DOM Events：给DOM添加事件处理。
在本书中重点介绍 HTML DOM。HTML DOM定义了访问和操作HTML文档的标准方法，HTML DOM 将 HTML 文档表示为带有元素、属性和文本的树结构(节点树）。在树形结构中，所有的元素及它们包含的文本都可以被DOM树所访问到。不仅可以修改和删除它们的内容，还可以通过DOM 来建立新的元素。HTML DOM独立于语言平台，它可以被任何的程序语言所使用(如 Java、JavaScript、VBScript)。本单元使用JavaScript来存取页面及其元素。

DOM节点

在DOM中Html文档是一个文档节点, 在Js中可以使用document对象来访问.

Html文档是以树状结构组织的, 每个标签都是一个节点, 树的根节点为<html>标签.

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<title>Hello</title>

</head>

<body>

<p>Hello World!</p>

</body>

</html>

注意<p>Hello World!</p>其中的文本Hello World!在DOM中被认为是一个文本子节点.

访问节点

DOM标准中提供了3种访问节点的方式:

getElementById
getElementsByTagName
getElementsByClassName

Id可以精确定位元素, TagName和ClassName只能定位一组元素.

DOM中的节点分为Node包括Element, Comment, Documnet等类型, 但是我们主要关心Element.

<!DOCTYPE html>
<html>

<body>

<p id="p1">Hello World!</p>

<script type="text/javascript">

document.getElementById('p1').innerHTML = 'Hello World By Dom!'
// <p id="p1">Hello World By Dom!</p>

</script>

</body>

</html>

innerHTML属性是节点开始标签和结尾标签之间的HTML代码, 修改该属性可以修改节点的子树功能强大.

使用innerHTML属性直接编写HTML源码,需要注意防范XSS攻击.

节点的innerText属性会对字符串进行HTML编码, 保证无法设置HTML标签更为安全.

插入节点

appendChild方法可以将节点插入到节点子树的最后一个:

<!DOCTYPE html>
<html>

<body>

<div id="d">
<p> Python </p>

</div>

<script type="text/javascript">

var div = document.getElementById('d');
var js = document.createElement('p')
js.innerText = 'JavaScript'
div.appendChild(js)

</script>

</body>

</html>

若该节点不存在则直接插入, 若存在则进行替换.

insertBefore方法可以在指定节点前插入节点:

<!DOCTYPE html>
<html>

<body>

<div id="d">
<p id="py"> Python </p>

</div>

<script type="text/javascript">

var div = document.getElementById('d')
var py = document.getElementById('py');
var js = document.createElement('p')
js.innerText = 'JavaScript'
js.id = 'js'
div.insertBefore(js, py)

</script>

</body>

</html>

删除节点

removeChild可以用于删除节点:

<!DOCTYPE html>
<html>

<body>

<div id="d">
<p id="py"> Python </p>
<p id="js"> javaScript </p>
</div>

<script type="text/javascript">

var div = document.getElementById('d')
var js = document.getElementById('js');
div.removeChild(js)

</script>

</body>

</html>