JavaScript总结之三

最新推荐文章于 2024-10-14 09:20:17 发布

yemyself

最新推荐文章于 2024-10-14 09:20:17 发布

阅读量269

点赞数

本文链接：https://blog.csdn.net/yemyself/article/details/49445977

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第三部分 HTML DOM(DOM) 参考手册

！！！注意：省略号(。。。。。。)为不重要的或太过简单

HTML DOM 参考手册包括两部分：

1、Browser对象参考手册---参考javascript手册Browser对象

2、HTM DOM对象参考手册—参考javascript手册HTML DOM 对象和HTML对象

一、HTML DOM

1.1、DOM 教程

HTML DOM 定义了访问和操作HTML 文档的标准方法

DOM将HTML文档表达为数结构

1、HTML DOM 数

2、HTML DOM 实例---参考HTML DOM 参考手册/DOM实例

学习 100 个实例！通过我们的在线编辑器，您能够编辑 HTML 代码，然后点击“亲自试一试”按钮来查看结果。

3、HTML DOM 参考手册---参考HTML DOM 参考手册/DOM参考手册

在 W3School，我们提供包含大量实例的完整 HTML DOM 参考手册。

1.2、DOM 简介

HTML DOM 定义了访问和操作 HTML 文档的标准。

1、什么是 DOM？

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

编者注：DOM 是 Document Object Model（文档对象模型）的缩写。

2、什么是 XML DOM？

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。

如果您需要学习 XML DOM，请访问我们的 XML DOM 教程。

3、什么是 HTML DOM？

HTML DOM 是:

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

1.3、DOM 节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

1、DOM 节点

根据 W3C 的 HTMLDOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

2、HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

3、HTML DOM Tree 实例

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

4、节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

请看下面的 HTML 片段：

<html>

<head>

</head>

<body>

<p>Helloworld!</p>

</body>

</html>

从上面的 HTML 中：

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

警告！

DOM 处理中的常见错误是希望元素节点包含文本。

在本例中：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。

可通过节点的 innerHTML 属性来访问文本节点的值。

您将在稍后的章节中学习更多有关 innerHTML 属性的知识。

1.4、DOM 方法

方法是我们可以在节点（HTML 元素）上执行的动作。

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

HTML DOM 对象-常用方法和属性

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）返回的是元素
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

您将在本教程的下一章中学到更多有关属性的知识。

一些 DOM 对象方法

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

1.5、DOM 属性

属性是节点（HTML 元素）的值，您能够获取或设置。

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

总结：主要的属性(不是方法)有innerHTML/nodeName/nodeValue/nodeType

InnerHTML是属性，不是方法；nodeValue比较有用

1.6、DOM 访问

访问 HTML DOM - 查找 HTML 元素。

访问 HTML 元素（节点）

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素：

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

语法：

node.getElementById("id");

node.getElementsByTagName("tagname");

注释：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

总结：主要的方法有

getElementById/getElementsByTagName/ getElementsByClassName

1.7、DOM 修改

修改 HTML = 改变元素、属性、样式和事件。

修改 HTML DOM 意味着许多不同的方面：

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

在接下来的章节，我们会深入学习修改 HTML DOM 的常用方法。

1.7.1、创建HTML内容

改变元素内容的最简答的方法是使用 innerHTML 属性。

下面的例子改变一个 <p> 元素的 HTML 内容：

Eg：

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

document.getElementById("p1").innerHTML = "New text!";

</script>

1.7.2、改变HTML样式

通过 HTML DOM，您能够访问 HTML 元素的样式对象。

下面的例子改变一个段落的 HTML 样式：

Eg：

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color = "blue";

</script>

1.7.3、创建新的HTML元素

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

Eg：

</div>

var text=document.createTextNode("新的段落33");

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

var attr = document.createAttribute("id");

ele.setAttribute("id", "p3");//设置属性

var newNode = ele.appendChild(text);

document.getElementById("mydiv").appendChild(ele);

</script>

1.8、DOM 内容

通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素。

1.8.1、改变HTML内容

---和上面DOM 修改一个方法是一样的

改变元素内容的最简答的方法是使用 innerHTML 属性。

下面的例子更改 <p> 元素的 HTML 内容：

Eg：

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

document.getElementById("p1").innerHTML = "New text!";

</script>

1.8.2、改变HTML 样式

---和上面DOM 修改一个方法是一样的

通过 HTML DOM，您能够访问 HTML 对象的样式对象。

下面的例子更改段落的 HTML 样式：

Eg：

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color = "blue";

</script>

1.8.3、使用事件

HTML DOM 允许您在事件发生时执行代码。

当 HTML 元素”有事情发生“时，浏览器就会生成事件：

在元素上点击
加载页面
改变输入字段

你可以在下一章学习更多有关事件的内容。

下面两个例子在按钮被点击时改变 <body> 元素的背景色：

Eg1：

<input type="button"

onclick="document.body.style.backgroundColor='lavender';"

