1.简介
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树,这种结构被称为节点树:
节点树中的节点彼此拥有层级关系。我们常用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
-
在节点树中,顶端节点被称为根(root)。
-
每个节点都有父节点、除了根(它没有父节点)。
-
一个节点可拥有任意数量的子节点。
-
同胞是拥有相同父节点的节点。
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
-
JavaScript 能够改变页面中的所有 HTML 元素
-
JavaScript 能够改变页面中的所有 HTML 属性
-
JavaScript 能够改变页面中的所有 CSS 样式
-
JavaScript 能够对页面中的所有事件做出反应
2.方法和属性
HTML DOM 方法是我们可以在节点(HTML 元素)上执行的动作。
HTML DOM 属性是我们可以在节点(HTML 元素)设置和修改的值。
一些常用的 HTML DOM 方法:
-
getElementById(id) - 获取带有指定 id 的节点(元素)
-
appendChild(node) - 插入新的子节点(元素)
-
removeChild(node) - 删除子节点(元素)
一些常用的 HTML DOM 属性:
-
innerHTML - 节点(元素)的文本值
-
parentNode - 节点(元素)的父节点
-
childNodes - 节点(元素)的子节点
-
attributes - 节点(元素)的属性节点
下面是一些常用方法:
方法 | 描述 |
---|---|
getElementById() | 返回带有指定 ID 的元素。 |
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
appendChild() | 把新的子节点添加到指定节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
insertBefore() | 在指定的子节点前面插入新的子节点。 |
createAttribute() | 创建属性节点。 |
createElement() | 创建元素节点。 |
createTextNode() | 创建文本节点。 |
getAttribute() | 返回指定的属性值。 |
setAttribute() | 把指定属性设置或修改为指定的值。 |
3.DOM 集合(Collection)
getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象类似包含 HTML 元素的一个数组。
以下代码获取文档所有的 <p> 元素:
var x = document.getElementsByTagName("p");
/*
集合中的元素可以通过索引(以 0 为起始位置)来访问。
访问第二个 <p> 元素可以是以下代码:
*/
y = x[1];
HTMLCollection 对象的 length 属性定义了集合中元素的数量。
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;
实例:修改所有 <p> 元素的背景颜色
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
myCollection[i].style.backgroundColor = "red";
}
4.修改HTML
修改 HTML DOM 意味着许多不同的方面:
-
改变 HTML 内容
-
改变 CSS 样式
-
改变 HTML 属性
-
创建新的 HTML 元素
-
删除已有的 HTML 元素
-
改变事件(处理程序)
创建 HTML 内容
改变元素内容的最简单的方法是使用 innerHTML 属性。
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>段落通过脚本来修改内容。</p>
改变 HTML 样式
通过 HTML DOM,您能够访问 HTML 元素的样式对象。
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。
appendChild()为追加到父元素的最后一个子元素后面,如果不希望如此,也可以insertBefore()追加到父元素的第一个子元素前面。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除已有的 HTML 元素
如需删除 HTML 元素,您必须清楚该元素的父元素:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
替换 HTML 元素
如需替换 HTML DOM 中的元素,请使用 replaceChild() 方法:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>
事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。
HTML 事件的例子:
-
当用户点击鼠标时
-
当网页已加载时
-
当图片已加载时
-
当鼠标移动到元素上时
-
当输入字段被改变时
-
当 HTML 表单被提交时
-
当用户触发按键时
比如:
在本例中,当用户点击文本时,会触发事件改变文本。
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
注意:HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件:
/*为 button 元素分配 onclick 事件:*/
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
5.事件汇总
下面总结一些常用的事件。
鼠标事件
属性 | 描述 |
---|---|
onclick | 当用户点击某个对象时调用的事件句柄。 |
oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
ondblclick | 当用户双击某个对象时调用的事件句柄。 |
onmousedown | 鼠标按钮被按下。 |
onmouseenter | 当鼠标指针移动到元素上时触发。 |
onmouseleave | 当鼠标指针移出元素时触发 |
onmousemove | 鼠标被移动。 |
onmouseover | 鼠标移到某元素之上。 |
onmouseout | 鼠标从某元素移开。 |
onmouseup | 鼠标按键被松开。 |
键盘事件
属性 | 描述 |
---|---|
onkeydown | 某个键盘按键被按下。 |
onkeypress | 某个键盘按键被按下并松开。 |
onkeyup | 某个键盘按键被松开。 |
表单事件
属性 | 描述 |
---|---|
onblur | 元素失去焦点时触发 |
onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
onfocus | 元素获取焦点时触发 |
onfocusin | 元素即将获取焦点时触发 |
onfocusout | 元素即将失去焦点时触发 |
oninput | 元素获取用户输入时触发 |
onreset | 表单重置时触发 |
onsearch | 用户向搜索域输入文本时触发 ( <input="search">) |
onselect | 用户选取文本时触发 ( <input> 和 <textarea>) |
onsubmit | 表单提交时触发 |
剪贴板事件
属性 | 描述 |
---|---|
oncopy | 该事件在用户拷贝元素内容时触发 |
oncut | 该事件在用户剪切元素内容时触发 |
onpaste | 该事件在用户粘贴元素内容时触发 |