JavaScript总结之三
2015-10-27 11:24
585 查看
第三部分 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>
<title>DOM
教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<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() | 创建文本节点。 | 18c2e
| 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>
<script>
document.getElementById("p1").innerHTML = "New
text!";
</script>
1.7.2、改变HTML样式
通过 HTML DOM，您能够访问 HTML 元素的样式对象。下面的例子改变一个段落的 HTML 样式：
Eg：
<p id="p2">Hello
world!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
1.7.3、创建新的HTML元素
如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。Eg：
<div id="mydiv">
<p id="p1">段落1</p>
<p id="p2">段落2</p>
</div>
<script>
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>
<script>
document.getElementById("p1").innerHTML = "New
text!";
</script>
1.8.2、改变HTML 样式
---和上面DOM 修改一个方法是一样的通过 HTML DOM，您能够访问 HTML 对象的样式对象。
下面的例子更改段落的 HTML 样式：
Eg：
<p id="p2">Hello
world!</p>
<script>
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：
<script>
function ChangeBackground() {
document.body.style.backgroundColor = "lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" value="改变背景色" />
下面的例子在按钮被点击时改变 <p> 元素的文本：
Eg：
<p id="p1">Hello
world!</p>
<script>
function ChangeText() {
document.getElementById("p1").innerHTML = "New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change
text">
1.9、DOM 元素
添加、删除和替换 HTML 元素。1.9.1、创建新的HTML元素-appendChild()
如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。Eg：---和DOM 修改3一样的例子
<div id="mydiv">
<p id="p1">段落1</p>
<p id="p2">段落2</p>
</div>
<script>
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 id="div1">
<p id="p1">段落1</p>
<p id="p2">段落2</p>
</div>
<script>
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 id="div1">
<p id="p1">段落1</p>
<p id="p2">段落2</p>
</div>
<script>
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 id="div1">
<p id="p1">段落1</p>
<p id="p2">段落2</p>
</div>
<script>
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>DOM 很有用!</p>
<p>本例演示节点关系。</p>
</div>
</body>
首个 <p> 元素是 <body> 元素的首个子元素（firstChild）
<div> 元素是 <body> 元素的最后一个子元素（lastChild）
<body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）
firstChild 属性可用于访问元素的文本：
eg:
<p id="intro">Hello
World!</p>
<script>
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>DOM 很有用!</p>
<p>
本例演示 <b>document.body</b> 属性。
</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
1.11．5、childNodes 和 nodeValue
除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。下面的代码获取 id="intro" 的 <p> 元素的值：
Eg:
<p id="intro">Hello
World!</p>
<script>
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 对象
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Web布局连载——两栏固定布局（五）
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 设计更快的网页（三）：字体和 CSS 调整
- IE8开发人员工具教程（二）