value="改变背景色" />

eg2：

function ChangeBackground() {

document.body.style.backgroundColor = "lavender";

}

</script>

下面的例子在按钮被点击时改变 <p> 元素的文本：

Eg：

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

function ChangeText() {

document.getElementById("p1").innerHTML = "New text!";

}

</script>

1.9、DOM 元素

添加、删除和替换 HTML 元素。

1.9.1、创建新的HTML元素-appendChild()

如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

Eg：---和DOM 修改3一样的例子

</div>

var text=document.createTextNode("新的段落33");

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

var attr = document.createAttribute("id");

ele.setAttribute("id", "p3");//设置属性

var newNode = ele.appendChild(text);

document.getElementById("mydiv").appendChild(ele);

</script>

1.9.2、创建新的HTML元素-insertBefore()

上一个例子中的 appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。

如果不希望如此，您可以使用 insertBefore() 方法：

Eg：

</div>

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

var node = document.createTextNode("新段落333");

para.appendChild(node);

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

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

element.insertBefore(para, child);//在指定的已有的子节点之前插入新节点。

</script>

注意以上是用父节点对象调用的insertBefore方法

1.9.3、删除已有的HTML元素—用父元素删除

如需删除 HTML 元素，您必须清楚该元素的父元素：

Eg：

</div>

var div1 = document.getElementById("div1");//父元素

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

div1.removeChild(p1);//必须要用父元素删除

// p1.parentNode.removeChild(p1);

</script>

提示：能否在不引用父元素的情况下删除某个元素？

很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

varchild=document.getElementById("p1");

child.parentNode.removeChild(child);

例子中可以这样

eg2：

p1.parentNode.removeChild(p1);

也可以调用parentNode在删除自己

1.9.4、替换HTML元素---使用父元素调用---

如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：

Eg：

</div>

var text = document.createTextNode("新段落333");

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

ele.appendChild(text);

//把"段落2"替换成新段落

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

var p2 = document.getElementById("p2");

par.replaceChild(ele, p2);

</script>

1.10、DOM 事件。。。。。。

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。。

太简单了，省略。。。。

注意：HTML DOM 允许使用javascript向HTML元素分配事件

实例：为button元素分配onclick事件

document.getElementById("div1").onclick = function() { dianji(); }

function dianji() {

alert("点击了");

}

1.11、DOM 导航

通过 HTML DOM，您能够使用节点关系在节点树中导航。

1.11．1、HTMLDOM 节点列表

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

下面的代码选取文档中的所有 <p> 节点：

实例

var x = document.getElementsByTagName("p");

可以通过下标号访问这些节点。如需访问第二个 <p>，您可以这么写：

y=x[1];

注释：下标号从 0 开始。

1.11．2、HTMLDOM 节点列表长度

length 属性定义节点列表中节点的数量。

您可以使用 length 属性来循环节点列表：

x = document.getElementsByTagName("p");

for (i = 0; i < x.length; i++) {

document.write(x[i].innerHTML);//输出文本值

document.write("<br/>");

}

1.11．3、导航节点关系

您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。

<body>

<p>Hello World!</p>

<div>

<p>本例演示节点关系。</p>

</div>

</body>

首个 <p> 元素是 <body> 元素的首个子元素（firstChild）
<div> 元素是 <body> 元素的最后一个子元素（lastChild）
<body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）

firstChild 属性可用于访问元素的文本：

eg:

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

x =document.getElementById("intro");

document.write(x.firstChild.nodeValue);

</script>

1.11．4、DOM 根节点

这里有两个特殊的属性，可以访问全部文档：

document.documentElement - 全部文档
document.body - 文档的主体

eg:

<body>

<p>Hello World!</p>

<div>

<p>

本例演示 <b>document.body</b> 属性。

</p>

</div>

alert(document.body.innerHTML);

</script>

</body>

1.11．5、childNodes 和 nodeValue

除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

下面的代码获取 id="intro" 的 <p> 元素的值：

Eg:

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

var txt = document.getElementById("intro").childNodes[0].nodeValue;

document.write(txt);

</script>

在上面的例子中，getElementById 是一个方法，而 childNodes 和 nodeValue 是属性。

在本教程中，我们将使用 innerHTML 属性。不过，学习上面的方法有助于对 DOM 树结构和导航的理解。

1.12、DOM 总结

本教程已经向您讲解了如何使用 HTML DOM 来增强网站的动态交互性。

您已经学会了如何操作 HTML 元素以响应不同的场景。

如需更多有关 HTML DOM 的信息，请访问我们的 HTML DOM 实例和 HTMLDOM 参考手册。

二、DOM 实例。。。

实例省略。。。

三、DOM参考手册----看javascript参考手册Browser对象HTML DOM 对象和HTML对象

本部分提供完整的 JavaScript 参考手册：

JavaScript 本地对象和内置对象
Browser 对象（BOM）
HTML DOM 对象

yemyself

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录