RN5_DOM
DOM简介
DOM定义了访问和操作 HTML 文档的标准方法。
DOM的三部分：
l 核心 DOM - 针对任何结构化文档的标准模型
l XML DOM - 针对 XML 文档的标准模型
l HTML DOM - 针对 HTML 文档的标准模型
XML DOM和HTML DOM
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
HTML DOM 是：
l HTML 的标准对象模型
l HTML 的标准编程接口
l W3C 标准
HTML DOM
HTML 片段：
<html>
<head>
<metacharset="utf-8">
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 课程1</h1>
<p>Hello world!</p>
</body>
</html>
l <html> 节点拥有两个子节点：<head> 和 <body>
l <head> 节点拥有两个子节点：<meta> 与 <title> 节点
l <title> 节点也拥有一个子节点：文本节点 "DOM 教程"
l <h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点
HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
innerHTML 属性
innerHTML属性对于获取或替换 HTML 元素的内容很有用。
nodeValue 属性
l 元素节点的nodeValue 是 undefined 或 null
l 文本节点的nodeValue 是文本本身
l 属性节点的nodeValue 是属性值
nodeType 属性
返回节点的类型。
一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
一些 DOM 对象方法
访问 HTML 元素（节点）
以不同的方式来访问 HTML 元素：
l 通过使用getElementById() 方法
l 通过使用getElementsByTagName() 方法
l 通过使用getElementsByClassName() 方法
getElementById() 方法
返回带有指定 ID 的元素引用。
node.getElementById("id");
getElementsByTagName() 方法
返回带有指定标签名的所有元素。
<p>HelloWorld!</p>
<p>DOM 是非常有用的!</p>
<p>这个实例演示了<b>getElementsByTagName</b> 方法的使用。</p>
<script>
x=document.getElementsByTagName("p");
document.write("第一个段落的文本为:" + x[0].innerHTML);
</script>
结果：
Hello World!
DOM 是非常有用的!
这个实例演示了 getElementsByTagName 方法的使用。
第一个段落的文本为: Hello World!
getElementsByClassName() 方法
查找带有相同类名的所有 HTML 元素。
document.getElementsByClassName("intro");
HTML DOM - 修改
修改 HTML = 改变元素、属性、样式和事件。
修改 HTML DOM 意味着许多不同的方面：
l 改变 HTML 内容
l 改变 CSS 样式
l 改变 HTML 属性
l 创建新的 HTML 元素
l 删除已有的 HTML 元素
l 改变事件（处理程序）
修改 HTML 内容
改变元素内容最简单的方法是使用 innerHTML 属性。
<script> document.getElementById("p1").innerHTML="新文本!"; </script>
创建HTML 元素
添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。
Eg:
<divid="div1">
<pid="p1">这是一个段落。</p>
<pid="p2">这是另一个段落。</p>
</div>
<script>
varpara=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
varelement=document.getElementById("div1");
element.appendChild(para);
</script>
结果：
这是一个段落。
这是另一个段落。
这是一个新段落。
用插入的方式：
varchild=document.getElementById("p1");
element.insertBefore(para,child);
删除HTML元素
删除 HTML 元素，您必须清楚该元素的父元素。
<script>
varparent=document.getElementById("div1");
varchild=document.getElementById("p1");
parent.removeChild(child);
</script>
替换 HTML 元素
<script>
varparent=document.getElementById("div1");
varchild=document.getElementById("p1");
varpara=document.createElement("p");
varnode=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>
改变 HTML 样式
document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script>
HTML的事件
HTML 事件的例子：
l 当用户点击鼠标时
l 当网页已加载时
l 当图片已加载时
l 当鼠标移动到元素上时
l 当输入字段被改变时
l 当 HTML 表单被提交时
l 当用户触发按键时
进入或离开页面
会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理cookies。
Eg：
</head>
<bodyοnlοad="checkCookies()">
<script>
functioncheckCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookie 可用")
}
else
{
alert("Cookie 不可用")
}
}
</script>
onchange 事件
常用于输入字段的验证。当用户改变输入字段的内容时，将调用onchange。
Eg：
<script>
functionmyFunction(){
varx=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text"id="fname" οnchange="myFunction()">
鼠标点击
几种调用方法：
Eg：
<h1onclick="this.innerHTML='Ooops!'">点击文本!</h1>
Eg：
<script>
functionchangetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1οnclick="changetext(this)">点击文本!</h1>
Eg：
<buttonid="myBtn">点我</button>
<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
functiondisplayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
鼠标移上和移出
onmouseover和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
Eg：
<div onmouseover="mOver(this)"onmouseout="mOut(this)">Mouse Over Me</div>
<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}
function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>
鼠标按下和抬起
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。
当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。
<div onmousedown="mDown(this)"onmouseup="mUp(this)">ClickMe</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You"
}
</script>
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
