HTML_DOM简介

1. 什么是HTML DOM

HTML DOM 是：
HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准
HTML DOM 定义了所有HTML元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

2. HTML DOM节点

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

2.1 DOM节点

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

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

3. HTML DOM 方法

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

3.1 编程接口

编程接口可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
方法是您能够执行的动作（比如添加或修改元素）。
属性是您能够获取或设置的值（比如节点的名称或内容）。

一些常用的对象方法

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

4. HTML DOM 属性

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

常用属性

属性	描述	示例
innerHTML	获取、替换元素内容	var txt=document.getElementById("intro").innerHTML;
nodeName	规定节点的名称，	var txt=document.getElementById("intro").nodeName;
nodeValue	节点的值
nodeType	节点的类型	元素 1 属性 2 文本 3 注释 8 文档 9

5. HTML DOM 访问

访问 HTML DOM - 查找 HTML 元素。

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

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

6. HTML DOM 修改

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

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

document.getElementById("p1").innerHTML="NEW TEXT!";

改变HTML样式

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

创建新的 HTML元素

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<!--创建新的html元素-->
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

7.修改HTML 内容

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

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

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

改变HTML样式
通过html dom可以访问html对象的样式对象

<script>
document.getElementById("p2").style.color="blue";
</script>

使用事件
html dom允许事件发生时执行代码
当html元素“有事情发生”时，浏览器会生成事件：

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

<input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color" />

8.HTML DOM 元素

添加、删除和替换HMTL元素

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

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
<!--创建一个新的p元素-->
var para=document.createElement("p"); 
<!--创建一个文本节点-->
var node=document.createTextNode("This is new.");
<!--向新的p元素中添加文本节点-->
para.appendChild(node);

var element=document.getElementById("div1");
<!--向div1元素追加新元素-->
element.appendChild(para);
</script>

创建新的HTML元素 insertBefore()

<div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
<!--将para插入到element元素中子元素child的前面-->
element.insertBefore(para,child);
</script>

删除已有的HTML元素

<div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

替换HTML元素

<div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>

9.HTML DOM 事件

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

对事件作出反应
当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。
HTML 事件的例子

当用户点击鼠标时
当网页加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当html表单被提交时
当用户触发按键时

onload 和 onunload 事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("Cookies are enabled")
	}
else
	{
	alert("Cookies are not enabled")
	}
}
</script>

<p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
</body>
</html>

onchange 事件
onchange 事件,对象域的内容发生改变时，常用于输入字段的验证

<!DOCTYPE html>
<html>
<head>
<script>
    function myFunction(){
        var x=document.getElementById("fname");
        x.value=x.value.toUpperCase();
    }
</script>
</head>

<body>
请输入你的英文名：<input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>
</body>
</html>

onmouseover 和 onmouseout 事件
onmouseover 和onmouseout事件可用于在鼠标指针移动到或离开元素时触发函数。

<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">Mouse Over Me</div>

<script>
    function mOver(obj){
        obj.innerHTML="谢谢你"
    }
    
    function mOut(obj){
        obj.innerHTML="把鼠标指针移动到上面"
    }
</script>
</body>
</html>

onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup以及onclick事件是鼠标点击的全部过程。

<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">点击这里</div>

<script>
    function mDown(obj){
        obj.style.backgroundColor="#1ec5e5";
        obj.innerHTML="松开鼠标"
    }
    
    function mUp(obj){
        obj.style.backgroundColor="#D94A38";
        obj.innerHTML="谢谢你"
    }
</script>
</body>
</html>

10.HTML DOM 导航

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

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

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

<html>
<body>
<p>Hello World!</p>
<div>
    <p>DOM 很有用!</p>
    <p>本例演示节点关系。</p>
</div>
</body>
</html>

说明：

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

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

document.documentElement - 全部文档,<html>元素内的所有
document.body - 文档的主体<body>元素内的所有

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

posted @ 2017-10-20 14:49 hptjzzj 阅读(278) 评论(0) 编辑收藏举报

刷新页面返回顶部

草木不语